feat: move attachment picker context to Channel wrapper and handle only bottom sheet stuff in it

Author: khushal87

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -11,10 +11,8 @@ import type { AttachmentPickerErrorProps } from './components/AttachmentPickerEr
 
 import { renderAttachmentPickerItem } from './components/AttachmentPickerItem';
 
-import {
-  AttachmentPickerContextValue,
-  useAttachmentPickerContext,
-} from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
+import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
+import { MessageInputContextValue } from '../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useScreenDimensions } from '../../hooks/useScreenDimensions';
 import { NativeHandlers } from '../../native';
@@ -31,7 +29,7 @@ const styles = StyleSheet.create({
 });
 
 export type AttachmentPickerProps = Pick<
-  AttachmentPickerContextValue,
+  MessageInputContextValue,
   | 'AttachmentPickerBottomSheetHandle'
   | 'attachmentPickerBottomSheetHandleHeight'
   | 'attachmentSelectionBarHeight'
@@ -87,17 +85,8 @@ export const AttachmentPicker = React.forwardRef(
         colors: { white },
       },
     } = useTheme();
-    const {
-      closePicker,
-      maxNumberOfFiles,
-      selectedFiles,
-      selectedImages,
-      selectedPicker,
-      setSelectedFiles,
-      setSelectedImages,
-      setSelectedPicker,
-      topInset,
-    } = useAttachmentPickerContext();
+    const { closePicker, selectedPicker, setSelectedPicker, topInset } =
+      useAttachmentPickerContext();
     const { vh: screenVh } = useScreenDimensions();
 
     const fullScreenHeight = screenVh(100);
