feat: remove legacy image gallery viewer prop

Author: khushal87

package/src/components/Attachment/Gallery.tsx

@@ -51,11 +51,11 @@ export type GalleryPropsWithContext = Pick<
     | 'onPressIn'
     | 'preventPress'
     | 'threadList'
+    | 'message'
   > &
   Pick<
     MessagesContextValue,
     | 'additionalPressableProps'
-    | 'legacyImageViewerSwipeBehaviour'
     | 'VideoThumbnail'
     | 'ImageLoadingIndicator'
     | 'ImageLoadingFailedIndicator'
@@ -65,19 +65,6 @@ export type GalleryPropsWithContext = Pick<
   Pick<OverlayContextValue, 'setOverlay'> & {
     channelId: string | undefined;
     hasThreadReplies?: boolean;
-    /**
-     * `message` prop has been introduced here as part of `legacyImageViewerSwipeBehaviour` prop.
-     * https://github.com/GetStream/stream-chat-react-native/commit/d5eac6193047916f140efe8e396a671675c9a63f
-     * messageId and messageText may seem redundant now, but to avoid breaking change as part
-     * of minor release, we are keeping those props.
-     *
-     * Also `message` type should ideally be imported from MessageContextValue and not be explicitely mentioned
-     * here, but due to some circular dependencies within the SDK, it causes "excessive deep nesting" issue with
-     * typescript within Channel component. We should take it as a mini-project and resolve all these circular imports.
-     *
-     * TODO: Fix circular dependencies of imports
-     */
-    message?: LocalMessage;
   };
 
 const GalleryWithContext = (props: GalleryPropsWithContext) => {
@@ -90,7 +77,6 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
     ImageLoadingIndicator,
     ImageReloadIndicator,
     images,
-    legacyImageViewerSwipeBehaviour,
     message,
     onLongPress,
     onPress,
@@ -210,7 +196,6 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
                   imagesAndVideos={imagesAndVideos}
                   invertedDirections={invertedDirections || false}
                   key={rowIndex}
-                  legacyImageViewerSwipeBehaviour={legacyImageViewerSwipeBehaviour}
                   message={message}
                   numOfColumns={numOfColumns}
                   numOfRows={numOfRows}
@@ -252,7 +237,6 @@ type GalleryThumbnailProps = {
 } & Pick<
   MessagesContextValue,
   | 'additionalPressableProps'
-  | 'legacyImageViewerSwipeBehaviour'
   | 'VideoThumbnail'
   | 'ImageLoadingIndicator'
   | 'ImageLoadingFailedIndicator'
@@ -271,7 +255,6 @@ const GalleryThumbnail = ({
   ImageReloadIndicator,
   imagesAndVideos,
   invertedDirections,
-  legacyImageViewerSwipeBehaviour,
   message,
   numOfColumns,
   numOfRows,
@@ -304,16 +287,10 @@ const GalleryThumbnail = ({
   const { t } = useTranslationContext();
 
   const openImageViewer = () => {
-    if (!legacyImageViewerSwipeBehaviour && message) {
-      // Added if-else to keep the logic readable, instead of DRY.
-      // if - legacyImageViewerSwipeBehaviour is disabled
-      // else - legacyImageViewerSwipeBehaviour is enabled
+    if (message) {
       setMessages([message]);
       setSelectedMessage({ messageId: message.id, url: thumbnail.url });
       setOverlay('gallery');
-    } else if (legacyImageViewerSwipeBehaviour) {
-      setSelectedMessage({ messageId: message?.id, url: thumbnail.url });
-      setOverlay('gallery');
     }
   };
 
@@ -609,7 +586,6 @@ export const Gallery = (props: GalleryProps) => {
     ImageLoadingFailedIndicator: ContextImageLoadingFailedIndicator,
     ImageLoadingIndicator: ContextImageLoadingIndicator,
     ImageReloadIndicator: ContextImageReloadIndicator,
-    legacyImageViewerSwipeBehaviour,
     myMessageTheme: contextMyMessageTheme,
     VideoThumbnail: ContextVideoThumnbnail,
   } = useMessagesContext();
@@ -653,7 +629,6 @@ export const Gallery = (props: GalleryProps) => {
         ImageLoadingIndicator,
         ImageReloadIndicator,
         images,
-        legacyImageViewerSwipeBehaviour,
         message,
         myMessageTheme,
         onLongPress,

package/src/components/Channel/Channel.tsx

@@ -343,7 +343,6 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
       | 'InlineDateSeparator'
       | 'InlineUnreadIndicator'
       | 'isAttachmentEqual'
-      | 'legacyImageViewerSwipeBehaviour'
       | 'ImageLoadingFailedIndicator'
       | 'ImageLoadingIndicator'
       | 'ImageReloadIndicator'
@@ -661,7 +660,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     keyboardBehavior,
     KeyboardCompatibleView = KeyboardCompatibleViewDefault,
     keyboardVerticalOffset,
-    legacyImageViewerSwipeBehaviour = false,
     LoadingErrorIndicator = LoadingErrorIndicatorDefault,
     LoadingIndicator = LoadingIndicatorDefault,
     loadingMore: loadingMoreProp,
@@ -1942,7 +1940,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     InlineUnreadIndicator,
     isAttachmentEqual,
     isMessageAIGenerated,
-    legacyImageViewerSwipeBehaviour,
     markdownRules,
     Message,
     MessageActionList,

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -52,7 +52,6 @@ export const useCreateMessagesContext = ({
   InlineUnreadIndicator,
   isAttachmentEqual,
   isMessageAIGenerated,
-  legacyImageViewerSwipeBehaviour,
   markdownRules,
   Message,
   MessageActionList,
@@ -170,7 +169,6 @@ export const useCreateMessagesContext = ({
       InlineUnreadIndicator,
       isAttachmentEqual,
       isMessageAIGenerated,
-      legacyImageViewerSwipeBehaviour,
       markdownRules,
       Message,
       MessageActionList,

package/src/components/MessageList/MessageFlashList.tsx

@@ -28,10 +28,6 @@ import {
   useChannelContext,
 } from '../../contexts/channelContext/ChannelContext';
 import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
-import {
-  ImageGalleryContextValue,
-  useImageGalleryContext,
-} from '../../contexts/imageGalleryContext/ImageGalleryContext';
 import {
   MessagesContextValue,
   useMessagesContext,
@@ -48,7 +44,6 @@ import { mergeThemes, ThemeProvider, useTheme } from '../../contexts/themeContex
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 
 import { useStableCallback } from '../../hooks';
-import { FileTypes } from '../../types/types';
 
 let FlashList;
 
@@ -121,7 +116,6 @@ type MessageFlashListPropsWithContext = Pick<
     | 'maximumMessageLimit'
   > &
   Pick<ChatContextValue, 'client'> &
-  Pick<ImageGalleryContextValue, 'setMessages'> &
   Pick<PaginatedMessageListContextValue, 'loadMore' | 'loadMoreRecent'> &
   Pick<
     MessagesContextValue,
@@ -130,7 +124,6 @@ type MessageFlashListPropsWithContext = Pick<
     | 'FlatList'
     | 'InlineDateSeparator'
     | 'InlineUnreadIndicator'
-    | 'legacyImageViewerSwipeBehaviour'
     | 'Message'
     | 'ScrollToBottomButton'
     | 'MessageSystem'
@@ -179,7 +172,6 @@ type MessageFlashListPropsWithContext = Pick<
     HeaderComponent?: React.ComponentType;
     /** Whether or not the FlatList is inverted. Defaults to true */
     inverted?: boolean;
-    isListActive?: boolean;
     /** Turn off grouping of messages by user */
     noGroupByUser?: boolean;
     onListScroll?: ScrollViewProps['onScroll'];
@@ -271,9 +263,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     highlightedMessageId,
     InlineDateSeparator,
     InlineUnreadIndicator,
-    isListActive = false,
     isLiveStreaming = false,
-    legacyImageViewerSwipeBehaviour,
     loadChannelAroundMessage,
     loading,
     LoadingIndicator,
@@ -296,7 +286,6 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     selectedPicker,
     setChannelUnreadState,
     setFlatListRef,
-    setMessages,
     setSelectedPicker,
     setTargetedMessage,
     shouldShowUnreadUnderlay,
@@ -802,59 +791,6 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     ],
   );
 
-  const messagesWithImages =
-    legacyImageViewerSwipeBehaviour &&
-    processedMessageList.filter((message) => {
-      const isMessageTypeDeleted = message.type === 'deleted';
-      if (!isMessageTypeDeleted && message.attachments) {
-        return message.attachments.some(
-          (attachment) =>
-            attachment.type === FileTypes.Image &&
-            !attachment.title_link &&
-            !attachment.og_scrape_url &&
-            (attachment.image_url || attachment.thumb_url),
-        );
-      }
-      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 =
-    legacyImageViewerSwipeBehaviour &&
-    messagesWithImages &&
-    messagesWithImages
-      .map((message) =>
-        message.attachments
-          ?.map((attachment) => attachment.image_url || attachment.thumb_url || '')
-          .join(),
-      )
-      .join();
-
-  const numberOfMessagesWithImages =
-    legacyImageViewerSwipeBehaviour && messagesWithImages && messagesWithImages.length;
-  const threadExists = !!thread;
-
-  useEffect(() => {
-    if (
-      legacyImageViewerSwipeBehaviour &&
-      isListActive &&
-      ((threadList && thread) || (!threadList && !thread))
-    ) {
-      setMessages(messagesWithImages as LocalMessage[]);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    imageString,
-    isListActive,
-    legacyImageViewerSwipeBehaviour,
-    numberOfMessagesWithImages,
-    threadExists,
-    threadList,
-  ]);
-
   /**
    * We are keeping full control on message pagination, and not relying on react-native for it.
    * The reasons being,
@@ -1216,14 +1152,12 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
     threadList,
   } = useChannelContext();
   const { client } = useChatContext();
-  const { setMessages } = useImageGalleryContext();
   const {
     DateHeader,
     disableTypingIndicator,
     FlatList,
     InlineDateSeparator,
     InlineUnreadIndicator,
-    legacyImageViewerSwipeBehaviour,
     Message,
     MessageSystem,
     myMessageTheme,
@@ -1256,7 +1190,6 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
         InlineDateSeparator,
         InlineUnreadIndicator,
         isListActive: isChannelActive,
-        legacyImageViewerSwipeBehaviour,
         loadChannelAroundMessage,
         loading,
         LoadingIndicator,
@@ -1276,7 +1209,6 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
         scrollToFirstUnreadThreshold,
         selectedPicker,
         setChannelUnreadState,
-        setMessages,
         setSelectedPicker,
         setTargetedMessage,
         shouldShowUnreadUnderlay,