fix: adjust the first message rendering for DateSeparator in empty Vi…

…rtualizedMessageList (#2271)
GetStream · Feb 13, 2024 · 8f490fa · 8f490fa
1 parent 2abe352
commit 8f490fa
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/src/components/MessageList/hooks/VirtualizedMessageList/usePrependMessagesCount.ts b/src/components/MessageList/hooks/VirtualizedMessageList/usePrependMessagesCount.ts
@@ -39,8 +39,9 @@ export function usePrependedMessagesCount<
     // That in turn leads to incorrect index calculation in VirtualizedMessageList trying to access a message
     // at non-existent index. Therefore, we ignore messages of status "sending" / "failed" in order they are
     // not considered as prepended messages.
-    const firstMsgMovedAfterMessagesInExcludedStatus =
-      currentFirstMessage?.status && STATUSES_EXCLUDED_FROM_PREPEND[currentFirstMessage.status];
+    const firstMsgMovedAfterMessagesInExcludedStatus = !!(
+      currentFirstMessage?.status && STATUSES_EXCLUDED_FROM_PREPEND[currentFirstMessage.status]
+    );
 
     if (noNewMessages || firstMsgMovedAfterMessagesInExcludedStatus) {
       return previousNumItemsPrepended.current;
@@ -61,8 +62,8 @@ export function usePrependedMessagesCount<
         messages[prependedMessageCount].id === firstMessageOnFirstLoadedPage.current?.id;
 
       if (messageIsFirstOnFirstLoadedPage) {
-        previousNumItemsPrepended.current = prependedMessageCount;
-        return prependedMessageCount;
+        previousNumItemsPrepended.current = prependedMessageCount - firstRealMessageIndex;
+        return previousNumItemsPrepended.current;
       }
     }
 

diff --git a/src/components/MessageList/hooks/__tests__/usePrependMessagesCount.test.js b/src/components/MessageList/hooks/__tests__/usePrependMessagesCount.test.js
@@ -50,7 +50,7 @@ describe('usePrependMessagesCount', function () {
       hasDateSeparator,
       messages: page1,
     });
-    expect(result.current).toBe(1);
+    expect(result.current).toBe(0);
   });
 
   it('is 0 when re-rendered with no new messages and date separator disabled', () => {
@@ -69,7 +69,7 @@ describe('usePrependMessagesCount', function () {
     };
     const { rerender, result } = render(props);
     rerender(props);
-    expect(result.current).toBe(1);
+    expect(result.current).toBe(0);
   });
 
   it('is 0 when re-rendered with no new but swapped messages and date separator disabled', () => {
@@ -123,7 +123,7 @@ describe('usePrependMessagesCount', function () {
       hasDateSeparator,
       messages: messagesWithDateSeparator({ messages: [...page2, ...page1] }),
     });
-    expect(result.current).toBe(page2.length + 1);
+    expect(result.current).toBe(page2.length);
   });
 
   it('is 0 when jumped to a message and date separator disabled', () => {