fix: add improvements around read channel state

Author: khushal87

examples/SampleApp/src/screens/ChannelListScreen.tsx

@@ -187,7 +187,7 @@ export const ChannelListScreen: React.FC = () => {
               filters={filters}
               HeaderNetworkDownIndicator={() => null}
               maxUnreadCount={99}
-              onSelect={async (channel) => {
+              onSelect={(channel) => {
                 navigation.navigate('ChannelScreen', {
                   channel,
                 });

package/src/components/Channel/Channel.tsx

@@ -517,7 +517,7 @@ const ChannelWithContext = <
     CreatePollContent,
     DateHeader = DateHeaderDefault,
     deletedMessagesVisibilityType = 'always',
-    disableIfFrozenChannel = false,
+    disableIfFrozenChannel = true,
     disableKeyboardCompatibleView = false,
     disableTypingIndicator,
     dismissKeyboardOnMessageTouch = true,
@@ -716,6 +716,7 @@ const ChannelWithContext = <
   const {
     copyStateFromChannel,
     initStateFromChannel,
+    setRead,
     setTyping,
     state: channelState,
   } = useChannelDataState<StreamChatGenerics>(channel);
@@ -878,7 +879,7 @@ const ChannelWithContext = <
    */
   useEffect(() => {
     const handleEvent: EventHandler<StreamChatGenerics> = (event) => {
-      if (channel.cid === event.cid) copyChannelState();
+      if (channel.cid === event.cid) setRead(channel);
     };
 
     const { unsubscribe } = client.on('notification.mark_read', handleEvent);

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

@@ -219,6 +219,13 @@ export const useChannelDataState = <
     }));
   }, []);
 
+  const setRead = useCallback((channel: Channel<StreamChatGenerics>) => {
+    setState((prev) => ({
+      ...prev,
+      read: { ...channel.state.read }, // Synchronize the read state from the channel
+    }));
+  }, []);
+
   const setTyping = useCallback((channel: Channel<StreamChatGenerics>) => {
     setState((prev) => ({
       ...prev,
@@ -229,6 +236,7 @@ export const useChannelDataState = <
   return {
     copyStateFromChannel,
     initStateFromChannel,
+    setRead,
     setTyping,
     state,
   };

package/src/components/Channel/hooks/useMessageListPagination.tsx

@@ -197,27 +197,27 @@ export const useMessageListPagination = <
         let firstUnreadMessageId = first_unread_message_id;
         let lastReadMessageId = last_read_message_id;
         let isInCurrentMessageSet = false;
+        const messagesState = channel.state.messages;
 
         // If the first unread message is already in the current message set, we don't need to load more messages.
         if (firstUnreadMessageId) {
-          const messageIdx = findInMessagesById(channel.state.messages, firstUnreadMessageId);
+          const messageIdx = findInMessagesById(messagesState, firstUnreadMessageId);
           isInCurrentMessageSet = messageIdx !== -1;
         }
         // If the last read message is already in the current message set, we don't need to load more messages, and we set the first unread message id as that is what we want to operate on.
         else if (lastReadMessageId) {
-          const messageIdx = findInMessagesById(channel.state.messages, lastReadMessageId);
+          const messageIdx = findInMessagesById(messagesState, lastReadMessageId);
           isInCurrentMessageSet = messageIdx !== -1;
-          firstUnreadMessageId =
-            messageIdx > -1 ? channel.state.messages[messageIdx + 1]?.id : undefined;
+          firstUnreadMessageId = messageIdx > -1 ? messagesState[messageIdx + 1]?.id : undefined;
         } else {
           const lastReadTimestamp = last_read.getTime();
           const { index: lastReadIdx, message: lastReadMessage } = findInMessagesByDate(
-            channel.state.messages,
+            messagesState,
             last_read,
           );
           if (lastReadMessage) {
             lastReadMessageId = lastReadMessage.id;
-            firstUnreadMessageId = channel.state.messages[lastReadIdx + 1].id;
+            firstUnreadMessageId = messagesState[lastReadIdx + 1].id;
             isInCurrentMessageSet = !!firstUnreadMessageId;
           } else {
             setLoadingMore(true);
@@ -227,7 +227,7 @@ export const useMessageListPagination = <
               messages = await fetchMessagesAround(channel, last_read.toISOString(), limit);
             } catch (error) {
               setLoading(false);
-              loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
+              loadMoreFinished(channel.state.messagePagination.hasPrev, messagesState);
               console.log('Loading channel at first unread message failed with error:', error);
               return;
             }