stream-chat-react-native-core 5.4.1 → 5.4.2-beta.2

package/src/components/AttachmentPicker/components/AttachmentPickerItem.tsx

@@ -0,0 +1,245 @@
+import React from 'react';
+
+import { Alert, ImageBackground, StyleSheet, Text, View } from 'react-native';
+
+import { TouchableOpacity } from '@gorhom/bottom-sheet';
+import dayjs from 'dayjs';
+import { lookup } from 'mime-types';
+
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { Recorder } from '../../../icons';
+import { getLocalAssetUri } from '../../../native';
+import type { Asset, File } from '../../../types/types';
+import { vw } from '../../../utils/utils';
+
+type AttachmentPickerItemType = {
+  asset: Asset;
+  ImageOverlaySelectedComponent: React.ComponentType;
+  maxNumberOfFiles: number;
+  numberOfUploads: number;
+  selected: boolean;
+  setSelectedFiles: React.Dispatch<React.SetStateAction<File[]>>;
+  setSelectedImages: React.Dispatch<React.SetStateAction<Asset[]>>;
+  numberOfAttachmentPickerImageColumns?: number;
+};
+
+type AttachmentImageProps = Omit<AttachmentPickerItemType, 'setSelectedFiles'>;
+
+type AttachmentVideoProps = Omit<AttachmentPickerItemType, 'setSelectedImages'>;
+
+const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
+  const {
+    asset,
+    ImageOverlaySelectedComponent,
+    maxNumberOfFiles,
+    numberOfAttachmentPickerImageColumns,
+    numberOfUploads,
+    selected,
+    setSelectedFiles,
+  } = props;
+
+  const {
+    theme: {
+      attachmentPicker: { durationText, image, imageOverlay },
+      colors: { overlay, white },
+    },
+  } = useTheme();
+
+  const { duration, playableDuration, uri } = asset;
+
+  const videoDuration = duration ? duration : playableDuration;
+
+  const ONE_HOUR_IN_SECONDS = 3600;
+
+  let durationLabel = '00:00';
+
+  if (videoDuration) {
+    const isDurationLongerThanHour = videoDuration / ONE_HOUR_IN_SECONDS >= 1;
+    const formattedDurationParam = isDurationLongerThanHour ? 'HH:mm:ss' : 'mm:ss';
+    const formattedVideoDuration = dayjs
+      .duration(videoDuration, 'second')
+      .format(formattedDurationParam);
+    durationLabel = formattedVideoDuration;
+  }
+
+  const size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
+
+  const onPressVideo = async () => {
+    // For the case of expo messaging app where you need to fetch the asset uri from asset id
+    const localAssetURI = asset.id && (await getLocalAssetUri(asset.id));
+    if (selected) {
+      setSelectedFiles((files) => files.filter((file) => file.uri !== asset.uri));
+    } else {
+      setSelectedFiles((files) => {
+        if (numberOfUploads >= maxNumberOfFiles) {
+          Alert.alert('Maximum number of files reached');
+          return files;
+        }
+        return [
+          ...files,
+          {
+            duration: durationLabel,
+            name: asset.filename,
+            size: asset.fileSize,
+            type: 'video',
+            uri: localAssetURI || asset.uri,
+          },
+        ];
+      });
+    }
+  };
+
+  return (
+    <TouchableOpacity onPress={onPressVideo}>
+      <ImageBackground
+        source={{ uri }}
+        style={[
+          {
+            height: size,
+            margin: 1,
+            width: size,
+          },
+          image,
+        ]}
+      >
+        {selected && (
+          <View style={[styles.overlay, { backgroundColor: overlay }, imageOverlay]}>
+            <ImageOverlaySelectedComponent />
+          </View>
+        )}
+        <View style={styles.videoView}>
+          <Recorder height={20} pathFill={white} width={25} />
+          {videoDuration ? (
+            <Text style={[styles.durationText, durationText, { color: white }]}>
+              {durationLabel}
+            </Text>
+          ) : null}
+        </View>
+      </ImageBackground>
+    </TouchableOpacity>
+  );
+};
+
+const AttachmentImage: React.FC<AttachmentImageProps> = (props) => {
+  const {
+    asset,
+    ImageOverlaySelectedComponent,
+    maxNumberOfFiles,
+    numberOfAttachmentPickerImageColumns,
+    numberOfUploads,
+    selected,
+    setSelectedImages,
+  } = props;
+  const {
+    theme: {
+      attachmentPicker: { image, imageOverlay },
+      colors: { overlay },
+    },
+  } = useTheme();
+
+  const size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
+
+  const { uri } = asset;
+
+  const onPressImage = () => {
+    if (selected) {
+      setSelectedImages((images) => images.filter((image) => image.uri !== asset.uri));
+    } else {
+      setSelectedImages((images) => {
+        if (numberOfUploads >= maxNumberOfFiles) {
+          Alert.alert('Maximum number of files reached');
+          return images;
+        }
+        return [...images, asset];
+      });
+    }
+  };
+
+  return (
+    <TouchableOpacity onPress={onPressImage}>
+      <ImageBackground
+        source={{ uri }}
+        style={[
+          {
+            height: size,
+            margin: 1,
+            width: size,
+          },
+          image,
+        ]}
+      >
+        {selected && (
+          <View style={[styles.overlay, { backgroundColor: overlay }, imageOverlay]}>
+            <ImageOverlaySelectedComponent />
+          </View>
+        )}
+      </ImageBackground>
+    </TouchableOpacity>
+  );
+};
+
+const getFileType = (asset: Asset) => {
+  const { filename } = asset;
+  if (filename) {
+    const contentType = lookup(filename) || 'multipart/form-data';
+    return contentType.startsWith('image/') ? 'image' : 'video';
+  } else {
+    return asset.type === 'video' ? 'video' : 'image';
+  }
+};
+
+export const renderAttachmentPickerItem = ({ item }: { item: AttachmentPickerItemType }) => {
+  const {
+    asset,
+    ImageOverlaySelectedComponent,
+    maxNumberOfFiles,
+    numberOfAttachmentPickerImageColumns,
+    numberOfUploads,
+    selected,
+    setSelectedFiles,
+    setSelectedImages,
+  } = item;
+
+  const fileType = getFileType(asset);
+
+  return fileType === 'image' ? (
+    <AttachmentImage
+      asset={asset}
+      ImageOverlaySelectedComponent={ImageOverlaySelectedComponent}
+      maxNumberOfFiles={maxNumberOfFiles}
+      numberOfAttachmentPickerImageColumns={numberOfAttachmentPickerImageColumns}
+      numberOfUploads={numberOfUploads}
+      selected={selected}
+      setSelectedImages={setSelectedImages}
+    />
+  ) : (
+    <AttachmentVideo
+      asset={asset}
+      ImageOverlaySelectedComponent={ImageOverlaySelectedComponent}
+      maxNumberOfFiles={maxNumberOfFiles}
+      numberOfAttachmentPickerImageColumns={numberOfAttachmentPickerImageColumns}
+      numberOfUploads={numberOfUploads}
+      selected={selected}
+      setSelectedFiles={setSelectedFiles}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  durationText: {
+    fontWeight: 'bold',
+  },
+  overlay: {
+    alignItems: 'flex-end',
+    flex: 1,
+  },
+  videoView: {
+    bottom: 5,
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 5,
+    position: 'absolute',
+    width: '100%',
+  },
+});

