fix: confine readBy data to Message Status component

Author: khushal87

package/src/components/Message/Message.tsx

@@ -41,6 +41,7 @@ import {
   MessageStatusTypes,
 } from '../../utils/utils';
 import type { Thumbnail } from '../Attachment/utils/buildGallery/types';
+import { getReadState } from '../MessageList/utils/getReadState';
 
 export type TouchableEmitter =
   | 'fileAttachment'
@@ -136,7 +137,7 @@ export type MessagePropsWithContext = Pick<
   Partial<
     Omit<MessageContextValue, 'groupStyles' | 'handleReaction' | 'message' | 'isMessageAIGenerated'>
   > &
-  Pick<MessageContextValue, 'groupStyles' | 'message' | 'isMessageAIGenerated' | 'readBy'> &
+  Pick<MessageContextValue, 'groupStyles' | 'message' | 'isMessageAIGenerated'> &
   Pick<
     MessagesContextValue,
     | 'sendReaction'
@@ -247,7 +248,6 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     onThreadSelect,
     openThread,
     preventPress,
-    readBy,
     removeMessage,
     retrySendMessage,
     selectReaction,
@@ -263,6 +263,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     threadList = false,
     updateMessage,
   } = props;
+  const { read } = useChannelContext();
   const isMessageAIGenerated = messagesContext.isMessageAIGenerated;
   const isAIGenerated = useMemo(
     () => isMessageAIGenerated(message),
@@ -277,6 +278,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
       screenPadding,
     },
   } = useTheme();
+  const readBy = useMemo(() => getReadState(message, read), [message, read]);
 
   const showMessageOverlay = async (showMessageReactions = false, selectedReaction?: string) => {
     await dismissKeyboard();
@@ -756,7 +758,6 @@ const areEqual = (prevProps: MessagePropsWithContext, nextProps: MessagePropsWit
     members: prevMembers,
     message: prevMessage,
     messagesContext: prevMessagesContext,
-    readBy: prevReadBy,
     showUnreadUnderlay: prevShowUnreadUnderlay,
     t: prevT,
   } = prevProps;
@@ -769,7 +770,6 @@ const areEqual = (prevProps: MessagePropsWithContext, nextProps: MessagePropsWit
     members: nextMembers,
     message: nextMessage,
     messagesContext: nextMessagesContext,
-    readBy: nextReadBy,
     showUnreadUnderlay: nextShowUnreadUnderlay,
     t: nextT,
   } = nextProps;
@@ -885,11 +885,6 @@ const areEqual = (prevProps: MessagePropsWithContext, nextProps: MessagePropsWit
     return false;
   }
 
-  const readByEqual = prevReadBy === nextReadBy;
-  if (!readByEqual) {
-    return false;
-  }
-
   const showUnreadUnderlayEqual = prevShowUnreadUnderlay === nextShowUnreadUnderlay;
   if (!showUnreadUnderlayEqual) {
     return false;
@@ -919,9 +914,9 @@ const areEqual = (prevProps: MessagePropsWithContext, nextProps: MessagePropsWit
 const MemoizedMessage = React.memo(MessageWithContext, areEqual) as typeof MessageWithContext;
 
 export type MessageProps = Partial<
-  Omit<MessagePropsWithContext, 'groupStyles' | 'handleReaction' | 'message' | 'readBy'>
+  Omit<MessagePropsWithContext, 'groupStyles' | 'handleReaction' | 'message'>
 > &
-  Pick<MessagePropsWithContext, 'groupStyles' | 'message' | 'readBy'>;
+  Pick<MessagePropsWithContext, 'groupStyles' | 'message'>;
 
 /**
  * Message - A high level component which implements all the logic required for a message.

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

@@ -10,7 +10,6 @@ import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { Check } from '../../../icons/Check';
 import { CheckAll } from '../../../icons/CheckAll';
 import { Time } from '../../../icons/Time';
-
 import { MessageStatusTypes } from '../../../utils/utils';
 
 export type MessageStatusPropsWithContext = Pick<

package/src/components/MessageList/MessageList.tsx

@@ -318,7 +318,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
    * NOTE: rawMessageList changes only when messages array state changes
    * processedMessageList changes on any state change
    */
-  const { dateSeparators, messageGroupStyles, processedMessageList, rawMessageList, readData } =
+  const { dateSeparators, messageGroupStyles, processedMessageList, rawMessageList } =
     useMessageList({
       noGroupByUser,
       threadList,
@@ -766,7 +766,6 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
           }
           message={message}
           onThreadSelect={onThreadSelect}
-          readBy={readData[message.id]}
           showUnreadUnderlay={showUnreadUnderlay}
           style={[messageContainer]}
           threadList={threadList}
@@ -820,7 +819,6 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
       modifiedTheme,
       myMessageTheme,
       onThreadSelect,
-      readData,
       screenPadding,
       shouldApplyAndroidWorkaround,
       shouldShowUnreadUnderlay,

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

@@ -1,8 +1,6 @@
 import { useMemo } from 'react';
 
-import type { ChannelState, LocalMessage } from 'stream-chat';
-
-import { useLastReadData } from './useLastReadData';
+import type { LocalMessage } from 'stream-chat';
 
 import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
@@ -48,20 +46,13 @@ export const shouldIncludeMessageInList = (
 export const useMessageList = (params: UseMessageListParams) => {
   const { noGroupByUser, threadList } = params;
   const { client } = useChatContext();
-  const { hideDateSeparators, maxTimeBetweenGroupedMessages, read } = useChannelContext();
+  const { hideDateSeparators, maxTimeBetweenGroupedMessages } = useChannelContext();
   const { deletedMessagesVisibilityType, getMessagesGroupStyles = getGroupStyles } =
     useMessagesContext();
   const { messages } = usePaginatedMessageListContext();
   const { threadMessages } = useThreadContext();
 
   const messageList = threadList ? threadMessages : messages;
-  const readList: ChannelState['read'] | undefined = threadList ? undefined : read;
-
-  const readData = useLastReadData({
-    messages: messageList,
-    read: readList,
-    userID: client.userID,
-  });
 
   const dateSeparators = useMemo(
     () =>
@@ -119,7 +110,5 @@ export const useMessageList = (params: UseMessageListParams) => {
     processedMessageList,
     /** Raw messages from the channel state */
     rawMessageList: messageList,
-    /** Read data */
-    readData,
   };
 };

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

@@ -0,0 +1,27 @@
+import { ChannelState, LocalMessage } from 'stream-chat';
+
+/**
+ * Get the number of users who have read the message
+ * @param message - The message to get the read state for
+ * @param read - The read state of the channel
+ * @returns The number of users who have read the message
+ */
+export const getReadState = (message: LocalMessage, read?: ChannelState['read']) => {
+  if (!read) {
+    return 0;
+  }
+
+  const readState = Object.values(read).reduce((acc, readState) => {
+    if (!readState.last_read) {
+      return acc;
+    }
+
+    if (message.created_at && message.created_at < readState.last_read) {
+      return acc + 1;
+    }
+
+    return acc;
+  }, 0);
+
+  return readState;
+};

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

@@ -148,7 +148,7 @@ export * from './MessageList/TypingIndicatorContainer';
 export * from './MessageList/utils/getDateSeparators';
 export * from './MessageList/utils/getGroupStyles';
 export * from './MessageList/utils/getLastReceivedMessage';
-export * from './MessageList/utils/getReadStates';
+export * from './MessageList/utils/getReadState';
 
 export * from './MessageMenu/MessageActionList';
 export * from './MessageMenu/MessageActionListItem';