fix: exclude own read state from delivery status inference in ChannelPreview (#2870)

Author: MartinCupela

src/components/ChannelPreview/hooks/__tests__/useMessageDeliveryStatus.test.js

@@ -21,7 +21,7 @@ import {
 import { act } from '@testing-library/react';
 import { dispatchMessageDeliveredEvent } from '../../../../mock-builders/event/messageDelivered';
 
-const userA = generateUser();
+const userA = generateUser({ id: 'own-user' });
 const userB = generateUser();
 const getClientAndChannel = async (channelData = {}, user = userA) => {
   const members = [generateMember({ user: userA }), generateMember({ user: userB })];
@@ -79,6 +79,42 @@ const lastMessageCreated = (messages) => [
   },
 ];
 
+const lastDeliveredOnlyToMe = (messages) => [
+  {
+    last_delivered_at: messages[1].created_at.toISOString(),
+    last_delivered_message_id: messages[1].id,
+    last_read: messages[0].created_at.toISOString(),
+    last_read_message_id: messages[0],
+    unread_messages: 0,
+    user: userA,
+  },
+  {
+    last_delivered_at: messages[0].created_at.toISOString(),
+    last_delivered_message_id: messages[0].id,
+    last_read: messages[0].created_at.toISOString(),
+    unread_messages: 1,
+    user: userB,
+  },
+];
+
+const lastReadOnlyByMe = (messages) => [
+  {
+    last_delivered_at: messages[1].created_at.toISOString(),
+    last_delivered_message_id: messages[1].id,
+    last_read: messages[1].created_at.toISOString(),
+    last_read_message_id: messages[1],
+    unread_messages: 0,
+    user: userA,
+  },
+  {
+    last_delivered_at: messages[0].created_at.toISOString(),
+    last_delivered_message_id: messages[0].id,
+    last_read: messages[0].created_at.toISOString(),
+    unread_messages: 1,
+    user: userB,
+  },
+];
+
 const lastMessageDelivered = (messages) => [
   {
     last_delivered_at: messages[0].created_at.toISOString(),
@@ -162,14 +198,30 @@ describe('Message delivery status', () => {
       expect(result.current.messageDeliveryStatus).toBeUndefined();
     });
 
-    it('is "created" if the last message was not delivered neither read by any other member', async () => {
+    it('is "sent" if the last message was not delivered neither read by any other member', async () => {
       const { lastMessage, messages } = ownLastMessage();
       const read = lastMessageCreated(messages);
       const { channel, client } = await getClientAndChannel({ messages, read });
       const { result } = renderComponent({ channel, client, lastMessage });
       expect(result.current.messageDeliveryStatus).toBe(MessageDeliveryStatus.SENT);
     });
 
+    it('is "sent" if the last message was delivered only to own user', async () => {
+      const { lastMessage, messages } = ownLastMessage();
+      const read = lastDeliveredOnlyToMe(messages);
+      const { channel, client } = await getClientAndChannel({ messages, read });
+      const { result } = renderComponent({ channel, client, lastMessage });
+      expect(result.current.messageDeliveryStatus).toBe(MessageDeliveryStatus.SENT);
+    });
+
+    it('is "sent" if the last message was read only by own user', async () => {
+      const { lastMessage, messages } = ownLastMessage();
+      const read = lastReadOnlyByMe(messages);
+      const { channel, client } = await getClientAndChannel({ messages, read });
+      const { result } = renderComponent({ channel, client, lastMessage });
+      expect(result.current.messageDeliveryStatus).toBe(MessageDeliveryStatus.SENT);
+    });
+
     it('is "delivered" if the last message in channel was delivered but not read by any member other than me', async () => {
       const { lastMessage, messages } = ownLastMessage();
       const read = lastMessageDelivered(messages);

src/components/ChannelPreview/hooks/useMessageDeliveryStatus.ts

@@ -43,14 +43,20 @@ export const useMessageDeliveryStatus = ({
       msgId: lastMessage.id,
       timestampMs: lastMessage.created_at.getTime(),
     };
+    const readersForMessage = channel.messageReceiptsTracker.readersForMessage(msgRef);
+    const deliveredForMessage =
+      channel.messageReceiptsTracker.deliveredForMessage(msgRef);
     setMessageDeliveryStatus(
-      channel.messageReceiptsTracker.readersForMessage(msgRef).length > 0
+      readersForMessage.length > 1 ||
+        (readersForMessage.length === 1 && readersForMessage[0].id !== client.user?.id)
         ? MessageDeliveryStatus.READ
-        : channel.messageReceiptsTracker.deliveredForMessage(msgRef).length > 0
+        : deliveredForMessage.length > 1 ||
+            (deliveredForMessage.length === 1 &&
+              deliveredForMessage[0].id !== client.user?.id)
           ? MessageDeliveryStatus.DELIVERED
           : MessageDeliveryStatus.SENT,
     );
-  }, [channel, isOwnMessage, lastMessage]);
+  }, [channel, client, isOwnMessage, lastMessage]);
 
   useEffect(() => {
     const handleMessageNew = (event: Event) => {