@@ -182,8 +171,7 @@ export const AttachmentPicker = React.forwardRef(
       const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);
 
       return () => backHandler.remove();
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selectedPicker, closePicker]);
+    }, [selectedPicker, closePicker, setSelectedPicker]);
 
     useEffect(() => {
       const onKeyboardOpenHandler = () => {
@@ -207,8 +195,7 @@ export const AttachmentPicker = React.forwardRef(
           Keyboard.removeListener(keyboardShowEvent, onKeyboardOpenHandler);
         }
       };
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [closePicker, selectedPicker]);
+    }, [closePicker, selectedPicker, setSelectedPicker]);
 
     useEffect(() => {
       if (currentIndex < 0) {
@@ -240,17 +227,7 @@ export const AttachmentPicker = React.forwardRef(
     const selectedPhotos = photos.map((asset) => ({
       asset,
       ImageOverlaySelectedComponent,
-      maxNumberOfFiles,
       numberOfAttachmentPickerImageColumns,
-      numberOfUploads: selectedFiles.length + selectedImages.length,
-      // `id` is available for Expo MediaLibrary while Cameraroll doesn't share id therefore we use `uri`
-      selected:
-        selectedImages.some((image) => (image?.uri ? image.uri === asset.uri : false)) ||
-        selectedFiles.some((file) => (file?.uri ? file.uri === asset.uri : false)),
-      selectedFiles,
-      selectedImages,
-      setSelectedFiles,
-      setSelectedImages,
     }));
 
     const handleHeight = attachmentPickerBottomSheetHandleHeight;

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

@@ -2,41 +2,38 @@ import React from 'react';
 
 import { Alert, ImageBackground, StyleSheet, Text, View } from 'react-native';
 
-import { AttachmentPickerContextValue } from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
+import { FileReference, isLocalImageAttachment, isLocalVideoAttachment } from 'stream-chat';
+
+import { useAttachmentManagerState } from '../../../contexts/messageInputContext/hooks/useAttachmentManagerState';
+import { useMessageComposer } from '../../../contexts/messageInputContext/hooks/useMessageComposer';
+import { useMessageInputContext } from '../../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useViewport } from '../../../hooks/useViewport';
 import { Recorder } from '../../../icons';
 import type { File } from '../../../types/types';
 import { getDurationLabelFromDuration } from '../../../utils/utils';
 import { BottomSheetTouchableOpacity } from '../../BottomSheetCompatibility/BottomSheetTouchableOpacity';
-type AttachmentPickerItemType = Pick<
-  AttachmentPickerContextValue,
-  'selectedFiles' | 'setSelectedFiles' | 'setSelectedImages' | 'selectedImages' | 'maxNumberOfFiles'
-> & {
+
+type AttachmentPickerItemType = {
   asset: File;
   ImageOverlaySelectedComponent: React.ComponentType;
-  numberOfUploads: number;
-  selected: boolean;
   numberOfAttachmentPickerImageColumns?: number;
 };
-type AttachmentImageProps = Omit<AttachmentPickerItemType, 'setSelectedFiles' | 'selectedFiles'>;
 
-type AttachmentVideoProps = Omit<AttachmentPickerItemType, 'setSelectedImages' | 'selectedImages'>;
-
-const AttachmentVideo = (props: AttachmentVideoProps) => {
-  const {
-    asset,
-    ImageOverlaySelectedComponent,
-    maxNumberOfFiles,
-    numberOfAttachmentPickerImageColumns,
-    numberOfUploads,
-    selected,
-    selectedFiles,
-    setSelectedFiles,
-  } = props;
+const AttachmentVideo = (props: AttachmentPickerItemType) => {
+  const { asset, ImageOverlaySelectedComponent, numberOfAttachmentPickerImageColumns } = props;
   const { vw } = useViewport();
   const { t } = useTranslationContext();
+  const messageComposer = useMessageComposer();
+  const { uploadNewFile } = useMessageInputContext();
+  const { attachmentManager } = messageComposer;
+  const { attachments, availableUploadSlots } = useAttachmentManagerState();
+  const videoUploads = attachments.filter((attachment) => isLocalVideoAttachment(attachment));
+
+  const selected = videoUploads.some(
+    (attachment) => (attachment.localMetadata.file as FileReference).uri === asset.uri,
+  );
 
   const {
     theme: {
@@ -51,22 +48,20 @@ const AttachmentVideo = (props: AttachmentVideoProps) => {
 
   const size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
 
-  const updateSelectedFiles = () => {
-    if (numberOfUploads >= maxNumberOfFiles) {
-      Alert.alert(t('Maximum number of files reached'));
-      return;
-    }
-    setSelectedFiles([...selectedFiles, asset]);
-  };
-
-  const onPressVideo = () => {
+  const onPressVideo = async () => {
     if (selected) {
-      setSelectedFiles((files) =>
-        // `id` is available for Expo MediaLibrary while Cameraroll doesn't share id therefore we use `uri`
-        files.filter((file) => file.uri !== uri),
+      const attachment = videoUploads.find(
+        (attachment) => (attachment.localMetadata.file as FileReference).uri === uri,
       );
+      if (attachment) {
+        attachmentManager.removeAttachments([attachment.localMetadata.id]);
+      }
     } else {
-      updateSelectedFiles();
+      if (!availableUploadSlots) {
+        Alert.alert(t('Maximum number of files reached'));
+        return;
+      }
+      await uploadNewFile(asset);
     }
   };
 
@@ -101,44 +96,43 @@ const AttachmentVideo = (props: AttachmentVideoProps) => {
   );
 };
 
-const AttachmentImage = (props: AttachmentImageProps) => {
-  const {
-    asset,
-    ImageOverlaySelectedComponent,
-    maxNumberOfFiles,
-    numberOfAttachmentPickerImageColumns,
-    numberOfUploads,
-    selected,
-    selectedImages,
-    setSelectedImages,
-  } = props;
+const AttachmentImage = (props: AttachmentPickerItemType) => {
+  const { asset, ImageOverlaySelectedComponent, numberOfAttachmentPickerImageColumns } = props;
   const {
     theme: {
       attachmentPicker: { image, imageOverlay },
       colors: { overlay },
     },
   } = useTheme();
   const { vw } = useViewport();
-  const { t } = useTranslationContext();
+  const { uploadNewImage } = useMessageInputContext();
+  const messageComposer = useMessageComposer();
+  const { attachmentManager } = messageComposer;
+  const { attachments, availableUploadSlots } = useAttachmentManagerState();
+  const imageUploads = attachments.filter((attachment) => isLocalImageAttachment(attachment));
+
+  const selected = imageUploads.some(
+    (attachment) => attachment.localMetadata.previewUri === asset.uri,
+  );
 
   const size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
 
   const { uri } = asset;
 
-  const updateSelectedImages = () => {
-    if (numberOfUploads >= maxNumberOfFiles) {
-      Alert.alert(t('Maximum number of files reached'));
-      return;
-    }
-    setSelectedImages([...selectedImages, asset]);
-  };
-
-  const onPressImage = () => {
+  const onPressImage = async () => {
     if (selected) {
-      // `id` is available for Expo MediaLibrary while Cameraroll doesn't share id therefore we use `uri`
-      setSelectedImages((images) => images.filter((image) => image.uri !== uri));
+      const attachment = imageUploads.find(
+        (attachment) => attachment.localMetadata.previewUri === uri,
+      );
+      if (attachment) {
+        await attachmentManager.removeAttachments([attachment.localMetadata.id]);
+      }
     } else {
-      updateSelectedImages();
+      if (!availableUploadSlots) {
+        Alert.alert('Maximum number of files reached');
+        return;
+      }
+      await uploadNewImage(asset);
     }
   };
 
@@ -166,18 +160,7 @@ const AttachmentImage = (props: AttachmentImageProps) => {
 };
 
 export const renderAttachmentPickerItem = ({ item }: { item: AttachmentPickerItemType }) => {
-  const {
-    asset,
-    ImageOverlaySelectedComponent,
-    maxNumberOfFiles,
-    numberOfAttachmentPickerImageColumns,
-    numberOfUploads,
-    selected,
-    selectedFiles,
-    selectedImages,
-    setSelectedFiles,
-    setSelectedImages,
-  } = item;
+  const { asset, ImageOverlaySelectedComponent, numberOfAttachmentPickerImageColumns } = item;
 
   /**
    * Expo Media Library - Result of asset type
@@ -192,12 +175,7 @@ export const renderAttachmentPickerItem = ({ item }: { item: AttachmentPickerIte
       <AttachmentVideo
         asset={asset}
         ImageOverlaySelectedComponent={ImageOverlaySelectedComponent}
-        maxNumberOfFiles={maxNumberOfFiles}
         numberOfAttachmentPickerImageColumns={numberOfAttachmentPickerImageColumns}
-        numberOfUploads={numberOfUploads}
-        selected={selected}
-        selectedFiles={selectedFiles}
-        setSelectedFiles={setSelectedFiles}
       />
     );
   }
@@ -206,12 +184,7 @@ export const renderAttachmentPickerItem = ({ item }: { item: AttachmentPickerIte
     <AttachmentImage
       asset={asset}
       ImageOverlaySelectedComponent={ImageOverlaySelectedComponent}
-      maxNumberOfFiles={maxNumberOfFiles}
       numberOfAttachmentPickerImageColumns={numberOfAttachmentPickerImageColumns}
-      numberOfUploads={numberOfUploads}
-      selected={selected}
-      selectedImages={selectedImages}
-      setSelectedImages={setSelectedImages}
     />
   );
 };

package/src/components/AttachmentPicker/components/AttachmentPickerSelectionBar.tsx

@@ -20,26 +20,22 @@ const styles = StyleSheet.create({
 });
 
 export const AttachmentPickerSelectionBar = () => {
+  const { closePicker, selectedPicker, setSelectedPicker } = useAttachmentPickerContext();
+
   const {
     attachmentSelectionBarHeight,
     CameraSelectorIcon,
-    closePicker,
     CreatePollIcon,
     FileSelectorIcon,
-    ImageSelectorIcon,
-    selectedPicker,
-    setSelectedPicker,
-    VideoRecorderSelectorIcon,
-  } = useAttachmentPickerContext();
-
-  const {
     hasCameraPicker,
     hasFilePicker,
     hasImagePicker,
+    ImageSelectorIcon,
     openPollCreationDialog,
     pickFile,
     sendMessage,
     takeAndUploadImage,
+    VideoRecorderSelectorIcon,
   } = useMessageInputContext();
   const { threadList } = useChannelContext();
   const { hasCreatePoll } = useMessagesContext();
@@ -72,6 +68,18 @@ export const AttachmentPickerSelectionBar = () => {
     openPollCreationDialog?.({ sendMessage });
   };
 
+  const onCameraPickerPress = () => {
+    setSelectedPicker(undefined);
+    closePicker();
+    takeAndUploadImage(Platform.OS === 'android' ? 'image' : 'mixed');
+  };
+
+  const onVideoRecorderPickerPress = () => {
+    setSelectedPicker(undefined);
+    closePicker();
+    takeAndUploadImage('video');
+  };
+
   return (
     <View style={[styles.container, container, { height: attachmentSelectionBarHeight }]}>
       {hasImagePicker ? (
@@ -99,9 +107,7 @@ export const AttachmentPickerSelectionBar = () => {
       {hasCameraPicker ? (
         <TouchableOpacity
           hitSlop={{ bottom: 15, top: 15 }}
-          onPress={() => {
-            takeAndUploadImage(Platform.OS === 'android' ? 'image' : 'mixed');
-          }}
+          onPress={onCameraPickerPress}
           testID='take-photo-touchable'
         >
           <View style={[styles.icon, icon]}>
@@ -112,9 +118,7 @@ export const AttachmentPickerSelectionBar = () => {
       {hasCameraPicker && Platform.OS === 'android' ? (
         <TouchableOpacity
           hitSlop={{ bottom: 15, top: 15 }}
-          onPress={() => {
-            takeAndUploadImage('video');
-          }}
+          onPress={onVideoRecorderPickerPress}
           testID='take-photo-touchable'
         >
           <View style={[styles.icon, { marginTop: 4 }, icon]}>