fix: incorrect read state for messages (#2888)

* fix: incorrect read state for messages

* fix: lint issues

Author: khushal87

package/src/components/Message/MessageSimple/MessageStatus.tsx

@@ -14,20 +14,6 @@ import { MessageStatusTypes } from '../../../utils/utils';
 
 import { isMessageWithStylesReadByAndDateSeparator } from '../../MessageList/hooks/useMessageList';
 
-const styles = StyleSheet.create({
-  readByCount: {
-    fontSize: 11,
-    fontWeight: '700',
-    paddingRight: 3,
-  },
-  statusContainer: {
-    alignItems: 'flex-end',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    paddingRight: 3,
-  },
-});
-
 export type MessageStatusPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<MessageContextValue<StreamChatGenerics>, 'message' | 'threadList'>;
@@ -131,3 +117,17 @@ export const MessageStatus = <
 };
 
 MessageStatus.displayName = 'MessageStatus{messageSimple{status}}';
+
+const styles = StyleSheet.create({
+  readByCount: {
+    fontSize: 11,
+    fontWeight: '700',
+    paddingRight: 3,
+  },
+  statusContainer: {
+    alignItems: 'flex-end',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    paddingRight: 3,
+  },
+});

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 { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import {
@@ -11,7 +13,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;
@@ -78,7 +79,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

@@ -7,11 +7,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?: ChannelState<StreamChatGenerics>['read'],
+  returnAllReadData?: boolean,
 ) => {
   const readData: Record<string, number> = {};
 
@@ -33,20 +33,18 @@ 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;
-          }
-
-          // Only increment read count if the message is not sent by the current user
-          if (msg.user?.id !== clientUserId) {
+          if (returnAllReadData) {
+            // if true, save other user's read data for all messages they've read
+            if (!readData[userLastReadMsgId]) {
+              readData[userLastReadMsgId] = 0;
+            }
             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;
         }