stream-chat-react-native-core 5.36.1-beta.2 → 5.36.1-beta.4

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -1,5 +1,12 @@
-import type { LegacyRef } from 'react';
-import React, { PropsWithChildren, useContext, useEffect, useRef, useState } from 'react';
+import React, {
+  LegacyRef,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { Alert, Keyboard, Linking, TextInput, TextInputProps } from 'react-native';
 
 import uniq from 'lodash/uniq';
@@ -46,7 +53,7 @@ import type { SendButtonProps } from '../../components/MessageInput/SendButton';
 import type { UploadProgressIndicatorProps } from '../../components/MessageInput/UploadProgressIndicator';
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
 import type { Emoji } from '../../emoji-data';
-import { pickDocument, pickImage, takePhoto } from '../../native';
+import { isImageMediaLibraryAvailable, pickDocument, pickImage, takePhoto } from '../../native';
 import {
   Asset,
   DefaultStreamChatGenerics,
@@ -657,7 +664,7 @@ export const MessageInputProvider = <
       );
     }
     if (!photo.cancelled) {
-      setSelectedImages((images) => [...images, photo]);
+      await uploadNewImage(photo);
     }
   };
 
@@ -677,14 +684,11 @@ export const MessageInputProvider = <
       );
     }
     if (result.assets && result.assets.length > 0) {
-      result.assets.forEach((asset) => {
+      result.assets.forEach(async (asset) => {
         if (asset.type.includes('image')) {
-          setSelectedImages((prevImages) => [...prevImages, asset]);
+          await uploadNewImage(asset);
         } else {
-          setSelectedFiles((prevFiles) => [
-            ...prevFiles,
-            { ...asset, mimeType: asset.type, type: FileTypes.Video },
-          ]);
+          await uploadNewFile({ ...asset, mimeType: asset.type, type: FileTypes.Video });
         }
       });
     }
@@ -693,30 +697,30 @@ export const MessageInputProvider = <
   /**
    * Function to open the attachment picker if the MediaLibary is installed.
    */
-  const openAttachmentPicker = () => {
+  const openAttachmentPicker = useCallback(() => {
     Keyboard.dismiss();
     setSelectedPicker('images');
     openPicker();
-  };
+  }, [openPicker, setSelectedPicker]);
 
   /**
    * Function to close the attachment picker if the MediaLibrary is installed.
    */
-  const closeAttachmentPicker = () => {
+  const closeAttachmentPicker = useCallback(() => {
     setSelectedPicker(undefined);
     closePicker();
-  };
+  }, [closePicker, setSelectedPicker]);
 
   /**
    * Function to toggle the attachment picker if the MediaLibrary is installed.
    */
-  const toggleAttachmentPicker = () => {
+  const toggleAttachmentPicker = useCallback(() => {
     if (selectedPicker) {
       closeAttachmentPicker();
     } else {
       openAttachmentPicker();
     }
-  };
+  }, [closeAttachmentPicker, openAttachmentPicker, selectedPicker]);
 
   const onSelectItem = (item: UserResponse<StreamChatGenerics>) => {
     setMentionedUsers((prevMentionedUsers) => [...prevMentionedUsers, item.id]);
@@ -740,7 +744,7 @@ export const MessageInputProvider = <
     });
 
     if (!result.cancelled && result.assets) {
-      result.assets.forEach((asset) => {
+      result.assets.forEach(async (asset) => {
         /**
          * TODO: The current tight coupling of images to the image
          * picker does not allow images picked from the file picker
@@ -748,26 +752,40 @@ export const MessageInputProvider = <
          * This should be updated alongside allowing image a file
          * uploads together.
          */
-        uploadNewFile(asset);
+        await uploadNewFile(asset);
       });
     }
   };
 
-  const removeFile = (id: string) => {
-    if (fileUploads.some((file) => file.id === id)) {
-      setFileUploads((prevFileUploads) => prevFileUploads.filter((file) => file.id !== id));
-      setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads - 1);
-    }
-  };
+  const removeFile = useCallback(
+    (id: string) => {
+      if (fileUploads.some((file) => file.id === id)) {
+        setFileUploads((prevFileUploads) => prevFileUploads.filter((file) => file.id !== id));
+        setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads - 1);
+      }
+    },
+    [fileUploads, setFileUploads, setNumberOfUploads],
+  );
 