package/src/components/MessageList/MessageList.tsx

@@ -92,13 +92,12 @@ const keyExtractor = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   item: MessageType<StreamChatGenerics>,
-) =>
-  item.id ||
-  (item.created_at
-    ? typeof item.created_at === 'string'
-      ? item.created_at
-      : item.created_at.toISOString()
-    : Date.now().toString());
+) => {
+  if (item.id) return item.id;
+  if (item.created_at)
+    return typeof item.created_at === 'string' ? item.created_at : item.created_at.toISOString();
+  return Date.now().toString();
+};
 
 const flatListViewabilityConfig = {
   viewAreaCoveragePercentThreshold: 1,
@@ -294,7 +293,6 @@ const MessageListWithContext = <
   );
 
   const messageList = useMessageList<StreamChatGenerics>({
-    inverted,
     noGroupByUser,
     threadList,
   });
@@ -911,12 +909,13 @@ const MessageListWithContext = <
     stickyHeaderDate?.getFullYear() === new Date().getFullYear() ? 'MMM D' : 'MMM D, YYYY';
   const tStickyHeaderDate =
     stickyHeaderDate && !hideStickyDateHeader ? tDateTimeParser(stickyHeaderDate) : null;
-  const stickyHeaderDateToRender =
-    tStickyHeaderDate === null || hideStickyDateHeader
-      ? null
-      : isDayOrMoment(tStickyHeaderDate)
-      ? tStickyHeaderDate.format(stickyHeaderFormatDate)
-      : new Date(tStickyHeaderDate).toDateString();
+
+  const stickyHeaderDateString = useMemo(() => {
+    if (tStickyHeaderDate === null || hideStickyDateHeader) return null;
+    if (isDayOrMoment(tStickyHeaderDate)) return tStickyHeaderDate.format(stickyHeaderFormatDate);
+
+    return new Date(tStickyHeaderDate).toDateString();
+  }, [tStickyHeaderDate, stickyHeaderFormatDate, hideStickyDateHeader]);
 
   const dismissImagePicker = () => {
     if (!hasMoved && selectedPicker) {
@@ -964,6 +963,13 @@ const MessageListWithContext = <
     );
   }
 
