stream-chat-react-native-core 4.9.0-beta.4 → 4.10.0

package/src/components/Attachment/Gallery.tsx

@@ -1,10 +1,13 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
+import type { Attachment } from 'stream-chat';
+
 import { GalleryImage } from './GallaryImage';
 import { useLoadingImage } from './hooks/useLoadingImage';
 import { buildGallery } from './utils/buildGallery/buildGallery';
 
+import type { Thumbnail } from './utils/buildGallery/types';
 import { getGalleryImageBorderRadius } from './utils/getGalleryImageBorderRadius';
 
 import { openUrlSafely } from './utils/openUrlSafely';
@@ -135,26 +138,18 @@ const GalleryWithContext = <
     VideoThumbnail,
   } = props;
 
-  const { isLoadingImage, isLoadingImageError, setLoadingImage, setLoadingImageError } =
-    useLoadingImage();
-
   const {
     theme: {
-      colors: { overlay },
       messageSimple: {
         gallery: {
           galleryContainer,
           galleryItemColumn,
           gridHeight,
           gridWidth,
-          image,
-          imageContainer,
           maxHeight,
           maxWidth,
           minHeight,
           minWidth,
-          moreImagesContainer,
-          moreImagesText,
         },
       },
     },
@@ -180,8 +175,6 @@ const GalleryWithContext = <
   );
 
   if (!imagesAndVideos?.length) return null;
-  const messageText = message?.text;
-  const messageId = message?.id;
   const numOfColumns = thumbnailGrid.length;
 
   return (
@@ -212,31 +205,7 @@ const GalleryWithContext = <
             ]}
             testID={`gallery-${invertedDirections ? 'row' : 'column'}-${colIndex}`}
           >