-  const removeImage = (id: string) => {
-    if (imageUploads.some((image) => image.id === id)) {
-      setImageUploads((prevImageUploads) => prevImageUploads.filter((image) => image.id !== id));
-      setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads - 1);
-    }
-  };
+  const removeImage = useCallback(
+    (id: string) => {
+      if (imageUploads.some((image) => image.id === id)) {
+        setImageUploads((prevImageUploads) => prevImageUploads.filter((image) => image.id !== id));
+        setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads - 1);
+      }
+    },
+    [imageUploads, setImageUploads, setNumberOfUploads],
+  );
 
   const resetInput = (pendingAttachments: Attachment<StreamChatGenerics>[] = []) => {
+    /**
+     * If the MediaLibrary is available, reset the selected files and images
+     */
+    if (isImageMediaLibraryAvailable()) {
+      setSelectedFiles([]);
+      setSelectedImages([]);
+    }
+
     setFileUploads([]);
     setGiphyActive(false);
     setShowMoreOptions(true);
@@ -1253,87 +1271,98 @@ export const MessageInputProvider = <
   };
 
   const uploadNewFile = async (file: File) => {
-    const id: string = generateRandomId();
-    const fileConfig = getFileUploadConfig();
-    const { size_limit } = fileConfig;
+    try {
+      const id: string = generateRandomId();
+      const fileConfig = getFileUploadConfig();
+      const { size_limit } = fileConfig;
 
-    const isAllowed = isUploadAllowed({ config: fileConfig, file });
+      const isAllowed = isUploadAllowed({ config: fileConfig, file });
 
-    const sizeLimit = size_limit || MAX_FILE_SIZE_TO_UPLOAD;
+      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;
-    }
+      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 = isAllowed ? FileState.UPLOADING : FileState.NOT_SUPPORTED;
+      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];
+      // 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];
 
-    const newFile: FileUpload = {
-      duration: file.duration || 0,
-      file,
-      id: file.id || id,
-      state: fileState,
-      type: fileType,
-    };
+      const newFile: FileUpload = {
+        duration: file.duration || 0,
+        file,
+        id: file.id || id,
+        state: fileState,
+        type: fileType,
+        url: file.uri,
+      };
 
-    await Promise.all([
-      setFileUploads((prevFileUploads) => prevFileUploads.concat([newFile])),
-      setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads + 1),
-    ]);
+      await Promise.all([
+        setFileUploads((prevFileUploads) => prevFileUploads.concat([newFile])),
+        setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads + 1),
+      ]);
 
-    if (isAllowed) {
-      uploadFile({ newFile });
+      if (isAllowed) {
+        await uploadFile({ newFile });
+      }
+    } catch (error) {
+      console.log('Error uploading file', error);
     }
   };
 
   const uploadNewImage = async (image: Partial<Asset>) => {
-    const id = generateRandomId();
-    const imageUploadConfig = getImageUploadConfig();
+    try {
+      const id = generateRandomId();
+      const imageUploadConfig = getImageUploadConfig();
 
-    const { size_limit } = imageUploadConfig;
+      const { size_limit } = imageUploadConfig;
 
-    const isAllowed = isUploadAllowed({ config: imageUploadConfig, file: image });
+      const isAllowed = isUploadAllowed({ config: imageUploadConfig, file: image });
 
-    const sizeLimit = size_limit || MAX_FILE_SIZE_TO_UPLOAD;
+      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;
-    }
+      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 = isAllowed ? FileState.UPLOADING : FileState.NOT_SUPPORTED;
+      const imageState = isAllowed ? FileState.UPLOADING : FileState.NOT_SUPPORTED;
 
-    const newImage: ImageUpload = {
-      file: image,
-      height: image.height,
-      id,
-      state: imageState,
-      url: image.uri,
-      width: image.width,
-    };
+      const newImage: ImageUpload = {
+        file: image,
+        height: image.height,
+        id,
+        state: imageState,
+        url: image.uri,
+        width: image.width,
+      };
 
-    await Promise.all([
-      setImageUploads((prevImageUploads) => prevImageUploads.concat([newImage])),
-      setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads + 1),
-    ]);
+      await Promise.all([
+        setImageUploads((prevImageUploads) => prevImageUploads.concat([newImage])),
+        setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads + 1),
+      ]);
 
