fix: hasMore limitations (#2242)

### 🎯 Goal

A bug that would prevent users from loading older messages within
message lists if they paginated on channel B, switched to channel A and
then back to channel B and tried paginating again.

### 🛠 Implementation details

Moved from `startReached` to `atTopStateChange` and from `endReached` to
`atBottomStateChange` callbacks for pagination as `startReached` [is
distinct](https://github.com/petyosi/react-virtuoso/blob/efdf50b8c4ee18e1c9d2fa4866e47ae9fd64cae1/src/listStateSystem.ts#L386)
and called only once per set of data (I assume, not sure why as
scrolling back down should ideally reset it) - but if you were to hit
the top - and the data load would fail for some reason - scrolling a bit
down and back up would not trigger the data load again.
This was one of my ways to try to resolve the original problem before I
was able to find reliable reproduction steps but in the end decided to
keep it as "futureproofing".
Though I'm worried that some of our integrators migh've hooked into
these properties overriding whatever we newly have making their
pagination not work.

Author: arnautov-anton

src/components/Channel/Channel.tsx

@@ -188,6 +188,13 @@ type ChannelPropsForwardedToComponentContext<
   VirtualMessage?: ComponentContextValue<StreamChatGenerics>['VirtualMessage'];
 };
 
+const isUserResponseArray = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+>(
+  output: string[] | UserResponse<StreamChatGenerics>[],
+): output is UserResponse<StreamChatGenerics>[] =>
+  (output as UserResponse<StreamChatGenerics>[])[0]?.id != null;
+
 export type ChannelProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
   V extends CustomTrigger = CustomTrigger
@@ -591,16 +598,17 @@ const ChannelInner = <
   // Adds a temporary notification to message list, will be removed after 5 seconds
   const addNotification = makeAddNotifications(setNotifications, notificationTimeouts);
 
-  const loadMoreFinished = debounce(
-    (hasMore: boolean, messages: ChannelState<StreamChatGenerics>['messages']) => {
-      if (!isMounted.current) return;
-      dispatch({ hasMore, messages, type: 'loadMoreFinished' });
-    },
-    2000,
-    {
-      leading: true,
-      trailing: true,
-    },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const loadMoreFinished = useCallback(
+    debounce(
+      (hasMore: boolean, messages: ChannelState<StreamChatGenerics>['messages']) => {
+        if (!isMounted.current) return;
+        dispatch({ hasMore, messages, type: 'loadMoreFinished' });
+      },
+      2000,
+      { leading: true, trailing: true },
+    ),
+    [],
   );
 
   const loadMore = async (limit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE) => {
@@ -637,7 +645,7 @@ const ChannelInner = <
   };
 
   const loadMoreNewer = async (limit = 100) => {
-    if (!online.current || !window.navigator.onLine) return 0;
+    if (!online.current || !window.navigator.onLine || !state.hasMoreNewer) return 0;
 
     const newestMessage = state?.messages?.[state?.messages?.length - 1];
     if (state.loadingMore || state.loadingMoreNewer) return 0;
@@ -659,9 +667,13 @@ const ChannelInner = <
       return 0;
     }
 
-    const hasMoreNewer = channel.state.messages !== channel.state.latestMessages;
+    const hasMoreNewerMessages = channel.state.messages !== channel.state.latestMessages;
 
-    dispatch({ hasMoreNewer, messages: channel.state.messages, type: 'loadMoreNewerFinished' });
+    dispatch({
+      hasMoreNewer: hasMoreNewerMessages,
+      messages: channel.state.messages,
+      type: 'loadMoreNewerFinished',
+    });
     return queryResponse.messages.length;
   };
 
@@ -738,11 +750,6 @@ const ChannelInner = <
     });
   };
 
-  const isUserResponseArray = (
-    output: string[] | UserResponse<StreamChatGenerics>[],
-  ): output is UserResponse<StreamChatGenerics>[] =>
-    (output as UserResponse<StreamChatGenerics>[])[0]?.id != null;
-
   const doSendMessage = async (
     message: MessageToSend<StreamChatGenerics> | StreamMessage<StreamChatGenerics>,
     customMessageData?: Partial<Message<StreamChatGenerics>>,
@@ -751,7 +758,7 @@ const ChannelInner = <
     const { attachments, id, mentioned_users = [], parent_id, text } = message;
 
     // channel.sendMessage expects an array of user id strings
-    const mentions = isUserResponseArray(mentioned_users)
+    const mentions = isUserResponseArray<StreamChatGenerics>(mentioned_users)
       ? mentioned_users.map(({ id }) => id)
       : mentioned_users;
 
@@ -894,43 +901,47 @@ const ChannelInner = <
     dispatch({ type: 'closeThread' });
   };
 