+  const StickyHeaderComponent = () => {
+    if (!stickyHeaderDateString) return null;
+    if (StickyHeader) return <StickyHeader dateString={stickyHeaderDateString} />;
+    if (messageListLengthAfterUpdate) return <DateHeader dateString={stickyHeaderDateString} />;
+    return null;
+  };
+
   return (
     <View
       style={[styles.container, { backgroundColor: white_snow }, container]}
@@ -1002,12 +1008,7 @@ const MessageListWithContext = <
       {!loading && (
         <>
           <View style={styles.stickyHeader}>
-            {stickyHeaderDateToRender &&
-              (StickyHeader ? (
-                <StickyHeader dateString={stickyHeaderDateToRender} />
-              ) : messageListLengthAfterUpdate ? (
-                <DateHeader dateString={stickyHeaderDateToRender} />
-              ) : null)}
+            <StickyHeaderComponent />
           </View>
           {!disableTypingIndicator && TypingIndicator && (
             <TypingIndicatorContainer>

package/src/components/MessageList/NetworkDownIndicator.tsx

@@ -33,22 +33,25 @@ export const NetworkDownIndicator = () => {
   } = useTheme();
   const { t } = useTranslationContext();
 
-  if (isOnline && !error) {
-    return null;
-  }
+  const getText = () => {
+    if (!isOnline) {
+      return t('Reconnecting...');
+    } else if (error) {
+      return t('Error loading messages for this channel...');
+    }
+    return '';
+  };
+
+  const indicatorText = getText();
+
+  if (!indicatorText) return null;
 
   return (
     <View
       style={[styles.errorNotification, { backgroundColor: `${grey}E6` }, errorNotification]}
       testID='error-notification'
     >
-      <Text style={[styles.errorNotificationText, errorNotificationText]}>
-        {!isOnline
-          ? t('Reconnecting...')
-          : error
-          ? t('Error loading messages for this channel...')
-          : ''}
-      </Text>
+      <Text style={[styles.errorNotificationText, errorNotificationText]}>{indicatorText}</Text>
     </View>
   );
 };

package/src/components/MessageList/__tests__/useMessageList.test.tsx

@@ -0,0 +1,67 @@
+import React, { FC } from 'react';
+
+import { renderHook } from '@testing-library/react-hooks';
+import type { DefaultStreamChatGenerics } from 'src/types/types';
+import type { DefaultGenerics, StreamChat } from 'stream-chat';
+
+import { useCreatePaginatedMessageListContext } from '../../../components/Channel/hooks/useCreatePaginatedMessageListContext';
+import {
+  ChatContext,
+  ChatContextValue,
+  PaginatedMessageListContextValue,
+  PaginatedMessageListProvider,
+} from '../../../contexts';
+
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { generateUser } from '../../../mock-builders/generator/user';
+import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { useMessageList } from '../hooks/useMessageList';
+
+jest.mock('react-native-fs', () => ({}));
+
+const clientUser = generateUser();
+let chatClient: StreamChat<DefaultGenerics> | StreamChat<DefaultStreamChatGenerics>;
+
+beforeEach(async () => {
+  chatClient = await getTestClientWithUser(clientUser);
+});
+
+const messages = new Array(10)
+  .fill(undefined)
+  .map((_: undefined, id: number) => generateMessage({ id }));
+
+const Providers: FC<{ children: React.ReactNode }> = ({ children }) => {
+  const messageListContext = useCreatePaginatedMessageListContext({
+    messages,
+  } as unknown as PaginatedMessageListContextValue);
+
+  return (
+    <ChatContext.Provider
+      value={
+        {
+          auto_translation_enabled: true,
+          client: chatClient,
+        } as unknown as ChatContextValue
+      }
+    >
+      <PaginatedMessageListProvider value={messageListContext}>
+        {children}
+      </PaginatedMessageListProvider>
+    </ChatContext.Provider>
+  );
+};
+
+describe('useMessageList', () => {
+  it('should always return a list of reversed messages', () => {
+    const { result } = renderHook(
+      () =>
+        useMessageList({
+          noGroupByUser: true,
+          threadList: false,
+        }),
+      { wrapper: Providers },
+    );
+    const reversedMessages = messages.reverse();
+    expect(result.current.map(({ id }) => id)).toEqual(reversedMessages.map(({ id }) => id));
+  });
+});

package/src/components/MessageList/hooks/useMessageList.ts

@@ -18,7 +18,6 @@ import { getReadStates } from '../utils/getReadStates';
 
 export type UseMessageListParams = {
   deletedMessagesVisibilityType?: DeletedMessagesVisibilityType;
-  inverted?: boolean;
   noGroupByUser?: boolean;
   threadList?: boolean;
 };
@@ -52,7 +51,7 @@ export const useMessageList = <
 >(
   params: UseMessageListParams,
 ) => {
-  const { inverted, noGroupByUser, threadList } = params;
+  const { noGroupByUser, threadList } = params;
   const { client } = useChatContext<StreamChatGenerics>();
   const { hideDateSeparators, maxTimeBetweenGroupedMessages, read } =
     useChannelContext<StreamChatGenerics>();
@@ -104,9 +103,7 @@ export const useMessageList = <
       readBy: msg.id ? readData[msg.id] || false : false,
     }));
 
-  return (
-    inverted
-      ? messagesWithStylesReadByAndDateSeparator.reverse()
-      : messagesWithStylesReadByAndDateSeparator
-  ) as MessageType<StreamChatGenerics>[];
+  return [
+    ...messagesWithStylesReadByAndDateSeparator,
+  ].reverse() as MessageType<StreamChatGenerics>[];
 };

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -211,7 +211,7 @@ export type LocalMessageInputContext<
   /** Function for attempting to upload an image */
   uploadImage: ({ newImage }: { newImage: ImageUpload }) => Promise<void>;
   uploadNewFile: (file: File) => Promise<void>;
-  uploadNewImage: (image: Asset) => Promise<void>;
+  uploadNewImage: (image: Partial<Asset>) => Promise<void>;
 };
 
 export type InputMessageInputContextValue<
