fix: mark channel read for all incoming unread messages (#2622)

Author: MartinCupela

src/components/MessageList/MessageList.tsx

@@ -131,7 +131,6 @@ const MessageListWithContext = <
   useMarkRead({
     isMessageListScrolledToBottom,
     messageListIsThread: threadList,
-    unreadCount: channelUnreadUiState?.unread_messages ?? 0,
     wasMarkedUnread: !!channelUnreadUiState?.first_unread_message_id,
   });
 

src/components/MessageList/VirtualizedMessageList.tsx

@@ -345,7 +345,6 @@ const VirtualizedMessageListWithContext = <
   useMarkRead({
     isMessageListScrolledToBottom,
     messageListIsThread: !!threadList,
-    unreadCount: channelUnreadUiState?.unread_messages ?? 0,
     wasMarkedUnread: !!channelUnreadUiState?.first_unread_message_id,
   });
 

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

@@ -370,94 +370,6 @@ describe('MessageList', () => {
     afterEach(jest.clearAllMocks);
     afterAll(jest.restoreAllMocks);
 
-    it('should keep displaying the unread messages separator when an unread channel is marked read on mount', async () => {
-      const user = generateUser();
-      const last_read_message_id = 'X';
-      const lastReadMessage = generateMessage({ id: last_read_message_id });
-      const messages = [lastReadMessage, generateMessage(), generateMessage()];
-      const {
-        channels: [channel],
-        client: chatClient,
-      } = await initClientWithChannels({
-        channelsData: [
-          {
-            messages,
-            read: [
-              {
-                last_read: lastReadMessage.created_at.toISOString(),
-                last_read_message_id,
-                unread_messages: 2,
-                user,
-              },
-            ],
-          },
-        ],
-        customUser: user,
-      });
-
-      const markReadMock = jest
-        .spyOn(channel, 'markRead')
-        .mockReturnValueOnce(markReadApi(channel));
-
-      await act(() => {
-        renderComponent({
-          channelProps: { channel },
-          chatClient,
-          msgListProps: { messages },
-        });
-      });
-
-      expect(markReadMock).toHaveBeenCalledTimes(1);
-      expect(screen.queryByText(separatorText)).toBeInTheDocument();
-    });
-
-    it('should display unread messages separator before the first message', async () => {
-      const user = generateUser();
-      const messages = [generateMessage(), generateMessage()];
-      const {
-        channels: [channel],
-        client: chatClient,
-      } = await initClientWithChannels({
-        channelsData: [
-          {
-            messages,
-            read: [
-              {
-                last_read: new Date(1).toISOString(),
-                unread_messages: messages.length,
-                user,
-              },
-            ],
-          },
-        ],
-        customUser: user,
-      });
-
-      const markReadMock = jest.spyOn(channel, 'markRead').mockReturnValue(markReadApi(channel));
-      const Message = () => <div className='message-ui' />;
-      let container;
-
-      await act(() => {
-        const result = renderComponent({
-          channelProps: { channel, Message },
-          chatClient,
-          msgListProps: { messages },
-        });
-        container = result.container;
-      });
-      const listItems = container.querySelectorAll('.str-chat__ul > *');
-      expect(listItems).toHaveLength(4);
-      expect(listItems[1].firstChild).toMatchInlineSnapshot(`
-        <div
-          class="str-chat__unread-messages-separator"
-          data-testid="unread-messages-separator"
-        >
-          Unread messages
-        </div>
-      `);
-      markReadMock.mockRestore();
-    });
-
     it('should display unread messages separator when a channel is marked unread and remove it when marked read by markRead()', async () => {
       jest.useFakeTimers();
       const markReadBtnTestId = 'test-mark-read';