-  const loadMoreThreadFinished = debounce(
-    (
-      threadHasMore: boolean,
-      threadMessages: Array<ReturnType<ChannelState<StreamChatGenerics>['formatMessage']>>,
-    ) => {
-      dispatch({
-        threadHasMore,
-        threadMessages,
-        type: 'loadMoreThreadFinished',
-      });
-    },
-    2000,
-    { leading: true, trailing: true },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const loadMoreThreadFinished = useCallback(
+    debounce(
+      (
+        threadHasMore: boolean,
+        threadMessages: Array<ReturnType<ChannelState<StreamChatGenerics>['formatMessage']>>,
+      ) => {
+        dispatch({
+          threadHasMore,
+          threadMessages,
+          type: 'loadMoreThreadFinished',
+        });
+      },
+      2000,
+      { leading: true, trailing: true },
+    ),
+    [],
   );
 
   const loadMoreThread = async (limit: number = DEFAULT_THREAD_PAGE_SIZE) => {
     // FIXME: should prevent loading more, if state.thread.reply_count === channel.state.threads[parentID].length
     if (state.threadLoadingMore || !state.thread) return;
 
     dispatch({ type: 'startLoadingThread' });
-    const parentID = state.thread.id;
+    const parentId = state.thread.id;
 
-    if (!parentID) {
+    if (!parentId) {
       return dispatch({ type: 'closeThread' });
     }
 
-    const oldMessages = channel.state.threads[parentID] || [];
-    const oldestMessageID = oldMessages[0]?.id;
+    const oldMessages = channel.state.threads[parentId] || [];
+    const oldestMessageId = oldMessages[0]?.id;
 
     try {
-      const queryResponse = await channel.getReplies(parentID, {
-        id_lt: oldestMessageID,
+      const queryResponse = await channel.getReplies(parentId, {
+        id_lt: oldestMessageId,
         limit,
       });
 
       const threadHasMoreMessages = hasMoreMessagesProbably(queryResponse.messages.length, limit);
-      const newThreadMessages = channel.state.threads[parentID] || [];
+      const newThreadMessages = channel.state.threads[parentId] || [];
 
       // next set loadingMore to false so we can start asking for more data
       loadMoreThreadFinished(threadHasMoreMessages, newThreadMessages);

src/components/Channel/__tests__/Channel.test.js

@@ -322,6 +322,28 @@ describe('Channel', () => {
     });
   });
 
+  // this will only happen if we:
+  // load with channel A
+  // switch to channel B and paginate (loadMore - older)
+  // switch back to channel A (reset hasMore)
+  // switch back to channel B - messages are already cached and there's more than page size amount
+  it('should set hasMore state to true if the initial channel query returns more messages than the default initial page size', async () => {
+    const { channel, chatClient } = await initClient();
+    useMockedApis(chatClient, [
+      queryChannelWithNewMessages(Array.from({ length: 26 }, generateMessage), channel),
+    ]);
+    let hasMore;
+    await act(() => {
+      renderComponent({ channel, chatClient }, ({ hasMore: contextHasMore }) => {
+        hasMore = contextHasMore;
+      });
+    });
+
+    await waitFor(() => {
+      expect(hasMore).toBe(true);
+    });
+  });
+
   it('should set hasMore state to true if the initial channel query returns count of messages equal to the default initial page size', async () => {
     const { channel, chatClient } = await initClient();
     useMockedApis(chatClient, [

src/components/MessageList/VirtualizedMessageList.tsx

@@ -151,7 +151,6 @@ const VirtualizedMessageListWithContext = <
     defaultItemHeight,
     disableDateSeparator = true,
     groupStyles,
-    hasMore,
     hasMoreNewer,
     head,
     hideDeletedMessages = false,
@@ -333,21 +332,14 @@ const VirtualizedMessageListWithContext = <
   const atBottomStateChange = (isAtBottom: boolean) => {
     atBottom.current = isAtBottom;
     setIsMessageListScrolledToBottom(isAtBottom);
-    if (isAtBottom && newMessagesNotification) {
-      setNewMessagesNotification(false);
-    }
-  };
 
-  const startReached = () => {
-    if (hasMore && loadMore) {
-      loadMore(messageLimit);
+    if (isAtBottom) {
+      loadMoreNewer?.(messageLimit);
+      setNewMessagesNotification?.(false);
     }
   };
-
-  const endReached = () => {
-    if (hasMoreNewer && loadMoreNewer) {
-      loadMoreNewer(messageLimit);
-    }
+  const atTopStateChange = (isAtTop: boolean) => {
+    if (isAtTop) loadMore?.(messageLimit);
   };
 
   useEffect(() => {
@@ -368,7 +360,9 @@ const VirtualizedMessageListWithContext = <
         <div className={customClasses?.virtualizedMessageList || 'str-chat__virtual-list'}>
           <Virtuoso<UnknownType, VirtuosoContext<StreamChatGenerics>>
             atBottomStateChange={atBottomStateChange}
-            atBottomThreshold={200}
+            atBottomThreshold={100}
+            atTopStateChange={atTopStateChange}
+            atTopThreshold={100}
             className='str-chat__message-list-scroll'
             components={{
               EmptyPlaceholder,
@@ -399,7 +393,6 @@ const VirtualizedMessageListWithContext = <
               threadList,
               virtuosoRef: virtuoso,
             }}
-            endReached={endReached}
             firstItemIndex={calculateFirstItemIndex(numItemsPrepended)}
             followOutput={followOutput}
             increaseViewportBy={{ bottom: 200, top: 0 }}
@@ -412,7 +405,6 @@ const VirtualizedMessageListWithContext = <
             key={messageSetKey}
             overscan={overscan}
             ref={virtuoso}
-            startReached={startReached}
             style={{ overflowX: 'hidden' }}
             totalCount={processedMessages.length}
             {...overridingVirtuosoProps}

src/components/MessageList/utils.ts

@@ -316,7 +316,7 @@ export const getGroupStyles = <
 //  The MessageList should have configurable the limit for performing the requests.
 //  This parameter would then be used within these functions
 export const hasMoreMessagesProbably = (returnedCountMessages: number, limit: number) =>
-  returnedCountMessages === limit;
+  returnedCountMessages >= limit;
 
 // @deprecated
 export const hasNotMoreMessages = (returnedCountMessages: number, limit: number) =>