diff --git a/package/src/components/Channel/__tests__/useMessageListPagination.test.js b/package/src/components/Channel/__tests__/useMessageListPagination.test.js index d782de22cc..eed226f56b 100644 --- a/package/src/components/Channel/__tests__/useMessageListPagination.test.js +++ b/package/src/components/Channel/__tests__/useMessageListPagination.test.js @@ -161,9 +161,9 @@ describe('useMessageListPagination', () => { await waitFor(() => { expect(queryFn).toHaveBeenCalledWith({ - messages: { id_lt: messages[0].id, limit: 10 }, + messages: { id_lt: messages[0].id, limit: 25 }, watchers: { - limit: 10, + limit: 25, }, }); expect(result.current.state.hasMore).toBe(true); diff --git a/package/src/components/Channel/hooks/useMessageListPagination.tsx b/package/src/components/Channel/hooks/useMessageListPagination.tsx index df08fbd6b0..c16315fe66 100644 --- a/package/src/components/Channel/hooks/useMessageListPagination.tsx +++ b/package/src/components/Channel/hooks/useMessageListPagination.tsx @@ -74,7 +74,7 @@ export const useMessageListPagination = ({ channel }: { channel: Channel }) => { /** * This function loads more messages before the first message in current channel state. */ - const loadMore = useStableCallback(async (limit: number = 10) => { + const loadMore = useStableCallback(async (limit: number = 25) => { if (!channel.state.messagePagination.hasPrev) { return; } diff --git a/package/src/components/MessageList/MessageList.tsx b/package/src/components/MessageList/MessageList.tsx index c5bc2a34d2..1d1f475265 100644 --- a/package/src/components/MessageList/MessageList.tsx +++ b/package/src/components/MessageList/MessageList.tsx @@ -172,7 +172,7 @@ type MessageListPropsWithContext = Pick< | 'maximumMessageLimit' > & Pick & - Pick & + Pick & Pick< MessagesContextValue, | 'DateHeader' @@ -190,7 +190,7 @@ type MessageListPropsWithContext = Pick< Pick & Pick< ThreadContextValue, - 'loadMoreRecentThread' | 'loadMoreThread' | 'thread' | 'threadInstance' + 'loadMoreRecentThread' | 'loadMoreThread' | 'threadHasMore' | 'thread' | 'threadInstance' > & { /** * Besides existing (default) UX behavior of underlying FlatList of MessageList component, if you want @@ -325,6 +325,8 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => { TypingIndicator, TypingIndicatorContainer, UnreadMessagesNotification, + hasMore, + threadHasMore, } = props; const [isUnreadNotificationOpen, setIsUnreadNotificationOpen] = useState(false); const { theme } = useTheme(); @@ -914,8 +916,12 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => { * 3. If the call to `loadMoreRecent` is in progress, we wait for it to finish to make sure scroll doesn't jump. */ const maybeCallOnEndReached = useStableCallback(async () => { + const shouldQuery = (threadList && threadHasMore) || (!threadList && hasMore); // If onEndReached has already been called for given messageList length, then ignore. - if (processedMessageList?.length && onEndReachedTracker.current[processedMessageList.length]) { + if ( + (processedMessageList?.length && onEndReachedTracker.current[processedMessageList.length]) || + !shouldQuery + ) { return; } @@ -1332,8 +1338,9 @@ export const MessageList = (props: MessageListProps) => { UnreadMessagesNotification, } = useMessagesContext(); const { messageInputFloating, messageInputHeightStore } = useMessageInputContext(); - const { loadMore, loadMoreRecent } = usePaginatedMessageListContext(); - const { loadMoreRecentThread, loadMoreThread, thread, threadInstance } = useThreadContext(); + const { loadMore, loadMoreRecent, hasMore } = usePaginatedMessageListContext(); + const { loadMoreRecentThread, loadMoreThread, threadHasMore, thread, threadInstance } = + useThreadContext(); return ( { TypingIndicator, TypingIndicatorContainer, UnreadMessagesNotification, + hasMore, + threadHasMore, }} {...props} noGroupByUser={!enableMessageGroupingByUser || props.noGroupByUser}