feat: add delivery count to the message status

Author: khushal87

package/src/components/ChannelPreview/ChannelPreviewStatus.tsx

@@ -3,7 +3,8 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import { ChannelPreviewProps } from './ChannelPreview';
 import type { ChannelPreviewMessengerPropsWithContext } from './ChannelPreviewMessenger';
-import { MessageReadStatus } from './hooks/useLatestMessagePreview';
+
+import { MessageDeliveryStatus } from './hooks/useMessageDeliveryStatus';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
@@ -38,7 +39,7 @@ export const ChannelPreviewStatus = (props: ChannelPreviewStatusProps) => {
     },
   } = useTheme();
 
-  const created_at = latestMessagePreview.messageObject?.created_at;
+  const created_at = latestMessagePreview?.created_at;
   const latestMessageDate = created_at ? new Date(created_at) : new Date();
 
   const formattedDate = useMemo(
@@ -55,9 +56,11 @@ export const ChannelPreviewStatus = (props: ChannelPreviewStatusProps) => {
 
   return (
     <View style={styles.flexRow}>
-      {status === MessageReadStatus.READ ? (
+      {status === MessageDeliveryStatus.READ ? (
         <CheckAll pathFill={accent_blue} {...checkAllIcon} />
-      ) : status === MessageReadStatus.UNREAD ? (
+      ) : status === MessageDeliveryStatus.DELIVERED ? (
+        <CheckAll pathFill={grey} {...checkAllIcon} />
+      ) : status === MessageDeliveryStatus.SENT ? (
         <Check pathFill={grey} {...checkIcon} />
       ) : null}
       <Text style={[styles.date, { color: grey }, date]}>

package/src/components/ChannelPreview/hooks/useLatestMessagePreview.ts

@@ -13,6 +13,8 @@ import type {
   UserResponse,
 } from 'stream-chat';
 
+import { MessageDeliveryStatus, useMessageDeliveryStatus } from './useMessageDeliveryStatus';
+
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 
@@ -28,7 +30,7 @@ export type LatestMessagePreview = {
     text: string;
     draft?: boolean;
   }[];
-  status: number;
+  status?: MessageDeliveryStatus;
   created_at?: string | Date;
 };
 
@@ -194,46 +196,20 @@ export enum MessageReadStatus {
   DELIVERED = 3,
 }
 
-const getLatestMessageReadStatus = (
-  channel: Channel,
-  client: StreamChat,
-  lastMessage: LocalMessage | undefined,
-  readEvents: boolean,
-): MessageReadStatus => {
-  const currentUserId = client.userID;
-  const isLastMessageOwn = currentUserId === lastMessage?.user?.id;
-  if (!lastMessage || !isLastMessageOwn || !readEvents) {
-    return MessageReadStatus.NOT_SENT_BY_CURRENT_USER;
-  }
-
-  const readList = { ...channel.state.read };
-  if (currentUserId) {
-    delete readList[currentUserId];
-  }
-
-  const messageUpdatedAt = lastMessage.updated_at
-    ? typeof lastMessage.updated_at === 'string'
-      ? new Date(lastMessage.updated_at)
-      : lastMessage.updated_at
-    : undefined;
-
-  return Object.values(readList).some(
-    ({ last_read }) => messageUpdatedAt && messageUpdatedAt < last_read,
-  )
-    ? MessageReadStatus.READ
-    : MessageReadStatus.UNREAD;
-};
-
 const getLatestMessagePreview = (params: {
   channel: Channel;
   client: StreamChat;
   draftMessage?: DraftMessage;
   pollState: LatestMessagePreviewSelectorReturnType | undefined;
-  readEvents: boolean;
-  t: TFunction;
+  /**
+   * @deprecated This parameter is no longer used and will be removed in the next major release.
+   */
+  readEvents?: boolean;
   lastMessage?: LocalMessage;
+  status?: MessageDeliveryStatus;
+  t: TFunction;
 }) => {
-  const { channel, client, draftMessage, lastMessage, pollState, readEvents, t } = params;
+  const { channel, client, draftMessage, lastMessage, pollState, status, t } = params;
 
   const messages = channel.state.messages;
 
@@ -247,7 +223,7 @@ const getLatestMessagePreview = (params: {
           text: t('Nothing yet...'),
         },
       ],
-      status: MessageReadStatus.NOT_SENT_BY_CURRENT_USER,
+      status: MessageDeliveryStatus.NOT_SENT_BY_CURRENT_USER,
     };
   }
 
@@ -259,7 +235,7 @@ const getLatestMessagePreview = (params: {
     created_at: message?.created_at,
     messageObject: message,
     previews: getLatestMessageDisplayText(channel, client, draftMessage, message, t, pollState),
-    status: getLatestMessageReadStatus(channel, client, message, readEvents),
+    status,
   };
 };
 
@@ -274,6 +250,9 @@ const stateSelector = (state: AttachmentManagerState) => ({
 /**
  * Hook to set the display preview for latest message on channel.
  *
+ * FIXME: This hook is very poorly implemented and needs to be refactored with granular hooks
+ * to avoid unnecessary re-renders and to make the code more readable.
+ *
  * @param {*} channel Channel object
  *
  * @returns {object} latest message preview e.g.. { text: 'this was last message ...', created_at: '11/12/2020', messageObject: { originalMessageObject } }
@@ -327,6 +306,12 @@ export const useLatestMessagePreview = (
     return read_events;
   }, [channelConfigExists, channel]);
 
+  const { status } = useMessageDeliveryStatus({
+    channel,
+    isReadEventsEnabled: readEvents,
+    lastMessage: lastMessage as LocalMessage,
+  });
+
   const pollId = lastMessage?.poll_id ?? '';
   const poll = client.polls.fromState(pollId);
   const pollState: LatestMessagePreviewSelectorReturnType =
@@ -340,15 +325,15 @@ export const useLatestMessagePreview = (
       draftMessage,
       lastMessage: translatedLastMessage,
       pollState,
-      readEvents,
+      status,
       t,
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     channelLastMessageString,
+    status,
     draftMessage,
     forceUpdate,
-    readEvents,
     latestVotesByOption,
     createdBy,
     name,

package/src/components/ChannelPreview/hooks/useMessageDeliveryStatus.ts

@@ -0,0 +1,97 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { Channel, Event, LocalMessage, MessageResponse } from 'stream-chat';
+
+import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+
+export enum MessageDeliveryStatus {
+  NOT_SENT_BY_CURRENT_USER = 'not_sent_by_current_user',
+  DELIVERED = 'delivered',
+  READ = 'read',
+  SENT = 'sent',
+}
+
+type MessageDeliveryStatusProps = {
+  channel: Channel;
+  lastMessage: LocalMessage;
+  isReadEventsEnabled: boolean;
+};
+
+export const useMessageDeliveryStatus = ({
+  channel,
+  lastMessage,
+  isReadEventsEnabled = true,
+}: MessageDeliveryStatusProps) => {
+  const { client } = useChatContext();
+  const [status, setStatus] = useState<MessageDeliveryStatus | undefined>(undefined);
+
+  const isOwnMessage = useCallback(
+    (message: LocalMessage | MessageResponse) =>
+      client.user && message && message.user?.id === client.user.id,
+    [client],
+  );
+
+  useEffect(() => {
+    if (!lastMessage) {
+      setStatus(undefined);
+    }
+
+    if (!isReadEventsEnabled) {
+      setStatus(MessageDeliveryStatus.NOT_SENT_BY_CURRENT_USER);
+      return;
+    }
+
+    if (!lastMessage?.created_at || !isOwnMessage(lastMessage)) {
+      return;
+    }
+
+    const msgRef = {
+      msgId: lastMessage.id,
+      timestampMs: new Date(lastMessage.created_at).getTime(),
+    };
+    setStatus(
+      channel.messageReceiptsTracker.readersForMessage(msgRef).length > 1
+        ? MessageDeliveryStatus.READ
+        : channel.messageReceiptsTracker.deliveredForMessage(msgRef).length > 1
+          ? MessageDeliveryStatus.DELIVERED
+          : MessageDeliveryStatus.SENT,
+    );
+  }, [channel, isOwnMessage, isReadEventsEnabled, lastMessage]);
+
+  useEffect(() => {
+    const handleMessageNew = (event: Event) => {
+      // the last message is not mine, so do not show the delivery status
+      if (event.message && !isOwnMessage(event.message)) {
+        return setStatus(undefined);
+      }
+      return setStatus(MessageDeliveryStatus.SENT);
+    };
+    const { unsubscribe } = channel.on('message.new', handleMessageNew);
+    return unsubscribe;
+  }, [channel, isOwnMessage]);
+
+  useEffect(() => {
+    if (!isOwnMessage(lastMessage)) return;
+    const handleMessageDelivered = (event: Event) => {
+      if (
+        event.user?.id !== client.user?.id &&
+        lastMessage &&
+        lastMessage.id === event.last_delivered_message_id
+      )
+        setStatus(MessageDeliveryStatus.DELIVERED);
+    };
+
+    const handleMarkRead = (event: Event) => {
+      if (event.user?.id !== client.user?.id) setStatus(MessageDeliveryStatus.READ);
+    };
+
+    const listeners = [
+      channel.on('message.delivered', handleMessageDelivered),
+      channel.on('message.read', handleMarkRead),
+    ];
+
+    return () => listeners.forEach((l) => l.unsubscribe());
+  }, [channel, client, isOwnMessage, lastMessage]);
+
+  return { status };
+};

package/src/components/Message/Message.tsx

@@ -6,6 +6,8 @@ import type { Attachment, LocalMessage, UserResponse } from 'stream-chat';
 import { useCreateMessageContext } from './hooks/useCreateMessageContext';
 import { useMessageActionHandlers } from './hooks/useMessageActionHandlers';
 import { useMessageActions } from './hooks/useMessageActions';
+import { useMessageDeliveredData } from './hooks/useMessageDeliveryData';
+import { useMessageReadData } from './hooks/useMessageReadData';
 import { useProcessReactions } from './hooks/useProcessReactions';
 import { messageActions as defaultMessageActions } from './utils/messageActions';
 
@@ -46,7 +48,6 @@ import {
   MessageStatusTypes,
 } from '../../utils/utils';
 import type { Thumbnail } from '../Attachment/utils/buildGallery/types';
-import { getReadState } from '../MessageList/utils/getReadState';
 
 export type TouchableEmitter =
   | 'fileAttachment'
@@ -142,10 +143,18 @@ export type MessagePropsWithContext = Pick<
   Partial<
     Omit<
       MessageContextValue,
-      'groupStyles' | 'handleReaction' | 'message' | 'isMessageAIGenerated' | 'readBy'
+      | 'groupStyles'
+      | 'handleReaction'
+      | 'message'
+      | 'isMessageAIGenerated'
+      | 'deliveredBy'
+      | 'readBy'
     >
   > &
-  Pick<MessageContextValue, 'groupStyles' | 'message' | 'isMessageAIGenerated' | 'readBy'> &
+  Pick<
+    MessageContextValue,
+    'groupStyles' | 'message' | 'isMessageAIGenerated' | 'readBy' | 'deliveredBy'
+  > &
   Pick<
     MessagesContextValue,
     | 'sendReaction'
@@ -219,6 +228,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     chatContext,
     deleteMessage: deleteMessageFromContext,
     deleteReaction,
+    deliveredBy,
     dismissKeyboard,
     dismissKeyboardOnMessageTouch,
     enableLongPress = true,
@@ -617,6 +627,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     actionsEnabled,
     alignment,
     channel,
+    deliveredBy,
     dismissOverlay,
     files: attachments.files,
     goToMessage,
@@ -758,6 +769,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
 const areEqual = (prevProps: MessagePropsWithContext, nextProps: MessagePropsWithContext) => {
   const {
     chatContext: { mutedUsers: prevMutedUsers },
+    deliveredBy: prevDeliveredBy,
     goToMessage: prevGoToMessage,
     groupStyles: prevGroupStyles,
     isAttachmentEqual,
@@ -772,6 +784,7 @@ const areEqual = (prevProps: MessagePropsWithContext, nextProps: MessagePropsWit
   } = prevProps;
   const {
     chatContext: { mutedUsers: nextMutedUsers },
+    deliveredBy: nextDeliveredBy,
     goToMessage: nextGoToMessage,
     groupStyles: nextGroupStyles,
     isTargetedMessage: nextIsTargetedMessage,
@@ -784,6 +797,11 @@ const areEqual = (prevProps: MessagePropsWithContext, nextProps: MessagePropsWit
     t: nextT,
   } = nextProps;
 
+  const deliveredByEqual = prevDeliveredBy === nextDeliveredBy;
+  if (!deliveredByEqual) {
+    return false;
+  }
+
   const readByEqual = prevReadBy === nextReadBy;
   if (!readByEqual) {
     return false;
@@ -948,13 +966,14 @@ export type MessageProps = Partial<
  */
 export const Message = (props: MessageProps) => {
   const { message } = props;
-  const { channel, enforceUniqueReaction, members, read } = useChannelContext();
+  const { channel, enforceUniqueReaction, members } = useChannelContext();
   const chatContext = useChatContext();
   const { dismissKeyboard } = useKeyboardContext();
   const messagesContext = useMessagesContext();
   const { openThread } = useThreadContext();
   const { t } = useTranslationContext();
-  const readBy = useMemo(() => getReadState(message, read), [message, read]);
+  const readBy = useMessageReadData({ message });
+  const deliveredBy = useMessageDeliveredData({ message });
   const { setQuotedMessage, setEditingState } = useMessageComposerAPIContext();
 
   return (
@@ -963,6 +982,7 @@ export const Message = (props: MessageProps) => {
       {...{
         channel,
         chatContext,
+        deliveredBy,
         dismissKeyboard,
         enforceUniqueReaction,
         members,