Merge pull request #1125 from GetStream/mads/date-fromnow-undefined

Author: madsroskar

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -15,6 +15,7 @@ import { useOverlayContext } from '../../../contexts/overlayContext/OverlayConte
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import {
   isDayOrMoment,
+  TDateTimeParserOutput,
   useTranslationContext,
 } from '../../../contexts/translationContext/TranslationContext';
 import { Close } from '../../../icons';
@@ -104,16 +105,29 @@ export const ImageGalleryHeader = <Us extends UnknownType = DefaultUserType>(pro
   const parsedDate = photo ? tDateTimeParser(photo?.created_at) : null;
 
   /**
-   * .calendar is required on moment types, but in reality it
-   * is unavailable on first render. We therefore check if it
-   * is available and call it, otherwise we call .fromNow.
+   * .calendar and .fromNow can be initialized after the first render,
+   * and attempting to access them at that time will cause an error
+   * to be thrown.
+   *
+   * This falls back to null if neither exist.
    */
-  const date =
-    parsedDate && isDayOrMoment(parsedDate)
-      ? parsedDate.calendar
-        ? parsedDate.calendar()
-        : parsedDate.fromNow()
-      : null;
+  const getDateObject = (date: TDateTimeParserOutput | null) => {
+    if (date === null || !isDayOrMoment(date)) {
+      return null;
+    }
+
+    if (date.calendar) {
+      return date.calendar();
+    }
+
+    if (date.fromNow) {
+      return date.fromNow();
+    }
+
+    return null;
+  };
+
+  const date = getDateObject(parsedDate);
 
   const headerStyle = useAnimatedStyle<ViewStyle>(() => ({
     opacity: opacity.value,

package/src/components/ImageGallery/components/__tests__/ImageGalleryHeader.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import type Animated from 'react-native-reanimated';
+
+import { render } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
+import { ImageGalleryHeader } from '../ImageGalleryHeader';
+
+it('doesnt fail if fromNow is not available on first render', () => {
+  try {
+    const { getAllByText } = render(
+      <ThemeProvider>
+        <ImageGalleryHeader
+          opacity={1 as unknown as Animated.SharedValue<number>}
+          photo={{
+            id: 'id',
+            uri: 'file:///bogus/uri/to/photo.jpg',
+          }}
+          visible={1 as unknown as Animated.SharedValue<number>}
+        />
+      </ThemeProvider>,
+    );
+
+    expect(getAllByText('Unknown User')).toBeTruthy();
+  } catch (error: unknown) {
+    if (error instanceof Error) {
+      throw new Error(`Error encountered on first render of ImageGalleryHeader: ${error.message}`);
+    }
+  }
+});

package/src/components/Message/MessageSimple/utils/renderText.tsx

@@ -252,7 +252,13 @@ export const renderText = <
   };
 
   const list: ReactNodeOutput = (node, output, state) => (
-    <ListOutput node={node} output={output} state={state} styles={styles} />
+    <ListOutput
+      key={`list-${state.key}`}
+      node={node}
+      output={output}
+      state={state}
+      styles={styles}
+    />
   );
 
   const customRules = {

package/yarn.lock

@@ -5544,11 +5544,16 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-follow-redirects@^1.0.0, follow-redirects@^1.10.0:
+follow-redirects@^1.0.0:
   version "1.14.7"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.7.tgz#2004c02eb9436eee9a21446a6477debf17e81685"
   integrity sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==
 
+follow-redirects@^1.14.4:
+  version "1.14.8"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.8.tgz#016996fb9a11a100566398b1c6839337d7bfa8fc"
+  integrity sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA==
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -6414,21 +6419,14 @@ is-ci@^2.0.0:
   dependencies:
     ci-info "^2.0.0"
 
-is-core-module@^2.2.0, is-core-module@^2.8.0:
+is-core-module@^2.2.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.0.tgz#0321336c3d0925e497fd97f5d95cb114a5ccd548"
   integrity sha512-vd15qHsaqrRL7dtH6QNuy0ndJmRDrS9HAM1CAiSifNUFv4x1a0CCVsj18hJ1mShxIG6T2i1sO78MkP56r0nYRw==
   dependencies:
     has "^1.0.3"
 
-is-core-module@^2.8.0:
-  version "2.8.1"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211"
-  integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==
-  dependencies:
-    has "^1.0.3"
-
-is-core-module@^2.8.0:
+is-core-module@^2.8.0, is-core-module@^2.8.1:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211"
   integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==
@@ -10248,6 +10246,15 @@ resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.1
     is-core-module "^2.2.0"
     path-parse "^1.0.6"
 
+resolve@^1.20.0:
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
+  integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
+  dependencies:
+    is-core-module "^2.8.1"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 resolve@^2.0.0-next.3:
   version "2.0.0-next.3"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.3.tgz#d41016293d4a8586a39ca5d9b5f15cbea1f55e46"