-            {rows.map(({ height, resizeMode, thumb_url, type, url, width }, rowIndex) => {
-              const openImageViewer = () => {
-                if (!legacyImageViewerSwipeBehaviour && message) {
-                  // Added if-else to keep the logic readable, instead of DRY.
-                  // if - legacyImageViewerSwipeBehaviour is disabled
-                  // else - legacyImageViewerSwipeBehaviour is enabled
-                  setImages([message]);
-                  setImage({ messageId: message.id, url });
-                  setOverlay('gallery');
-                } else if (legacyImageViewerSwipeBehaviour) {
-                  setImage({ messageId: message?.id, url });
-                  setOverlay('gallery');
-                }
-              };
-
-              const defaultOnPress = () => {
-                if (type === 'video' && !isVideoPackageAvailable()) {
-                  // This condition is kinda unreachable, since we render videos as file attachment if the video
-                  // library is not installed. But doesn't hurt to have extra safeguard, in case of some customizations.
-                  openUrlSafely(url);
-                } else {
-                  openImageViewer();
-                }
-              };
-
+            {rows.map((thumbnail, rowIndex) => {
               const borderRadius = getGalleryImageBorderRadius({
                 alignment,
                 colIndex,
@@ -244,7 +213,7 @@ const GalleryWithContext = <
                 hasThreadReplies,
                 height,
                 invertedDirections,
-                messageText,
+                messageText: message?.text,
                 numOfColumns,
                 numOfRows,
                 rowIndex,
@@ -253,112 +222,35 @@ const GalleryWithContext = <
                 width,
               });
 
+              if (message === undefined) {
+                return null;
+              }
+
               return (
-                <TouchableOpacity
-                  activeOpacity={0.8}
-                  disabled={preventPress}
-                  key={`gallery-item-${messageId}/${colIndex}/${rowIndex}/${imagesAndVideos.length}`}
-                  onLongPress={(event) => {
-                    if (onLongPress) {
-                      onLongPress({
-                        emitter: 'gallery',
-                        event,
-                      });
-                    }
-                  }}
-                  onPress={(event) => {
-                    if (onPress) {
-                      onPress({
-                        defaultHandler: defaultOnPress,
-                        emitter: 'gallery',
-                        event,
-                      });
-                    }
-                  }}
-                  onPressIn={(event) => {
-                    if (onPressIn) {
-                      onPressIn({
-                        defaultHandler: defaultOnPress,
-                        emitter: 'gallery',
-                        event,
-                      });
-                    }
-                  }}
-                  style={[
-                    styles.imageContainer,
-                    {
-                      height,
-                      width,
-                    },
-                    imageContainer,
-                  ]}
-                  testID={`gallery-${
-                    invertedDirections ? 'row' : 'column'
-                  }-${colIndex}-item-${rowIndex}`}
-                  {...additionalTouchableProps}
-                >
-                  {type === 'video' ? (
-                    <VideoThumbnail
-                      style={[
-                        borderRadius,
-                        image,
-                        {
-                          height: height - 1,
-                          width: width - 1,
-                        },
-                      ]}
-                      thumb_url={thumb_url}
-                    />
-                  ) : (
-                    <View style={styles.imageContainerStyle}>
-                      <MemoizedGalleryImage
-                        onError={(error) => {
-                          console.warn(error);
-                          setLoadingImage(false);
-                          setLoadingImageError(true);
-                        }}
-                        onLoadEnd={() => setLoadingImage(false)}
-                        onLoadStart={() => setLoadingImage(true)}
-                        resizeMode={resizeMode}
-                        style={[
-                          borderRadius,
-                          image,
-                          {
-                            height: height - 1,
-                            width: width - 1,
-                          },
-                        ]}
-                        uri={url}
-                      />
-                      {isLoadingImage && (
-                        <View style={{ position: 'absolute' }}>
-                          <ImageLoadingIndicator style={styles.imageLoadingIndicatorStyle} />
-                        </View>
-                      )}
-                      {isLoadingImageError && (
-                        <View style={{ position: 'absolute' }}>
-                          <ImageLoadingFailedIndicator style={styles.imageLoadingIndicatorStyle} />
-                        </View>
-                      )}
-                    </View>
-                  )}
-                  {colIndex === numOfColumns - 1 &&
-                  rowIndex === numOfRows - 1 &&
-                  imagesAndVideos.length > 4 ? (
-                    <View
-                      style={[
-                        StyleSheet.absoluteFillObject,
-                        styles.moreImagesContainer,
-                        { backgroundColor: overlay },
-                        moreImagesContainer,
-                      ]}
-                    >
-                      <Text style={[styles.moreImagesText, moreImagesText]}>
-                        {`+${imagesAndVideos.length - 4}`}
-                      </Text>
-                    </View>
-                  ) : null}
-                </TouchableOpacity>
+                <GalleryThumbnail
+                  additionalTouchableProps={additionalTouchableProps}
+                  borderRadius={borderRadius}
+                  colIndex={colIndex}
+                  ImageLoadingFailedIndicator={ImageLoadingFailedIndicator}
+                  ImageLoadingIndicator={ImageLoadingIndicator}
+                  imagesAndVideos={imagesAndVideos}
+                  invertedDirections={invertedDirections || false}
+                  key={rowIndex}
+                  legacyImageViewerSwipeBehaviour={legacyImageViewerSwipeBehaviour}
+                  message={message}
+                  numOfColumns={numOfColumns}
+                  numOfRows={numOfRows}
+                  onLongPress={onLongPress}
+                  onPress={onPress}
+                  onPressIn={onPressIn}
+                  preventPress={preventPress}
+                  rowIndex={rowIndex}
+                  setImage={setImage}
+                  setImages={setImages}
+                  setOverlay={setOverlay}
+                  thumbnail={thumbnail}
+                  VideoThumbnail={VideoThumbnail}
+                />
               );
             })}
           </View>
@@ -368,6 +260,204 @@ const GalleryWithContext = <
   );
 };
 
+type GalleryThumbnailProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  borderRadius: {
+    borderBottomLeftRadius: number;
+    borderBottomRightRadius: number;
+    borderTopLeftRadius: number;
+    borderTopRightRadius: number;
+  };
+  colIndex: number;
+  imagesAndVideos: Attachment<StreamChatGenerics>[];
+  invertedDirections: boolean;
+  message: MessageType<StreamChatGenerics>;
+  numOfColumns: number;
+  numOfRows: number;
+  rowIndex: number;
+  thumbnail: Thumbnail;
+} & Pick<
+  MessagesContextValue<StreamChatGenerics>,
+  | 'additionalTouchableProps'
+  | 'legacyImageViewerSwipeBehaviour'
+  | 'VideoThumbnail'
+  | 'ImageLoadingIndicator'
+  | 'ImageLoadingFailedIndicator'
+> &
+  Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setImage' | 'setImages'> &
+  Pick<
+    MessageContextValue<StreamChatGenerics>,
+    'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'
+  > &
+  Pick<OverlayContextValue, 'setOverlay'>;
+
+const GalleryThumbnail = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  additionalTouchableProps,
+  borderRadius,
+  colIndex,
+  ImageLoadingFailedIndicator,
+  ImageLoadingIndicator,
+  imagesAndVideos,
+  invertedDirections,
+  legacyImageViewerSwipeBehaviour,
+  message,
+  numOfColumns,
+  numOfRows,
+  onLongPress,
+  onPress,
+  onPressIn,
+  preventPress,
+  rowIndex,
+  setImage,
+  setImages,
+  setOverlay,
+  thumbnail,
+  VideoThumbnail,
+}: GalleryThumbnailProps<StreamChatGenerics>) => {
+  const { isLoadingImage, isLoadingImageError, setLoadingImage, setLoadingImageError } =
+    useLoadingImage();
+
+  const {
+    theme: {
+      colors: { overlay },
+      messageSimple: {
+        gallery: { image, imageContainer, moreImagesContainer, moreImagesText },
+      },
+    },
+  } = useTheme();
+
+  const openImageViewer = () => {
+    if (!legacyImageViewerSwipeBehaviour && message) {
+      // Added if-else to keep the logic readable, instead of DRY.
+      // if - legacyImageViewerSwipeBehaviour is disabled
+      // else - legacyImageViewerSwipeBehaviour is enabled
+      setImages([message]);
+      setImage({ messageId: message.id, url: thumbnail.url });
+      setOverlay('gallery');
+    } else if (legacyImageViewerSwipeBehaviour) {
+      setImage({ messageId: message?.id, url: thumbnail.url });
+      setOverlay('gallery');
+    }
+  };
+
+  const defaultOnPress = () => {
+    if (thumbnail.type === 'video' && !isVideoPackageAvailable()) {
+      // This condition is kinda unreachable, since we render videos as file attachment if the video
+      // library is not installed. But doesn't hurt to have extra safeguard, in case of some customizations.
+      openUrlSafely(thumbnail.url);
+    } else {
+      openImageViewer();
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      disabled={preventPress}
+      key={`gallery-item-${message.id}/${colIndex}/${rowIndex}/${imagesAndVideos.length}`}
+      onLongPress={(event) => {
+        if (onLongPress) {
+          onLongPress({
+            emitter: 'gallery',
+            event,
+          });
+        }
+      }}
+      onPress={(event) => {
+        if (onPress) {
+          onPress({
+            defaultHandler: defaultOnPress,
+            emitter: 'gallery',
+            event,
+          });
+        }
+      }}
+      onPressIn={(event) => {
+        if (onPressIn) {
+          onPressIn({
+            defaultHandler: defaultOnPress,
+            emitter: 'gallery',
+            event,
+          });
+        }
+      }}
+      style={[
+        styles.imageContainer,
+        {
+          height: thumbnail.height,
+          width: thumbnail.width,
+        },
+        imageContainer,
+      ]}
+      testID={`gallery-${invertedDirections ? 'row' : 'column'}-${colIndex}-item-${rowIndex}`}
+      {...additionalTouchableProps}
+    >
+      {thumbnail.type === 'video' ? (
+        <VideoThumbnail
+          style={[
+            borderRadius,
+            image,
+            {
+              height: thumbnail.height - 1,
+              width: thumbnail.width - 1,
+            },
+          ]}
+          thumb_url={thumbnail.thumb_url}
+        />
+      ) : (
+        <View style={styles.imageContainerStyle}>
+          <MemoizedGalleryImage
+            onError={(error) => {
+              console.warn(error);
+              setLoadingImage(false);
+              setLoadingImageError(true);
+            }}
+            onLoadEnd={() => setLoadingImage(false)}
+            onLoadStart={() => setLoadingImage(true)}
+            resizeMode={thumbnail.resizeMode}
+            style={[
+              borderRadius,
+              image,
+              {
+                height: thumbnail.height - 1,
+                width: thumbnail.width - 1,
+              },
+            ]}
+            uri={thumbnail.url}
+          />
+          {isLoadingImage && (
+            <View style={{ position: 'absolute' }}>
+              <ImageLoadingIndicator style={styles.imageLoadingIndicatorStyle} />
+            </View>
+          )}
+          {isLoadingImageError && (
+            <View style={{ position: 'absolute' }}>
+              <ImageLoadingFailedIndicator style={styles.imageLoadingIndicatorStyle} />
+            </View>
+          )}
+        </View>
+      )}
+      {colIndex === numOfColumns - 1 && rowIndex === numOfRows - 1 && imagesAndVideos.length > 4 ? (
+        <View
+          style={[
+            StyleSheet.absoluteFillObject,
+            styles.moreImagesContainer,
+            { backgroundColor: overlay },
+            moreImagesContainer,
+          ]}
+        >
+          <Text style={[styles.moreImagesText, moreImagesText]}>
+            {`+${imagesAndVideos.length - 4}`}
+          </Text>
+        </View>
+      ) : null}
+    </TouchableOpacity>
+  );
+};
+
 const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
   prevProps: GalleryPropsWithContext<StreamChatGenerics>,
   nextProps: GalleryPropsWithContext<StreamChatGenerics>,

package/src/components/ChannelPreview/ChannelPreview.tsx

@@ -10,6 +10,7 @@ import {
 } from '../../contexts/channelsContext/ChannelsContext';
 import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
 
+import { useTranslatedMessage } from '../../hooks/useTranslatedMessage';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type ChannelPreviewPropsWithContext<
@@ -38,10 +39,15 @@ const ChannelPreviewWithContext = <
     | MessageResponse<StreamChatGenerics>
     | undefined
   >(channel.state.messages[channel.state.messages.length - 1]);
+
+  const translatedLastMessage = useTranslatedMessage<StreamChatGenerics>(
+    lastMessage || ({} as MessageResponse<StreamChatGenerics>),
+  );
+
   const [forceUpdate, setForceUpdate] = useState(0);
   const [unread, setUnread] = useState(channel.countUnread());
 
-  const latestMessagePreview = useLatestMessagePreview(channel, forceUpdate, lastMessage);
+  const latestMessagePreview = useLatestMessagePreview(channel, forceUpdate, translatedLastMessage);
 
   const channelLastMessage = channel.lastMessage();
   const channelLastMessageString = `${channelLastMessage?.id}${channelLastMessage?.updated_at}`;

package/src/components/ChannelPreview/__tests__/{ChannelPreview.test.js → ChannelPreview.test.tsx}

@@ -1,9 +1,14 @@
-import React from 'react';
+import React, { ComponentType } from 'react';
 import { Text } from 'react-native';
 
 import { act, render, waitFor } from '@testing-library/react-native';
 
-import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
+import type { Channel, StreamChat } from 'stream-chat';
+
+import {
+  getOrCreateChannelApi,
+  GetOrCreateChannelApiParams,
+} from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
 import dispatchMessageNewEvent from '../../../mock-builders/event/messageNew';
 import dispatchMessageReadEvent from '../../../mock-builders/event/messageRead';
@@ -13,8 +18,23 @@ import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
 import { Chat } from '../../Chat/Chat';
 import { ChannelPreview } from '../ChannelPreview';
+import type { ChannelPreviewMessengerProps } from '../ChannelPreviewMessenger';
+
+import '@testing-library/jest-native/extend-expect';
+
+type ChannelPreviewUIComponentProps = {
+  channel: {
+    id: string;
+  };
+  latestMessagePreview: {
+    messageObject: {
+      text: string;
+    };
+  };
+  unread: number;
+};
 
-const ChannelPreviewUIComponent = (props) => (
+const ChannelPreviewUIComponent = (props: ChannelPreviewUIComponentProps) => (
   <>
     <Text testID='channel-id'>{props.channel.id}</Text>
     <Text testID='unread-count'>{props.unread}</Text>
@@ -28,21 +48,27 @@ const ChannelPreviewUIComponent = (props) => (
 
 describe('ChannelPreview', () => {
   const clientUser = generateUser();
-  let chatClient;
-  let channel;
-
-  const getComponent = (props = {}) => (
-    <Chat client={chatClient}>
-      <ChannelPreview
-        {...props}
-        channel={channel}
-        client={chatClient}
-        Preview={ChannelPreviewUIComponent}
-      />
-    </Chat>
-  );
-
-  const initializeChannel = async (c) => {
+  let chatClient: StreamChat;
+  let channel: Channel | null;
+
+  const TestComponent = (props = {}) => {
+    if (channel === null) {
+      return null;
+    }
+
+    return (
+      <Chat client={chatClient}>
+        <ChannelPreview
+          {...props}
+          channel={channel}
+          client={chatClient}
+          Preview={ChannelPreviewUIComponent as ComponentType<ChannelPreviewMessengerProps>}
+        />
+      </Chat>
+    );
+  };
+
+  const useInitializeChannel = async (c: GetOrCreateChannelApiParams) => {
     useMockedApis(chatClient, [getOrCreateChannelApi(c)]);
 
     channel = chatClient.channel('messaging');
@@ -58,31 +84,22 @@ describe('ChannelPreview', () => {
     channel = null;
   });
 
-  it('should render with latest message on channel', async () => {
-    const message = generateMessage({
-      user: clientUser,
-    });
-    const c = generateChannelResponse({
-      messages: [message],
-    });
-    await initializeChannel(c);
-    const { queryByText } = render(getComponent());
-    await waitFor(() => queryByText(message.text));
-  });
-
   it('should mark channel as read, when message.read event is received for current user', async () => {
     const c = generateChannelResponse();
-    await initializeChannel(c);
-    channel.countUnread = () => 20;
+    await useInitializeChannel(c);
+
+    if (channel !== null) {
+      channel.countUnread = () => 20;
+    }
 
-    const { getByTestId } = render(getComponent());
+    const { getByTestId } = render(<TestComponent />);
 
     await waitFor(() => getByTestId('channel-id'));
 
     expect(getByTestId('unread-count')).toHaveTextContent('20');
 
     act(() => {
-      dispatchMessageReadEvent(chatClient, clientUser, channel);
+      dispatchMessageReadEvent(chatClient, clientUser, channel || {});
     });
 
     await waitFor(() => {
@@ -92,9 +109,9 @@ describe('ChannelPreview', () => {
 
   it('should update the lastest message on "message.new" event', async () => {
     const c = generateChannelResponse();
-    await initializeChannel(c);
+    await useInitializeChannel(c);
 
-    const { getByTestId } = render(getComponent());
+    const { getByTestId } = render(<TestComponent />);
 
     await waitFor(() => getByTestId('channel-id'));
 
@@ -103,7 +120,7 @@ describe('ChannelPreview', () => {
     });
 
     act(() => {
-      dispatchMessageNewEvent(chatClient, message, channel);
+      dispatchMessageNewEvent(chatClient, message, channel || {});
     });
 
     await waitFor(() => {
@@ -113,9 +130,9 @@ describe('ChannelPreview', () => {
 
   it('should update the unread count on "message.new" event', async () => {
     const c = generateChannelResponse();
-    await initializeChannel(c);
+    await useInitializeChannel(c);
 
-    const { getByTestId } = render(getComponent());
+    const { getByTestId } = render(<TestComponent />);
 
     await waitFor(() => getByTestId('channel-id'));
 
@@ -123,14 +140,35 @@ describe('ChannelPreview', () => {
       user: clientUser,
     });
 
-    channel.countUnread = () => 10;
+    if (channel !== null) {
+      channel.countUnread = () => 10;
+    }
 
     act(() => {
-      dispatchMessageNewEvent(chatClient, message, channel);
+      dispatchMessageNewEvent(chatClient, message, channel || {});
     });
 
     await waitFor(() => {
       expect(getByTestId('unread-count')).toHaveTextContent('10');
     });
   });
+
+  it('displays messages translated if applicable', async () => {
+    chatClient = await getTestClientWithUser({ id: 'mads', language: 'no' });
+
+    const message = {
+      i18n: {
+        no_text: 'Hallo verden!',
+      },
+      text: 'Hello world!',
+    };
+    const channel = generateChannelResponse({ messages: [message] });
+    await useInitializeChannel(channel);
+
+    const { getByText } = render(<TestComponent />);
+
+    await waitFor(() => {
+      expect(getByText(message.i18n.no_text)).toBeTruthy();
+    });
+  });
 });