fix: prevent including own user in read count displayed in MessageStatus

Author: MartinCupela

src/components/Message/MessageStatus.tsx

@@ -70,9 +70,10 @@ const UnMemoizedMessageStatus = <
   const delivered = message.status === 'received' && message.id === lastReceivedId && !threadList;
   const deliveredAndRead = !!(readBy?.length && !threadList && !justReadByMe);
 
-  const [lastReadUser] = deliveredAndRead
+  const readersWithoutOwnUser = deliveredAndRead
     ? readBy.filter((item) => item.id !== client.user?.id)
     : [];
+  const [lastReadUser] = readersWithoutOwnUser;
 
   return (
     <span
@@ -149,12 +150,12 @@ const UnMemoizedMessageStatus = <
               user={lastReadUser}
             />
 
-            {readBy.length > 2 && (
+            {readersWithoutOwnUser.length > 1 && (
               <span
                 className={`str-chat__message-${messageType}-status-number`}
                 data-testid='message-status-read-by-many'
               >
-                {readBy.length - 1}
+                {readersWithoutOwnUser.length}
               </span>
             )}
           </>

src/components/Message/__tests__/MessageStatus.test.js

@@ -9,11 +9,12 @@ import {
   TranslationProvider,
 } from '../../../context';
 import { MessageStatus } from '../MessageStatus';
-import { getTestClientWithUser } from '../../../mock-builders';
+import { generateMessage, generateUser, getTestClientWithUser } from '../../../mock-builders';
 
 const MESSAGE_STATUS_SENDING_TEST_ID = 'message-status-sending';
 const MESSAGE_STATUS_DELIVERED_TEST_ID = 'message-status-received';
 const MESSAGE_STATUS_READ_TEST_ID = 'message-status-read-by';
+const MESSAGE_STATUS_READ_COUNT_TEST_ID = 'message-status-read-by-many';
 
 const rootClassName = `str-chat__message-simple-status str-chat__message-status`;
 
@@ -32,6 +33,8 @@ const foreignMsg = {
   updated_at: '2024-05-28T15:13:20.900Z',
   user: null,
 };
+
+const ownMessage = generateMessage({ user });
 const errorMsg = { ...foreignMsg, type: 'error', user };
 const sendingMsg = { ...foreignMsg, status: 'sending', user };
 const deliveredMsg = { ...foreignMsg, user };
@@ -236,4 +239,31 @@ describe('MessageStatus', () => {
       expect(container.children[0]).toHaveClass('str-chat__message-XXX-status');
     });
   });
+
+  it('does not render count if read by own user only', async () => {
+    const client = await getTestClientWithUser(user);
+    renderComponent({
+      chatCtx: { client },
+      messageCtx: { message: ownMessage, readBy: [user] },
+    });
+    expect(screen.queryByTestId(MESSAGE_STATUS_READ_COUNT_TEST_ID)).not.toBeInTheDocument();
+  });
+
+  it('does not render count if read by 1 other user', async () => {
+    const client = await getTestClientWithUser(user);
+    renderComponent({
+      chatCtx: { client },
+      messageCtx: { message: ownMessage, readBy: [generateUser()] },
+    });
+    expect(screen.queryByTestId(MESSAGE_STATUS_READ_COUNT_TEST_ID)).not.toBeInTheDocument();
+  });
+
+  it('renders count if read by 2 other users', async () => {
+    const client = await getTestClientWithUser(user);
+    renderComponent({
+      chatCtx: { client },
+      messageCtx: { message: ownMessage, readBy: [generateUser(), generateUser()] },
+    });
+    expect(screen.getByTestId(MESSAGE_STATUS_READ_COUNT_TEST_ID)).toHaveTextContent('2');
+  });
 });

src/components/MessageList/__tests__/utils.test.js

@@ -1,6 +1,6 @@
 import { generateFileAttachment, generateMessage, generateUser } from '../../../mock-builders';
 
-import { getGroupStyles, makeDateMessageId, processMessages } from '../utils';
+import { getGroupStyles, getReadStates, makeDateMessageId, processMessages } from '../utils';
 import { CUSTOM_MESSAGE_TYPE } from '../../../constants/messageTypes';
 
 const mockedNanoId = 'V1StGXR8_Z5jdHi6B-myT';
@@ -622,3 +622,73 @@ describe('getGroupStyles', () => {
     expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe('single');
   });
 });
+
+describe('getReadStates', () => {
+  const messages = [
+    generateMessage({
+      created_at: new Date('2024-05-21T17:57:31.9876Z'),
+      id: 'u49866124-uJx-xdCYq0zQ9r5VTuJFH',
+    }),
+    generateMessage({
+      created_at: new Date('2024-05-21T17:57:32.9876Z'),
+      id: 'u49866124-uJx-xdCYq0zQ9r5VTuJFV',
+    }),
+    generateMessage({
+      created_at: new Date('2024-07-24T22:49:35.527Z'),
+      id: 'u49866124-uJx-xdCYq0zQ9r5VTuJFY',
+    }),
+  ];
+  const read = {
+    user1: {
+      last_read: new Date('2024-05-21T17:20:29.402Z'),
+      last_read_message_id: undefined,
+      user: { id: 'user1' },
+    },
+    user2: {
+      last_read: new Date('2024-07-24T22:49:36.527Z'),
+      last_read_message_id: 'u96661092-14eb8ca1-a04c-4098-1d96-b1313d0b794b',
+      user: { id: 'user2' },
+    },
+    user3: {
+      last_read: '2024-05-21T17:40:57.794Z',
+      last_read_message_id: 'user7-dcad8dbd-f234-469e-2a46-bd8405beabb7',
+      user: { id: 'user3' },
+    },
+    user5: {
+      last_read: undefined,
+      last_read_message_id: undefined,
+      user: { id: 'user5' },
+    },
+    user6: {
+      last_read: undefined,
+      last_read_message_id: 'u49866124-uJx-xdCYq0zQ9r5VTuJFH',
+      user: { id: 'user6' },
+    },
+    user7: {
+      last_read: new Date('2024-05-21T17:59:04.911Z'),
+      last_read_message_id: 'u49866124-uJx-xdCYq0zQ9r5VTuJFH',
+      user: { id: 'user7' },
+    },
+    user8: {
+      last_read: new Date('2024-06-24T23:00:12.391Z'),
+      last_read_message_id: 'u49866124-73190b61-adf7-4e99-0779-565f22239e36',
+      user: undefined,
+    },
+  };
+
+  it('returns the list of message readers based on last_read timestamp only for the last read message by user', () => {
+    expect(getReadStates(messages, read)).toStrictEqual({
+      'u49866124-uJx-xdCYq0zQ9r5VTuJFV': [{ id: 'user7' }, undefined],
+      'u49866124-uJx-xdCYq0zQ9r5VTuJFY': [{ id: 'user2' }],
+    });
+  });
+
+  it("lists the user for each message that was created before the user's last_read timestamp", () => {
+    const returnAllReadData = true;
+    expect(getReadStates(messages, read, returnAllReadData)).toStrictEqual({
+      'u49866124-uJx-xdCYq0zQ9r5VTuJFH': [{ id: 'user2' }, { id: 'user7' }, undefined],
+      'u49866124-uJx-xdCYq0zQ9r5VTuJFV': [{ id: 'user2' }, { id: 'user7' }, undefined],
+      'u49866124-uJx-xdCYq0zQ9r5VTuJFY': [{ id: 'user2' }],
+    });
+  });
+});