Merge branch 'develop' of https://github.com/GetStream/stream-chat-react-native into vishal/optional-video-dep

Author: vishalnarkhede

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
+  Alert,
   BackHandler,
   Dimensions,
   ImageBackground,
@@ -56,30 +57,28 @@ const styles = StyleSheet.create({
 const screenHeight = vh(100);
 const fullScreenHeight = Dimensions.get('window').height;
 
-type AttachmentImageProps = {
+export 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 AttachmentVideoProps = {
-  asset: Asset;
-  ImageOverlaySelectedComponent: React.ComponentType;
-  maxNumberOfFiles: number;
-  selected: boolean;
-  setSelectedFiles: React.Dispatch<React.SetStateAction<File[]>>;
-  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;
@@ -116,7 +115,8 @@ const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
       setSelectedFiles((files) => files.filter((file) => file.uri !== asset.uri));
     } else {
       setSelectedFiles((files) => {
-        if (files.length >= maxNumberOfFiles) {
+        if (numberOfUploads >= maxNumberOfFiles) {
+          Alert.alert('Maximum number of files reached');
           return files;
         }
         return [
@@ -170,6 +170,7 @@ const AttachmentImage: React.FC<AttachmentImageProps> = (props) => {
     ImageOverlaySelectedComponent,
     maxNumberOfFiles,
     numberOfAttachmentPickerImageColumns,
+    numberOfUploads,
     selected,
     setSelectedImages,
   } = props;
@@ -189,7 +190,8 @@ const AttachmentImage: React.FC<AttachmentImageProps> = (props) => {
       setSelectedImages((images) => images.filter((image) => image.uri !== asset.uri));
     } else {
       setSelectedImages((images) => {
-        if (images.length >= maxNumberOfFiles) {
+        if (numberOfUploads >= maxNumberOfFiles) {
+          Alert.alert('Maximum number of files reached');
           return images;
         }
         return [...images, asset];
@@ -220,24 +222,13 @@ const AttachmentImage: React.FC<AttachmentImageProps> = (props) => {
   );
 };
 
-const renderImage = ({
-  item,
-}: {
-  item: {
-    asset: Asset;
-    ImageOverlaySelectedComponent: React.ComponentType;
-    maxNumberOfFiles: number;
-    selected: boolean;
-    setSelectedFiles: React.Dispatch<React.SetStateAction<File[]>>;
-    setSelectedImages: React.Dispatch<React.SetStateAction<Asset[]>>;
-    numberOfAttachmentPickerImageColumns?: number;
-  };
-}) => {
+const renderItem = ({ item }: { item: AttachmentPickerItemType }) => {
   const {
     asset,
     ImageOverlaySelectedComponent,
     maxNumberOfFiles,
     numberOfAttachmentPickerImageColumns,
+    numberOfUploads,
     selected,
     setSelectedFiles,
     setSelectedImages,
@@ -259,6 +250,7 @@ const renderImage = ({
       ImageOverlaySelectedComponent={ImageOverlaySelectedComponent}
       maxNumberOfFiles={maxNumberOfFiles}
       numberOfAttachmentPickerImageColumns={numberOfAttachmentPickerImageColumns}
+      numberOfUploads={numberOfUploads}
       selected={selected}
       setSelectedImages={setSelectedImages}
     />
@@ -268,6 +260,7 @@ const renderImage = ({
       ImageOverlaySelectedComponent={ImageOverlaySelectedComponent}
       maxNumberOfFiles={maxNumberOfFiles}
       numberOfAttachmentPickerImageColumns={numberOfAttachmentPickerImageColumns}
+      numberOfUploads={numberOfUploads}
       selected={selected}
       setSelectedFiles={setSelectedFiles}
     />
@@ -454,6 +447,7 @@ export const AttachmentPicker = React.forwardRef(
       ImageOverlaySelectedComponent,
       maxNumberOfFiles,
       numberOfAttachmentPickerImageColumns,
+      numberOfUploads: selectedFiles.length + selectedImages.length,
       selected:
         selectedImages.some((image) => image.uri === asset.uri) ||
         selectedFiles.some((file) => file.uri === asset.uri),
@@ -536,7 +530,7 @@ export const AttachmentPicker = React.forwardRef(
             keyExtractor={(item) => item.asset.uri}
             numColumns={numberOfAttachmentPickerImageColumns ?? 3}
             onEndReached={getMorePhotos}
-            renderItem={renderImage}
+            renderItem={renderItem}
           />
         </BottomSheet>
         {selectedPicker === 'images' && photoError && (

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -447,7 +447,7 @@ export const MessageInputProvider = <
   }>({});
   const [giphyActive, setGiphyActive] = useState(false);
   const [sendThreadMessageInChannel, setSendThreadMessageInChannel] = useState(false);
-  const { editing, hasFilePicker, hasImagePicker, initialValue, maxNumberOfFiles } = value;
+  const { editing, hasFilePicker, hasImagePicker, initialValue } = value;
   const {
     fileUploads,
     imageUploads,
@@ -536,7 +536,7 @@ export const MessageInputProvider = <
   };
 
   const openAttachmentPicker = () => {
-    if (hasImagePicker && !fileUploads.length) {
+    if (hasImagePicker) {
       Keyboard.dismiss();
       openPicker();
       setSelectedPicker('images');
@@ -548,7 +548,7 @@ export const MessageInputProvider = <
        * https://github.com/gorhom/react-native-bottom-sheet/issues/446
        */
       setTimeout(openPicker, 600);
-    } else if (hasFilePicker && numberOfUploads < maxNumberOfFiles) {
+    } else if (hasFilePicker) {
       pickFile();
     }
   };
@@ -572,6 +572,7 @@ export const MessageInputProvider = <
 
   const pickFile = async () => {
     if (numberOfUploads >= value.maxNumberOfFiles) {
+      Alert.alert('Maximum number of files reached');
       return;
     }