fix: read state for messages (#2890)

Author: khushal87

package/src/components/MessageList/hooks/useLastReadData.ts

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+
+import type { ChannelState } from 'stream-chat';
+
+import { PaginatedMessageListContextValue } from '../../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
+import { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { getReadStates } from '../utils/getReadStates';
+
+type UseLastReadDataParams<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  messages:
+    | PaginatedMessageListContextValue<StreamChatGenerics>['messages']
+    | ThreadContextValue<StreamChatGenerics>['threadMessages'];
+  userID: string | undefined;
+  read?: ChannelState<StreamChatGenerics>['read'];
+  returnAllReadData?: boolean;
+};
+
+export const useLastReadData = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: UseLastReadDataParams<StreamChatGenerics>,
+) => {
+  const { messages, read, returnAllReadData = true, userID } = props;
+
+  return useMemo(
+    () =>
+      getReadStates(
+        messages.filter(({ user }) => user?.id === userID),
+        read,
+        returnAllReadData,
+      ),
+    [messages, read, returnAllReadData, userID],
+  );
+};

package/src/components/MessageList/hooks/useMessageList.ts

@@ -1,5 +1,7 @@
 import type { ChannelState, MessageResponse } from 'stream-chat';
 
+import { useLastReadData } from './useLastReadData';
+
 import {
   ChannelContextValue,
   useChannelContext,
@@ -14,7 +16,6 @@ import { useThreadContext } from '../../../contexts/threadContext/ThreadContext'
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import { getDateSeparators } from '../utils/getDateSeparators';
 import { getGroupStyles } from '../utils/getGroupStyles';
-import { getReadStates } from '../utils/getReadStates';
 
 export type UseMessageListParams = {
   deletedMessagesVisibilityType?: DeletedMessagesVisibilityType;
@@ -81,7 +82,11 @@ export const useMessageList = <
     userId: client.userID,
   });
 
-  const readData = getReadStates(client.userID, messageList, readList);
+  const readData = useLastReadData({
+    messages: messageList,
+    read: readList,
+    userID: client.userID,
+  });
 
   const messagesWithStylesReadByAndDateSeparator = messageList
     .filter((msg) => {

package/src/components/MessageList/utils/getReadStates.ts

@@ -6,11 +6,11 @@ import type { DefaultStreamChatGenerics } from '../../../types/types';
 export const getReadStates = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  clientUserId: string | undefined,
   messages:
     | PaginatedMessageListContextValue<StreamChatGenerics>['messages']
     | ThreadContextValue<StreamChatGenerics>['threadMessages'],
   read?: ChannelContextValue<StreamChatGenerics>['read'],
+  returnAllReadData?: boolean,
 ) => {
   const readData: Record<string, number> = {};
 
@@ -32,20 +32,20 @@ export const getReadStates = <
         if (msg.created_at && msg.created_at < readState.last_read) {
           userLastReadMsgId = msg.id;
 
-          // if true, save other user's read data for all messages they've read
-          if (!readData[userLastReadMsgId]) {
-            readData[userLastReadMsgId] = 0;
-          }
+          if (returnAllReadData) {
+            // if true, save other user's read data for all messages they've read
+            if (!readData[userLastReadMsgId]) {
+              readData[userLastReadMsgId] = 0;
+            }
 
-          // Only increment read count if the message is not sent by the current user
-          if (msg.user?.id !== clientUserId) {
+            // Only increment read count if the message is not sent by the current user
             readData[userLastReadMsgId] = readData[userLastReadMsgId] + 1;
           }
         }
       });
 
       // if true, only save read data for other user's last read message
-      if (userLastReadMsgId) {
+      if (userLastReadMsgId && !returnAllReadData) {
         if (!readData[userLastReadMsgId]) {
           readData[userLastReadMsgId] = 0;
         }