@@ -549,16 +549,8 @@ export const MessageInputProvider = <
   const openAttachmentPicker = () => {
     if (hasImagePicker) {
       Keyboard.dismiss();
-      openPicker();
       setSelectedPicker('images');
-      /**
-       * TODO: Remove this, this is the result of
-       * the bottom sheet now having some keyboard
-       * handling baked in, creating an issue when
-       * we call dismiss and open in short order.
-       * https://github.com/gorhom/react-native-bottom-sheet/issues/446
-       */
-      setTimeout(openPicker, 600);
+      openPicker();
     } else if (hasFilePicker) {
       pickFile();
     }
@@ -834,19 +826,27 @@ export const MessageInputProvider = <
     }
   };
 
-  const triggerSettings = channel
-    ? value.autoCompleteTriggerSettings
-      ? value.autoCompleteTriggerSettings({
+  const getTriggerSettings = () => {
+    let triggerSettings: TriggerSettings<StreamChatGenerics> = {};
+    if (channel) {
+      if (value.autoCompleteTriggerSettings) {
+        triggerSettings = value.autoCompleteTriggerSettings({
           channel,
           client,
           onMentionSelectItem: onSelectItem,
-        })
-      : ACITriggerSettings<StreamChatGenerics>({
+        });
+      } else {
+        triggerSettings = ACITriggerSettings<StreamChatGenerics>({
           channel,
           client,
           onMentionSelectItem: onSelectItem,
-        })
-    : ({} as TriggerSettings<StreamChatGenerics>);
+        });
+      }
+    }
+    return triggerSettings;
+  };
+
+  const triggerSettings = getTriggerSettings();
 
   const updateMessage = async () => {
     try {
@@ -946,13 +946,15 @@ export const MessageInputProvider = <
        * if the uri includes assets-library, this uses the CameraRoll.save
        * function to also create a local uri.
        */
-      const localUri = file.id
-        ? await getLocalAssetUri(file.id)
-        : file.uri?.match(/assets-library/)
-        ? await getLocalAssetUri(file.uri)
-        : file.uri;
-
-      const uri = file.name || localUri || '';
+      const getLocalUri = async () => {
+        if (file.id) {
+          return await getLocalAssetUri(file.id);
+        } else if (file.uri?.match(/assets-library/)) {
+          return await getLocalAssetUri(file.uri);
+        }
+        return file.uri;
+      };
+      const uri = file.name || (await getLocalUri()) || '';
       /**
        * We skip compression if:
        * - the file is from the camera as that should already be compressed
@@ -1053,7 +1055,7 @@ export const MessageInputProvider = <
     }
   };
 
-  const uploadNewImage = async (image: Asset) => {
+  const uploadNewImage = async (image: Partial<Asset>) => {
     const id = generateRandomId();
 
     const isBlockedImageMimeType = blockedImageMimeTypes?.some((mimeType: string) =>

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -64,6 +64,7 @@ export const OverlayProvider = <
 >(
   props: PropsWithChildren<OverlayProviderProps<StreamChatGenerics>>,
 ) => {
+  const bottomSheetCloseTimeoutRef = useRef<NodeJS.Timeout>();
   const {
     AttachmentPickerBottomSheetHandle = DefaultAttachmentPickerBottomSheetHandle,
     attachmentPickerBottomSheetHandleHeight,
@@ -77,8 +78,19 @@ export const OverlayProvider = <
     CameraSelectorIcon = DefaultCameraSelectorIcon,
     children,
     closePicker = (ref) => {
-      if (ref.current) {
+      if (ref.current?.close) {
+        if (bottomSheetCloseTimeoutRef.current) {
+          clearTimeout(bottomSheetCloseTimeoutRef.current);
+        }
         ref.current.close();
+        // Attempt to close the bottomsheet again to circumvent accidental opening on Android.
+        // Details: This to prevent a race condition where the close function is called during the point when a internal container layout happens within the bottomsheet due to keyboard affecting the layout
+        // If the container layout measures a shorter height than previous but if the close snapped to the previous height's position, the bottom sheet will show up
+        // this short delay ensures that close function is always called after a container layout due to keyboard change
+        // NOTE: this timeout has to be above 500 as the keyboardAnimationDuration is 500 in the bottomsheet library - see src/hooks/useKeyboard.ts there for more details
+        bottomSheetCloseTimeoutRef.current = setTimeout(() => {
+          ref.current?.close();
+        }, 600);
       }
     },
     FileSelectorIcon = DefaultFileSelectorIcon,
@@ -96,6 +108,9 @@ export const OverlayProvider = <
     numberOfAttachmentPickerImageColumns,
     numberOfImageGalleryGridColumns,
     openPicker = (ref) => {
+      if (bottomSheetCloseTimeoutRef.current) {
+        clearTimeout(bottomSheetCloseTimeoutRef.current);
+      }
       if (ref.current?.snapToIndex) {
         ref.current.snapToIndex(0);
       } else {
@@ -154,10 +169,19 @@ export const OverlayProvider = <
     return () => backHandler.remove();
   }, [overlay]);
 
+  useEffect(
+    () =>
+      // cleanup the timeout if the component unmounts
+      () => {
+        if (bottomSheetCloseTimeoutRef.current) {
+          clearTimeout(bottomSheetCloseTimeoutRef.current);
+        }
+      },
+    [],
+  );
+
   useEffect(() => {
-    if (bottomSheetRef.current) {
-      bottomSheetRef.current.close?.();
-    }
+    closePicker(bottomSheetRef);
     cancelAnimation(overlayOpacity);
     if (overlay !== 'none') {
       overlayOpacity.value = withTiming(1);

package/src/hooks/__tests__/useAppStateListener.test.tsx

@@ -0,0 +1,41 @@
+import { AppState, AppStateStatus } from 'react-native';
+
+import { renderHook } from '@testing-library/react-hooks/pure';
+import { waitFor } from '@testing-library/react-native';
+
+import { useAppStateListener } from '../useAppStateListener';
+
+describe('useAppStateListener', () => {
+  const onForeground = jest.fn();
+  const onBackground = jest.fn();
+  const addEventListenerSpy = jest.spyOn(AppState, 'addEventListener');
+  AppState.currentState = 'active';
+  const { unmount } = renderHook(() => useAppStateListener(onForeground, onBackground));
+  const appStateOnChangeMockFunc = addEventListenerSpy.mock.calls[0][1];
+  const { remove: appStateOnChangeSubscriptionRemoveMockFunc } =
+    addEventListenerSpy.mock.results[0].value;
+  test.each<[AppStateStatus, jest.Mock, number]>([
+    ['background', onBackground, 1],
+    ['active', onForeground, 1],
+    ['inactive', onBackground, 2],
+    ['active', onForeground, 2],
+    ['background', onBackground, 3],
+  ])(
+    'Appropriate callback called when appstate is changed to %s)',
+    async (newAppState, expectedCallback, times) => {
+      appStateOnChangeMockFunc(newAppState);
+      await waitFor(() => {
+        expect(expectedCallback).toHaveBeenCalledTimes(times);
+      });
+    },
+  );
+  test('check unmount behavior', async () => {
+    await waitFor(() => {
+      expect(appStateOnChangeSubscriptionRemoveMockFunc).not.toHaveBeenCalled();
+    });
+    unmount();
+    await waitFor(() => {
+      expect(appStateOnChangeSubscriptionRemoveMockFunc).toHaveBeenCalled();
+    });
+  });
+});

package/src/hooks/useAppStateListener.ts

@@ -1,22 +1,19 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { AppState, AppStateStatus } from 'react-native';
 
 export const useAppStateListener = (onForeground?: () => void, onBackground?: () => void) => {
-  const [appState, setAppState] = useState(AppState.currentState);
+  const appStateRef = useRef(AppState.currentState);
   const handleAppStateChange = useCallback(
     (nextAppState: AppStateStatus) => {
-      if (appState === 'background' && nextAppState === 'active' && onForeground) {
-        onForeground();
-      } else if (
-        appState.match(/active|inactive/) &&
-        nextAppState === 'background' &&
-        onBackground
-      ) {
-        onBackground();
+      const prevAppState = appStateRef.current;
+      if (prevAppState.match(/inactive|background/) && nextAppState === 'active') {
+        onForeground?.();
+      } else if (prevAppState === 'active' && nextAppState.match(/inactive|background/)) {
+        onBackground?.();
       }
-      setAppState(nextAppState);
+      appStateRef.current = nextAppState;
     },
-    [onBackground, onForeground, appState],
+    [onBackground, onForeground],
   );
 
   useEffect(() => {