-    if (isAllowed) {
-      uploadImage({ newImage });
+      if (isAllowed) {
+        await uploadImage({ newImage });
+      }
+    } catch (error) {
+      console.log('Error uploading image', error);
     }
   };
 

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

@@ -12,6 +12,7 @@ import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import { FileState } from '../../../utils/utils';
+import * as AttachmentPickerContext from '../../attachmentPickerContext/AttachmentPickerContext';
 import {
   InputMessageInputContextValue,
   MessageInputContextValue,
@@ -39,6 +40,10 @@ const Wrapper = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultS
 
 const newMessage = generateMessage({ id: 'new-id' });
 describe("MessageInputContext's sendMessage", () => {
+  jest.spyOn(AttachmentPickerContext, 'useAttachmentPickerContext').mockImplementation(() => ({
+    setSelectedFiles: jest.fn(),
+    setSelectedImages: jest.fn(),
+  }));
   const message: boolean | MessageType<DefaultStreamChatGenerics> = generateMessage({
     created_at: 'Sat Jul 02 2022 23:55:13 GMT+0530 (India Standard Time)',
     id: '7a85f744-cc89-4f82-a1d4-5456432cc8bf',

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

@@ -11,6 +11,7 @@ import { ChatContextValue, ChatProvider } from '../../../contexts/chatContext/Ch
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
+import * as AttachmentPickerContext from '../../attachmentPickerContext/AttachmentPickerContext';
 import {
   InputMessageInputContextValue,
   MessageInputContextValue,
@@ -49,6 +50,10 @@ const Wrapper = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultS
 );
 
 describe("MessageInputContext's updateMessage", () => {
+  jest.spyOn(AttachmentPickerContext, 'useAttachmentPickerContext').mockImplementation(() => ({
+    setSelectedFiles: jest.fn(),
+    setSelectedImages: jest.fn(),
+  }));
   const clearEditingStateMock = jest.fn();
   const generatedMessage: boolean | MessageType<DefaultStreamChatGenerics> = generateMessage({
     created_at: 'Sat Jul 02 2022 23:55:13 GMT+0530 (India Standard Time)',

package/src/contexts/messageInputContext/hooks/useMessageDetailsForState.ts

@@ -8,7 +8,7 @@ import {
   FileUpload,
   ImageUpload,
 } from '../../../types/types';
-import { generateRandomId } from '../../../utils/utils';
+import { generateRandomId, stringifyMessage } from '../../../utils/utils';
 
 import type { MessageInputContextValue } from '../MessageInputContext';
 
@@ -37,8 +37,7 @@ export const useMessageDetailsForState = <
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [text, imageUploads.length, fileUploads.length]);
 
-  const messageValue =
-    message === undefined ? '' : `${message.id}${message.text}${message.updated_at}`;
+  const messageValue = message ? stringifyMessage(message) : '';
 
   useEffect(() => {
     if (message && Array.isArray(message?.mentioned_users)) {
@@ -67,9 +66,11 @@ export const useMessageDetailsForState = <
     } else if (attachment.type === FileTypes.Video) {
       return {
         file: {
+          duration: attachment.duration,
           mimeType: attachment.mime_type,
           name: attachment.title || '',
           size: attachment.file_size,
+          uri: attachment.asset_url,
         },
         id,
         state: 'finished',
@@ -96,6 +97,7 @@ export const useMessageDetailsForState = <
           mimeType: attachment.mime_type,
           name: attachment.title || '',
           size: attachment.file_size,
+          uri: attachment.asset_url,
         },
         id,
         state: 'finished',
@@ -107,6 +109,7 @@ export const useMessageDetailsForState = <
           mimeType: attachment.mime_type,
           name: attachment.title || '',
           size: attachment.file_size,
+          uri: attachment.asset_url,
         },
         id,
         state: 'finished',
@@ -128,9 +131,11 @@ export const useMessageDetailsForState = <
           const id = generateRandomId();
           newImageUploads.push({
             file: {
+              height: attachment.original_height,
               name: attachment.fallback,
               size: attachment.file_size,
               type: attachment.type,
+              width: attachment.original_width,
             },
             id,
             state: 'finished',

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "5.36.1-beta.2"
+  "version": "5.36.1-beta.4"
 }