fix: move logic to component

Author: khushal87

package/src/components/Channel/Channel.tsx

@@ -447,6 +447,10 @@ export type ChannelPropsWithContext<
      * Custom loading error indicator to override the Stream default
      */
     LoadingErrorIndicator?: React.ComponentType<LoadingErrorProps>;
+    /**
+     * Boolean flag to enable/disable marking the channel as read on mount
+     */
+    markReadOnMount?: boolean;
     maxMessageLength?: number;
     /**
      * Load the channel at a specified message instead of the most recent message.
@@ -581,6 +585,7 @@ const ChannelWithContext = <
     loadingMore: loadingMoreProp,
     loadingMoreRecent: loadingMoreRecentProp,
     markdownRules,
+    markReadOnMount = true,
     maxMessageLength: maxMessageLengthProp,
     maxNumberOfFiles = 10,
     maxTimeBetweenGroupedMessages,
@@ -841,7 +846,7 @@ const ChannelWithContext = <
         });
       }
 
-      if (channel.countUnread() > 0) {
+      if (channel.countUnread() > 0 && markReadOnMount) {
         await markRead({ updateChannelUnreadState: false });
       }
 

package/src/components/MessageList/MessageList.tsx

@@ -115,15 +115,13 @@ type MessageListPropsWithContext<
     | 'hideStickyDateHeader'
     | 'highlightedMessageId'
     | 'loadChannelAroundMessage'
-    | 'loadChannelAtFirstUnreadMessage'
     | 'loading'
     | 'LoadingIndicator'
     | 'markRead'
     | 'NetworkDownIndicator'
     | 'reloadChannel'
     | 'scrollToFirstUnreadThreshold'
     | 'setTargetedMessage'
-    | 'setChannelUnreadState'
     | 'StickyHeader'
     | 'targetedMessage'
     | 'threadList'
@@ -250,7 +248,6 @@ const MessageListWithContext = <
     isListActive = false,
     legacyImageViewerSwipeBehaviour,
     loadChannelAroundMessage,
-    loadChannelAtFirstUnreadMessage,
     loading,
     LoadingIndicator,
     loadMore,
@@ -269,7 +266,6 @@ const MessageListWithContext = <
     reloadChannel,
     ScrollToBottomButton,
     selectedPicker,
-    setChannelUnreadState,
     setFlatListRef,
     setMessages,
     setSelectedPicker,
@@ -1000,14 +996,6 @@ const MessageListWithContext = <
     }
   };
 
-  const onUnreadNotificationPress = async () => {
-    await loadChannelAtFirstUnreadMessage({
-      channelUnreadState,
-      setChannelUnreadState,
-      setTargetedMessage,
-    });
-  };
-
   const onUnreadNotificationClose = async () => {
     await markRead();
     setIsUnreadNotificationOpen(false);
@@ -1154,10 +1142,7 @@ const MessageListWithContext = <
       />
       <NetworkDownIndicator />
       {isUnreadNotificationOpen && !threadList ? (
-        <UnreadMessagesNotification
-          onCloseHandler={onUnreadNotificationClose}
-          onPressHandler={onUnreadNotificationPress}
-        />
+        <UnreadMessagesNotification onCloseHandler={onUnreadNotificationClose} />
       ) : null}
     </View>
   );
@@ -1184,14 +1169,12 @@ export const MessageList = <
     highlightedMessageId,
     isChannelActive,
     loadChannelAroundMessage,
-    loadChannelAtFirstUnreadMessage,
     loading,
     LoadingIndicator,
     markRead,
     NetworkDownIndicator,
     reloadChannel,
     scrollToFirstUnreadThreshold,
-    setChannelUnreadState,
     setTargetedMessage,
     StickyHeader,
     targetedMessage,
@@ -1241,7 +1224,6 @@ export const MessageList = <
         isListActive: isChannelActive,
         legacyImageViewerSwipeBehaviour,
         loadChannelAroundMessage,
-        loadChannelAtFirstUnreadMessage,
         loading,
         LoadingIndicator,
         loadMore,
@@ -1258,7 +1240,6 @@ export const MessageList = <
         ScrollToBottomButton,
         scrollToFirstUnreadThreshold,
         selectedPicker,
-        setChannelUnreadState,
         setMessages,
         setSelectedPicker,
         setTargetedMessage,

package/src/components/MessageList/UnreadMessagesNotification.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Pressable, StyleSheet, Text } from 'react-native';
 
+import { useChannelContext } from '../../contexts/channelContext/ChannelContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { Close } from '../../icons';
@@ -9,20 +10,44 @@ export type UnreadMessagesNotificationProps = {
   /**
    * Callback to handle the press event
    */
-  onPressHandler: () => void;
+  onPressHandler?: () => Promise<void>;
   /**
    * Callback to handle the close event
    */
   onCloseHandler?: () => void;
-  /**
-   * If the notification is visible
-   */
-  visible?: boolean;
 };
 
 export const UnreadMessagesNotification = (props: UnreadMessagesNotificationProps) => {
-  const { onCloseHandler, onPressHandler, visible = true } = props;
+  const { onCloseHandler, onPressHandler } = props;
   const { t } = useTranslationContext();
+  const {
+    channelUnreadState,
+    loadChannelAtFirstUnreadMessage,
+    markRead,
+    setChannelUnreadState,
+    setTargetedMessage,
+  } = useChannelContext();
+
+  const handleOnPress = async () => {
+    if (onPressHandler) {
+      await onPressHandler();
+    } else {
+      await loadChannelAtFirstUnreadMessage({
+        channelUnreadState,
+        setChannelUnreadState,
+        setTargetedMessage,
+      });
+    }
+  };
+
+  const handleClose = async () => {
+    if (onCloseHandler) {
+      await onCloseHandler();
+    } else {
+      await markRead();
+    }
+  };
+
   const {
     theme: {
       colors: { text_low_emphasis, white_snow },
@@ -32,11 +57,9 @@ export const UnreadMessagesNotification = (props: UnreadMessagesNotificationProp
     },
   } = useTheme();
 
-  if (!visible) return null;
-
   return (
     <Pressable
-      onPress={onPressHandler}
+      onPress={handleOnPress}
       style={({ pressed }) => [
         styles.container,
         { backgroundColor: text_low_emphasis, opacity: pressed ? 0.8 : 1 },
@@ -45,7 +68,7 @@ export const UnreadMessagesNotification = (props: UnreadMessagesNotificationProp
     >
       <Text style={[styles.text, { color: white_snow }, text]}>{t<string>('Unread Messages')}</Text>
       <Pressable
-        onPress={onCloseHandler}
+        onPress={handleClose}
         style={({ pressed }) => [
           {
             opacity: pressed ? 0.8 : 1,