feat: change message var to messages

Author: khushal87

examples/SampleApp/src/screens/ChannelImagesScreen.tsx

@@ -13,18 +13,18 @@ import Dayjs from 'dayjs';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import {
   DateHeader,
-  Photo,
   useImageGalleryContext,
   useOverlayContext,
   useTheme,
+  ImageGalleryState,
+  useStateStore,
 } from 'stream-chat-react-native';
 
 import { ScreenHeader } from '../components/ScreenHeader';
 import { usePaginatedAttachments } from '../hooks/usePaginatedAttachments';
 import { Picture } from '../icons/Picture';
 
 import type { RouteProp } from '@react-navigation/native';
-import type { Attachment } from 'stream-chat';
 
 import type { StackNavigatorParamList } from '../types';
 
@@ -61,16 +61,17 @@ export type ChannelImagesScreenProps = {
   route: ChannelImagesScreenRouteProp;
 };
 
+const selector = (state: ImageGalleryState) => ({
+  assets: state.assets,
+});
+
 export const ChannelImagesScreen: React.FC<ChannelImagesScreenProps> = ({
   route: {
     params: { channel },
   },
 }) => {
-  const {
-    messages: images,
-    setMessages: setImages,
-    setSelectedMessage: setImage,
-  } = useImageGalleryContext();
+  const { imageGalleryStateStore } = useImageGalleryContext();
+  const { assets } = useStateStore(imageGalleryStateStore.state, selector);
   const { setOverlay } = useOverlayContext();
   const { loading, loadMore, messages } = usePaginatedAttachments(channel, 'image');
   const {
@@ -79,8 +80,6 @@ export const ChannelImagesScreen: React.FC<ChannelImagesScreenProps> = ({
     },
   } = useTheme();
 
-  const channelImages = useRef(images);
-
   const [stickyHeaderDate, setStickyHeaderDate] = useState(
     Dayjs(messages?.[0]?.created_at).format('MMM YYYY'),
   );
@@ -106,30 +105,6 @@ export const ChannelImagesScreen: React.FC<ChannelImagesScreenProps> = ({
     }
   });
 
-  /**
-   * Photos array created from all currently available
-   * photo attachments
-   */
-  const photos = messages.reduce((acc: Photo[], cur) => {
-    const attachmentImages =
-      (cur.attachments as Attachment[])?.filter(
-        (attachment) =>
-          attachment.type === 'image' &&
-          !attachment.title_link &&
-          !attachment.og_scrape_url &&
-          (attachment.image_url || attachment.thumb_url),
-      ) || [];
-
-    const attachmentPhotos = attachmentImages.map((attachmentImage) => ({
-      created_at: cur.created_at,
-      id: `photoId-${cur.id}-${attachmentImage.image_url || attachmentImage.thumb_url}`,
-      messageId: cur.id,
-      uri: attachmentImage.image_url || (attachmentImage.thumb_url as string),
-    }));
-
-    return [...acc, ...attachmentPhotos];
-  }, []);
-
   const messagesWithImages = messages
     .map((message) => ({ ...message, groupStyles: [], readBy: false }))
     .filter((message) => {
@@ -145,32 +120,19 @@ export const ChannelImagesScreen: React.FC<ChannelImagesScreenProps> = ({
       return false;
     });
 
-  /**
-   * This is for the useEffect to run again in the case that a message
-   * gets edited with more or the same number of images
-   */
-  const imageString = messagesWithImages
-    .map((message) =>
-      (message.attachments as Attachment[])
-        .map((attachment) => attachment.image_url || attachment.thumb_url || '')
-        .join(),
-    )
-    .join();
-
   useEffect(() => {
-    setImages(messagesWithImages);
-    const channelImagesCurrent = channelImages.current;
-    return () => setImages(channelImagesCurrent);
+    imageGalleryStateStore.openImageGallery({ messages: messagesWithImages });
+    return () => imageGalleryStateStore.clear();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [imageString, setImages]);
+  }, [imageGalleryStateStore, messagesWithImages.length]);
 
   return (
     <SafeAreaView style={[styles.flex, { backgroundColor: white }]}>
       <ScreenHeader inSafeArea titleText='Photos and Videos' />
       <View style={styles.flex}>
         <FlatList
           contentContainerStyle={styles.contentContainer}
-          data={photos}
+          data={assets}
           keyExtractor={(item, index) => `${item.id}-${index}`}
           ListEmptyComponent={EmptyListComponent}
           numColumns={3}
@@ -180,9 +142,9 @@ export const ChannelImagesScreen: React.FC<ChannelImagesScreenProps> = ({
           renderItem={({ item }) => (
             <TouchableOpacity
               onPress={() => {
-                setImage({
-                  messageId: item.messageId,
-                  url: item.uri,
+                imageGalleryStateStore.openImageGallery({
+                  messages: messagesWithImages,
+                  selectedAttachmentUrl: item.uri,
                 });
                 setOverlay('gallery');
               }}
@@ -202,7 +164,7 @@ export const ChannelImagesScreen: React.FC<ChannelImagesScreenProps> = ({
             viewAreaCoveragePercentThreshold: 50,
           }}
         />
-        {photos && photos.length ? (
+        {assets.length > 0 ? (
           <View style={styles.stickyHeader}>
             <DateHeader dateString={stickyHeaderDate} />
           </View>

package/src/components/Attachment/Gallery.tsx

@@ -284,7 +284,10 @@ const GalleryThumbnail = ({
     if (!message) {
       return;
     }
-    imageGalleryStateStore.openImageGallery({ message, selectedAttachmentUrl: thumbnail.url });
+    imageGalleryStateStore.openImageGallery({
+      messages: [message],
+      selectedAttachmentUrl: thumbnail.url,
+    });
     setOverlay('gallery');
   };
 

package/src/components/Attachment/Giphy.tsx

@@ -208,7 +208,7 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
     if (!uri) {
       return;
     }
-    imageGalleryStateStore.openImageGallery({ message, selectedAttachmentUrl: uri });
+    imageGalleryStateStore.openImageGallery({ messages: [message], selectedAttachmentUrl: uri });
     setOverlay('gallery');
   };
 

package/src/components/ImageGallery/ImageGallery.tsx

@@ -13,7 +13,6 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import BottomSheet from '@gorhom/bottom-sheet';
-import type { UserResponse } from 'stream-chat';
 
 import { AnimatedGalleryImage } from './components/AnimatedGalleryImage';
 import { AnimatedGalleryVideo } from './components/AnimatedGalleryVideo';
@@ -102,6 +101,7 @@ export type ImageGalleryCustomComponents = {
 };
 
 const imageGallerySelector = (state: ImageGalleryState) => ({
+  assets: state.assets,
   currentIndex: state.currentIndex,
 });
 
@@ -129,8 +129,11 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
     },
   } = useTheme();
   const { imageGalleryStateStore } = useImageGalleryContext();
-  const { currentIndex } = useStateStore(imageGalleryStateStore.state, imageGallerySelector);
-  const { assets, videoPlayerPool } = imageGalleryStateStore;
+  const { assets, currentIndex } = useStateStore(
+    imageGalleryStateStore.state,
+    imageGallerySelector,
+  );
+  const { videoPlayerPool } = imageGalleryStateStore;
 
   const { vh, vw } = useViewport();
 
@@ -484,19 +487,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export type Photo = {
-  id: string;
-  uri: string;
-  channelId?: string;
-  created_at?: string | Date;
-  messageId?: string;
-  mime_type?: string;
-  original_height?: number;
-  original_width?: number;
-  thumb_url?: string;
-  type?: string;
-  user?: UserResponse | null;
-  user_id?: string;
-};
-
 ImageGallery.displayName = 'ImageGallery{imageGallery}';

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -66,6 +66,7 @@ type ImageGalleryFooterPropsWithContext = ImageGalleryFooterCustomComponentProps
 };
 
 const imageGallerySelector = (state: ImageGalleryState) => ({
+  asset: state.assets[state.currentIndex],
   currentIndex: state.currentIndex,
 });
 
@@ -96,8 +97,7 @@ export const ImageGalleryFooterWithContext = (props: ImageGalleryFooterPropsWith
   } = useTheme();
   const { t } = useTranslationContext();
   const { imageGalleryStateStore } = useImageGalleryContext();
-  const { currentIndex } = useStateStore(imageGalleryStateStore.state, imageGallerySelector);
-  const asset = imageGalleryStateStore.assets[currentIndex];
+  const { asset, currentIndex } = useStateStore(imageGalleryStateStore.state, imageGallerySelector);
 
   const footerStyle = useAnimatedStyle<ViewStyle>(
     () => ({

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -43,7 +43,7 @@ type Props = ImageGalleryHeaderCustomComponentProps & {
 };
 
 const imageGallerySelector = (state: ImageGalleryState) => ({
-  currentIndex: state.currentIndex,
+  asset: state.assets[state.currentIndex],
 });
 
 export const ImageGalleryHeader = (props: Props) => {
@@ -67,9 +67,8 @@ export const ImageGalleryHeader = (props: Props) => {
   } = useTheme();
   const { t, tDateTimeParser } = useTranslationContext();
   const { imageGalleryStateStore } = useImageGalleryContext();
-  const { currentIndex } = useStateStore(imageGalleryStateStore.state, imageGallerySelector);
+  const { asset } = useStateStore(imageGalleryStateStore.state, imageGallerySelector);
   const { setOverlay } = useOverlayContext();
-  const asset = imageGalleryStateStore.assets[currentIndex];
 
   const date = useMemo(
     () =>

package/src/components/ImageGallery/components/ImageGrid.tsx

@@ -4,13 +4,16 @@ import { Image, StyleSheet, View } from 'react-native';
 import { VideoThumbnail } from '../../../components/Attachment/VideoThumbnail';
 import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { useStateStore } from '../../../hooks/useStateStore';
 import { useViewport } from '../../../hooks/useViewport';
+import type {
+  ImageGalleryAsset,
+  ImageGalleryState,
+} from '../../../state-store/image-gallery-state-store';
 import { FileTypes } from '../../../types/types';
 import { BottomSheetFlatList } from '../../BottomSheetCompatibility/BottomSheetFlatList';
 import { BottomSheetTouchableOpacity } from '../../BottomSheetCompatibility/BottomSheetTouchableOpacity';
 
-import type { Photo } from '../ImageGallery';
-
 const styles = StyleSheet.create({
   avatarImage: {
     borderRadius: 22,
@@ -35,7 +38,7 @@ const styles = StyleSheet.create({
 export type ImageGalleryGridImageComponent = ({
   item,
 }: {
-  item: Photo & {
+  item: ImageGalleryAsset & {
     selectAndClose: () => void;
     numberOfImageGalleryGridColumns?: number;
   };
@@ -46,7 +49,7 @@ export type ImageGalleryGridImageComponents = {
   imageComponent?: ImageGalleryGridImageComponent;
 };
 
-export type GridImageItem = Photo &
+export type GridImageItem = ImageGalleryAsset &
   ImageGalleryGridImageComponents & {
     selectAndClose: () => void;
     numberOfImageGalleryGridColumns?: number;
@@ -91,9 +94,14 @@ export type ImageGridType = ImageGalleryGridImageComponents & {
   numberOfImageGalleryGridColumns?: number;
 };
 
+const imageGallerySelector = (state: ImageGalleryState) => ({
+  assets: state.assets,
+});
+
 export const ImageGrid = (props: ImageGridType) => {
   const { avatarComponent, closeGridView, imageComponent, numberOfImageGalleryGridColumns } = props;
   const { imageGalleryStateStore } = useImageGalleryContext();
+  const { assets } = useStateStore(imageGalleryStateStore.state, imageGallerySelector);
 
   const {
     theme: {
@@ -104,7 +112,7 @@ export const ImageGrid = (props: ImageGridType) => {
     },
   } = useTheme();
 
-  const imageGridItems = imageGalleryStateStore.assets.map((photo, index) => ({
+  const imageGridItems = assets.map((photo, index) => ({
     ...photo,
     avatarComponent,
     imageComponent,

package/src/components/ImageGallery/hooks/useImageGalleryGestures.tsx

@@ -33,8 +33,6 @@ const MARGIN = 32;
 
 const imageGallerySelector = (state: ImageGalleryState) => ({
   currentIndex: state.currentIndex,
-  message: state.message,
-  selectedAttachmentUrl: state.selectedAttachmentUrl,
 });
 
 export const useImageGalleryGestures = ({
@@ -158,7 +156,7 @@ export const useImageGalleryGestures = ({
     offsetScale.value = 1;
   };
 
-  const assetsLength = imageGalleryStateStore.attachments.length;
+  const assetsLength = imageGalleryStateStore.assets.length;
 
   const clearImageGallery = () => {
     runOnJS(imageGalleryStateStore.clear)();