stream-chat-react-native-core 5.30.0 → 5.31.0-beta.1

package/lib/typescript/utils/Streami18n.d.ts

@@ -144,6 +144,7 @@ export declare class Streami18n {
                 "Error loading channel list...": string;
                 "Error loading messages for this channel...": string;
                 "Error while loading, please reload/refresh": string;
+                "File is too large: {{ size }}, maximum upload size is {{ limit }}": string;
                 "File type not supported": string;
                 Flag: string;
                 "Flag Message": string;
@@ -156,7 +157,6 @@ export declare class Streami18n {
                 "Loading channels...": string;
                 "Loading messages...": string;
                 "Loading...": string;
-                "Maximum file size upload limit reached. Please upload a file below {{MAX_FILE_SIZE_TO_UPLOAD_IN_MB}} MB.": string;
                 "Message Reactions": string;
                 "Message deleted": string;
                 "Message flagged": string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "5.30.0",
+  "version": "5.31.0-beta.1",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/Chat/hooks/useAppSettings.ts

@@ -1,9 +1,11 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import type { AppSettingsAPIResponse, StreamChat } from 'stream-chat';
 
+import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
 import * as dbApi from '../../../store/apis';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
+
 export const useAppSettings = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
@@ -13,7 +15,7 @@ export const useAppSettings = <
   initialisedDatabase: boolean,
 ): AppSettingsAPIResponse | null => {
   const [appSettings, setAppSettings] = useState<AppSettingsAPIResponse | null>(null);
-  const isMounted = useRef(true);
+  const isMounted = useIsMountedRef();
 
   useEffect(() => {
     async function enforeAppSettings() {
@@ -45,10 +47,6 @@ export const useAppSettings = <
     }
 
     enforeAppSettings();
-
-    return () => {
-      isMounted.current = false;
-    };
   }, [client, isOnline, initialisedDatabase]);
 
   return appSettings;

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -51,16 +51,15 @@ const styles = StyleSheet.create({
   filenameText: {
     fontSize: 14,
     fontWeight: 'bold',
-    paddingHorizontal: 10,
   },
   fileSizeText: {
     fontSize: 12,
     marginTop: 10,
-    paddingHorizontal: 10,
   },
   fileTextContainer: {
     justifyContent: 'space-around',
     marginVertical: 10,
+    paddingHorizontal: 10,
   },
   flatList: { marginBottom: 12, maxHeight: FILE_PREVIEW_HEIGHT * 2.5 + 16 },
   overlay: {
@@ -70,7 +69,7 @@ const styles = StyleSheet.create({
   },
   unsupportedFile: {
     flexDirection: 'row',
-    paddingLeft: 10,
+    paddingTop: 10,
   },
   unsupportedFileText: {
     fontSize: 12,

package/src/components/MessageInput/MessageInput.tsx

@@ -1,11 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import {
-  Alert,
-  NativeSyntheticEvent,
-  StyleSheet,
-  TextInputFocusEventData,
-  View,
-} from 'react-native';
+import { NativeSyntheticEvent, StyleSheet, TextInputFocusEventData, View } from 'react-native';
 
 import {
   GestureEvent,
@@ -231,7 +225,6 @@ const MessageInputWithContext = <
   } = props;
 
   const [height, setHeight] = useState(0);
-  const { t } = useTranslationContext();
 
   const {
     theme: {
@@ -323,9 +316,6 @@ const MessageInputWithContext = <
     }
   }, [imagesForInput]);
 
-  const MEGA_BYTES_TO_BYTES = 1024 * 1024;
-  const MAX_FILE_SIZE_TO_UPLOAD_IN_MB = 100;
-
   const uploadImagesHandler = () => {
     const imageToUpload = selectedImages.find((selectedImage) => {
       const uploadedImage = imageUploads.find(
@@ -334,23 +324,8 @@ const MessageInputWithContext = <
       );
       return !uploadedImage;
     });
-    // Check if the file size of the image exceeds the threshold of 100MB
-    if (
-      imageToUpload &&
-      Number(imageToUpload.size) / MEGA_BYTES_TO_BYTES > MAX_FILE_SIZE_TO_UPLOAD_IN_MB
-    ) {
-      Alert.alert(
-        t(
-          `Maximum file size upload limit reached. Please upload a file below {{MAX_FILE_SIZE_TO_UPLOAD_IN_MB}} MB.`,
-          { MAX_FILE_SIZE_TO_UPLOAD_IN_MB },
-        ),
-      );
-      setSelectedImages(
-        selectedImages.filter((selectedImage) => selectedImage.uri !== imageToUpload.uri),
-      );
-    } else {
-      if (imageToUpload) uploadNewImage(imageToUpload);
-    }
+
+    if (imageToUpload) uploadNewImage(imageToUpload);
   };
 
   const removeImagesHandler = () => {
@@ -386,23 +361,7 @@ const MessageInputWithContext = <
         );
         return !uploadedFile;
       });
-      // Check if the file size exceeds the threshold of 100MB
-      if (
-        fileToUpload &&
-        Number(fileToUpload.size) / MEGA_BYTES_TO_BYTES > MAX_FILE_SIZE_TO_UPLOAD_IN_MB
-      ) {
-        Alert.alert(
-          t(
-            `Maximum file size upload limit reached. Please upload a file below {{MAX_FILE_SIZE_TO_UPLOAD_IN_MB}} MB.`,
-            { MAX_FILE_SIZE_TO_UPLOAD_IN_MB },
-          ),
-        );
-        setSelectedFiles(
-          selectedFiles.filter((selectedFile) => selectedFile.uri !== fileToUpload.uri),
-        );
-      } else {
-        if (fileToUpload) uploadNewFile(fileToUpload);
-      }
+      if (fileToUpload) uploadNewFile(fileToUpload);
     } else {
       /** User de-selected a video in bottom sheet attachment picker */
       const filesToRemove = fileUploads.filter(

package/src/components/MessageList/MessageList.tsx

@@ -612,14 +612,17 @@ const MessageListWithContext = <
       const isLatestMessageSetShown = !!channel.state.messageSets.find(
         (set) => set.isCurrent && set.isLatest,
       );
-      const msg = processedMessageList?.[messageArrayIndex];
+
       if (!isLatestMessageSetShown) {
+        const msg = processedMessageList?.[messageArrayIndex];
         if (
           channel.state.latestMessages.length !== 0 &&
           unreadCount > channel.state.latestMessages.length
         ) {
           return messageArrayIndex <= unreadCount - channel.state.latestMessages.length - 1;
-        } else if (lastRead && msg.created_at) {
+        }
+        // The `msg` can be undefined here, since `messageArrayIndex` can be out of bounds hence we add a check for `msg`.
+        else if (lastRead && msg?.created_at) {
           return lastRead < msg.created_at;
         }
         return false;

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -21,6 +21,8 @@ import {
 import { useCreateMessageInputContext } from './hooks/useCreateMessageInputContext';
 import { useMessageDetailsForState } from './hooks/useMessageDetailsForState';
 
+import { isUploadAllowed, MAX_FILE_SIZE_TO_UPLOAD, prettifyFileSize } from './utils/utils';
+
 import { AudioAttachmentProps } from '../../components/Attachment/AudioAttachment';
 import { parseLinksFromText } from '../../components/Message/MessageSimple/utils/parseLinks';
 import type { AttachButtonProps } from '../../components/MessageInput/AttachButton';
@@ -483,34 +485,36 @@ export const MessageInputProvider = <
 }: PropsWithChildren<{
   value: InputMessageInputContextValue<StreamChatGenerics>;
 }>) => {
-  const { closePicker, openPicker, selectedPicker, setSelectedPicker } =
-    useAttachmentPickerContext();
+  const {
+    closePicker,
+    openPicker,
+    selectedFiles,
+    selectedImages,
+    selectedPicker,
+    setSelectedFiles,
+    setSelectedImages,
+    setSelectedPicker,
+  } = useAttachmentPickerContext();
   const { appSettings, client, enableOfflineSupport } = useChatContext<StreamChatGenerics>();
   const { removeMessage } = useMessagesContext();
 
   const getFileUploadConfig = () => {
     const fileConfig = appSettings?.app?.file_upload_config;
-    if (fileConfig !== null || fileConfig !== undefined) {
+    if (fileConfig !== undefined) {
       return fileConfig;
     } else {
       return {};
     }
   };
 
-  const blockedFileExtensionTypes = getFileUploadConfig()?.blocked_file_extensions;
-  const blockedFileMimeTypes = getFileUploadConfig()?.blocked_mime_types;
-
   const getImageUploadConfig = () => {
     const imageConfig = appSettings?.app?.image_upload_config;
-    if (imageConfig !== null || imageConfig !== undefined) {
+    if (imageConfig !== undefined) {
       return imageConfig;
     }
     return {};
   };
 
-  const blockedImageExtensionTypes = getImageUploadConfig()?.blocked_file_extensions;
-  const blockedImageMimeTypes = getImageUploadConfig()?.blocked_mime_types;
-
   const channelCapabities = useOwnCapabilitiesContext();
 
   const { channel, giphyEnabled, uploadAbortControllerRef } =
@@ -663,30 +667,17 @@ export const MessageInputProvider = <
       maxNumberOfFiles: value.maxNumberOfFiles - numberOfUploads,
     });
 
-    const MEGA_BYTES_TO_BYTES = 1024 * 1024;
-    const MAX_FILE_SIZE_TO_UPLOAD_IN_MB = 100;
-
     if (!result.cancelled && result.assets) {
-      const totalFileSize = result.assets.reduce((acc, asset) => acc + Number(asset.size), 0);
-      if (totalFileSize / MEGA_BYTES_TO_BYTES > MAX_FILE_SIZE_TO_UPLOAD_IN_MB) {
-        Alert.alert(
-          t(
-            `Maximum file size upload limit reached. Please upload a file below {{MAX_FILE_SIZE_TO_UPLOAD_IN_MB}} MB.`,
-            { MAX_FILE_SIZE_TO_UPLOAD_IN_MB },
-          ),
-        );
-      } else {
-        result.assets.forEach((asset) => {
-          /**
-           * TODO: The current tight coupling of images to the image
-           * picker does not allow images picked from the file picker
-           * to be rendered in a preview via the uploadNewImage call.
-           * This should be updated alongside allowing image a file
-           * uploads together.
-           */
-          uploadNewFile(asset);
-        });
-      }
+      result.assets.forEach((asset) => {
+        /**
+         * TODO: The current tight coupling of images to the image
+         * picker does not allow images picked from the file picker
+         * to be rendered in a preview via the uploadNewImage call.
+         * This should be updated alongside allowing image a file
+         * uploads together.
+         */
+        uploadNewFile(asset);
+      });
     }
   };
 
@@ -1191,18 +1182,25 @@ export const MessageInputProvider = <
 
   const uploadNewFile = async (file: File) => {
     const id: string = generateRandomId();
+    const fileConfig = getFileUploadConfig();
+    const { size_limit } = fileConfig;
 
-    const isBlockedFileExtension: boolean | undefined = blockedFileExtensionTypes?.some(
-      (fileExtensionType: string) => file.name?.includes(fileExtensionType),
-    );
-    const isBlockedFileMimeType: boolean | undefined = blockedFileMimeTypes?.some(
-      (mimeType: string) => file.name?.includes(mimeType),
-    );
+    const isAllowed = isUploadAllowed({ config: fileConfig, file });
+
+    const sizeLimit = size_limit || MAX_FILE_SIZE_TO_UPLOAD;
+
+    if (file.size && file.size > sizeLimit) {
+      Alert.alert(
+        t('File is too large: {{ size }}, maximum upload size is {{ limit }}', {
+          limit: prettifyFileSize(sizeLimit),
+          size: prettifyFileSize(file.size),
+        }),
+      );
+      setSelectedFiles(selectedFiles.filter((selectedFile) => selectedFile.uri !== file.uri));
+      return;
+    }
 
-    const fileState =
-      isBlockedFileExtension || isBlockedFileMimeType
-        ? FileState.NOT_SUPPORTED
-        : FileState.UPLOADING;
+    const fileState = isAllowed ? FileState.UPLOADING : FileState.NOT_SUPPORTED;
 
     // If file type is explicitly provided while upload we use it, else we derive the file type.
     const fileType = file.type || file.mimeType?.split('/')[0];
@@ -1220,26 +1218,33 @@ export const MessageInputProvider = <
       setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads + 1),
     ]);
 
-    if (!isBlockedFileExtension) {
+    if (isAllowed) {
       uploadFile({ newFile });
     }
   };
 
   const uploadNewImage = async (image: Partial<Asset>) => {
     const id = generateRandomId();
+    const imageUploadConfig = getImageUploadConfig();
 
-    const isBlockedImageMimeType = blockedImageMimeTypes?.some((mimeType: string) =>
-      image.uri?.includes(mimeType),
-    );
+    const { size_limit } = imageUploadConfig;
 
-    const isBlockedImageExtension = blockedImageExtensionTypes?.some((imageExtensionType: string) =>
-      image.uri?.includes(imageExtensionType),
-    );
+    const isAllowed = isUploadAllowed({ config: imageUploadConfig, file: image });
+
+    const sizeLimit = size_limit || MAX_FILE_SIZE_TO_UPLOAD;
+
+    if (image.size && image?.size > sizeLimit) {
+      Alert.alert(
+        t('File is too large: {{ size }}, maximum upload size is {{ limit }}', {
+          limit: prettifyFileSize(sizeLimit),
+          size: prettifyFileSize(image.size),
+        }),
+      );
+      setSelectedImages(selectedImages.filter((selectedImage) => selectedImage.uri !== image.uri));
+      return;
+    }
 
-    const imageState =
-      isBlockedImageExtension || isBlockedImageMimeType
-        ? FileState.NOT_SUPPORTED
-        : FileState.UPLOADING;
+    const imageState = isAllowed ? FileState.UPLOADING : FileState.NOT_SUPPORTED;
 
     const newImage: ImageUpload = {
       file: image,
@@ -1255,7 +1260,7 @@ export const MessageInputProvider = <
       setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads + 1),
     ]);
 
-    if (!isBlockedImageExtension) {
+    if (isAllowed) {
       uploadImage({ newImage });
     }
   };

package/src/contexts/messageInputContext/__tests__/MessageInputContext.test.tsx

@@ -118,12 +118,21 @@ describe('MessageInputContext', () => {
     act(() => {
       result.current.uploadNewImage(
         generateImageAttachment({
+          name: 'dummy.png',
           uri: 'https://www.bastiaanmulder.nl/wp-content/uploads/2013/11/dummy-image-square.png',
         }),
       );
     });
 
     expect(result.current.imageUploads[0].state).toBe(FileState.NOT_SUPPORTED);
+
+    act(() => {
+      result.current.uploadNewFile({
+        name: 'dummy.mp3',
+        uri: 'https://www.bastiaanmulder.nl/wp-content/uploads/2013/11/dummy.mp3',
+      });
+    });
+    expect(result.current.imageUploads[0].state).toBe(FileState.NOT_SUPPORTED);
   });
 
   it('onSelectItem works', () => {

package/src/contexts/messageInputContext/__tests__/pickFile.test.tsx

@@ -9,8 +9,9 @@ import { generateFileAttachment } from '../../../mock-builders/generator/attachm
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import * as NativeUtils from '../../../native';
-
 import type { DefaultStreamChatGenerics } from '../../../types/types';
+import * as AttachmentPickerContext from '../../attachmentPickerContext/AttachmentPickerContext';
+
 import {
   InputMessageInputContextValue,
   MessageInputContextValue,
@@ -51,13 +52,17 @@ describe("MessageInputContext's pickFile", () => {
       cancelled: false,
     }),
   );
+  jest.spyOn(AttachmentPickerContext, 'useAttachmentPickerContext').mockImplementation(() => ({
+    selectedFiles: [],
+    setSelectedFiles: jest.fn(),
+  }));
 
   const initialProps = {
     editing: message,
     maxNumberOfFiles: 2,
   };
 
-  it.each([[3, 1]])(
+  it.each([[3, 2]])(
     'run pickFile when numberOfUploads is %d and alert is triggered %d number of times',
     async (numberOfUploads, numberOfTimesCalled) => {
       const { rerender, result } = renderHook(() => useMessageInputContext(), {
@@ -103,6 +108,6 @@ describe("MessageInputContext's pickFile", () => {
       result.current.pickFile();
     });
 
-    expect(Alert.alert).toHaveBeenCalledTimes(1);
+    expect(Alert.alert).toHaveBeenCalledTimes(2);
   });
 });

package/src/contexts/messageInputContext/utils/utils.ts

@@ -0,0 +1,86 @@
+import { lookup } from 'mime-types';
+import type { FileUploadConfig } from 'stream-chat';
+
+import { Asset, File } from '../../../types/types';
+
+export const MAX_FILE_SIZE_TO_UPLOAD = 100 * 1024 * 1024; // 100 MB
+
+type CheckUploadPermissionsParams = {
+  config: FileUploadConfig;
+  file: File | Partial<Asset>;
+};
+
+/**
+ * This utility function checks if the file upload is allowed based on the file upload config.
+ * @param Object File upload config and file to check
+ * @returns
+ */
+export const isUploadAllowed = ({ config, file }: CheckUploadPermissionsParams) => {
+  const {
+    allowed_file_extensions,
+    allowed_mime_types,
+    blocked_file_extensions,
+    blocked_mime_types,
+  } = config;
+
+  if (allowed_file_extensions?.length) {
+    const allowed = allowed_file_extensions.some((fileExtension: string) =>
+      file.name?.toLowerCase().endsWith(fileExtension.toLowerCase()),
+    );
+
+    if (!allowed) {
+      return false;
+    }
+  }
+
+  if (blocked_file_extensions?.length) {
+    const blocked = blocked_file_extensions.some((fileExtension: string) =>
+      file.name?.toLowerCase().endsWith(fileExtension.toLowerCase()),
+    );
+
+    if (blocked) {
+      return false;
+    }
+  }
+
+  if (allowed_mime_types?.length) {
+    if (file.name) {
+      const fileMimeType = lookup(file.name) as string;
+      const allowed = allowed_mime_types.some(
+        (mimeType: string) => fileMimeType.toLowerCase() === mimeType.toLowerCase(),
+      );
+
+      if (!allowed) {
+        return false;
+      }
+    }
+  }
+
+  if (blocked_mime_types?.length) {
+    if (file.name) {
+      const fileMimeType = lookup(file.name) as string;
+      const blocked = blocked_mime_types.some(
+        (mimeType: string) => fileMimeType.toLowerCase() === mimeType.toLowerCase(),
+      );
+
+      if (blocked) {
+        return false;
+      }
+    }
+  }
+
+  return true;
+};
+
+/**
+ * This utility function prettifies the file size.
+ * @param bytes The bytes of the file
+ * @param precision The precision to which the file size should be rounded
+ * @returns
+ */
+export function prettifyFileSize(bytes: number, precision = 3) {
+  const units = ['B', 'kB', 'MB', 'GB'];
+  const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+  const mantissa = bytes / 1024 ** exponent;
+  return `${mantissa.toPrecision(precision)} ${units[exponent]}`;
+}

package/src/i18n/en.json

@@ -24,10 +24,11 @@
   "Error loading channel list...": "Error loading channel list...",
   "Error loading messages for this channel...": "Error loading messages for this channel...",
   "Error while loading, please reload/refresh": "Error while loading, please reload/refresh",
+  "File is too large: {{ size }}, maximum upload size is {{ limit }}": "File is too large: {{ size }}, maximum upload size is {{ limit }}",
   "File type not supported": "File type not supported",
   "Flag": "Flag",
   "Flag Message": "Flag Message",
-  "Flag action failed either due to a network issue or the message is already flagged": "Flag action failed either due to a network issue or the message is already flagged.",
+  "Flag action failed either due to a network issue or the message is already flagged": "Flag action failed either due to a network issue or the message is already flagged",
   "Hold to start recording.": "Hold to start recording.",
   "How about sending your first message to a friend?": "How about sending your first message to a friend?",
   "Instant Commands": "Instant Commands",
@@ -36,7 +37,6 @@
   "Loading channels...": "Loading channels...",
   "Loading messages...": "Loading messages...",
   "Loading...": "Loading...",
-  "Maximum file size upload limit reached. Please upload a file below {{MAX_FILE_SIZE_TO_UPLOAD_IN_MB}} MB.": "Maximum file size upload limit reached. Please upload a file below {{MAX_FILE_SIZE_TO_UPLOAD_IN_MB}} MB.",
   "Message Reactions": "Message Reactions",
   "Message deleted": "Message deleted",
   "Message flagged": "Message flagged",