feat: use server defaults for querying channels (#3403)

## 🎯 Goal

This PR is a reflection of [this
one](GetStream/stream-chat-react#2943) from the
react SDK for V8.

## 🛠 Implementation details

<!-- Provide a description of the implementation -->

## 🎨 UI Changes

<!-- Add relevant screenshots -->

<details>
<summary>iOS</summary>


<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>


<details>
<summary>Android</summary>

<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>

## 🧪 Testing

<!-- Explain how this change can be tested (or why it can't be tested)
-->

## ☑️ Checklist

- [ ] I have signed the [Stream
CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform)
(required)
- [ ] PR targets the `develop` branch
- [ ] Documentation is updated
- [ ] New code is tested in main example apps, including all possible
scenarios
  - [ ] SampleApp iOS and Android
  - [ ] Expo iOS and Android

Author: isekovanic

examples/SampleApp/yarn.lock

@@ -6634,6 +6634,11 @@ lodash-es@4.17.21:
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
   integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
 
+lodash-es@4.17.23:
+  version "4.17.23"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.23.tgz#58c4360fd1b5d33afc6c0bbd3d1149349b1138e0"
+  integrity sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg==
+
 lodash.camelcase@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"

examples/TypeScriptMessaging/App.tsx

@@ -37,7 +37,6 @@ const options = {
   presence: true,
   state: true,
   watch: true,
-  limit: 30,
 };
 
 I18nManager.forceRTL(false);

package/package.json

@@ -80,7 +80,7 @@
     "path": "0.12.7",
     "react-native-markdown-package": "1.8.2",
     "react-native-url-polyfill": "^2.0.0",
-    "stream-chat": "^9.27.2",
+    "stream-chat": "^9.33.0",
     "use-sync-external-store": "^1.5.0"
   },
   "peerDependencies": {

package/src/components/Channel/Channel.tsx

@@ -1147,7 +1147,8 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
       if (channelMessagesState?.messages) {
         await channel?.watch({
           messages: {
-            limit: channelMessagesState.messages.length + 30,
+            // Do we want to reduce this to the default as well ?
+            limit: channelMessagesState.messages.length,
           },
         });
         channel.offlineMode = false;

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

@@ -161,8 +161,8 @@ describe('useMessageListPagination', () => {
 
       await waitFor(() => {
         expect(queryFn).toHaveBeenCalledWith({
-          messages: { id_lt: messages[0].id, limit: 20 },
-          watchers: { limit: 20 },
+          messages: { id_lt: messages[0].id },
+          watchers: {},
         });
         expect(result.current.state.hasMore).toBe(true);
         expect(result.current.state.messages.length).toBe(40);
@@ -252,8 +252,8 @@ describe('useMessageListPagination', () => {
 
       await waitFor(() => {
         expect(queryFn).toHaveBeenCalledWith({
-          messages: { id_gt: messages[messages.length - 1].id, limit: 10 },
-          watchers: { limit: 10 },
+          messages: { id_gt: messages[messages.length - 1].id },
+          watchers: {},
         });
         expect(result.current.state.hasMore).toBe(true);
         expect(result.current.state.messages.length).toBe(40);

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 = 20) => {
+  const loadMore = useStableCallback(async (limit?: number) => {
     if (!channel.state.messagePagination.hasPrev) {
       return;
     }
@@ -103,7 +103,7 @@ export const useMessageListPagination = ({ channel }: { channel: Channel }) => {
   /**
    * This function loads more messages after the most recent message in current channel state.
    */
-  const loadMoreRecent = useStableCallback(async (limit: number = 10) => {
+  const loadMoreRecent = useStableCallback(async (limit?: number) => {
     if (!channel.state.messagePagination.hasNext) {
       return;
     }

package/src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -13,8 +13,6 @@ import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { useStateStore } from '../../../hooks';
 import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
 
-import { MAX_QUERY_CHANNELS_LIMIT } from '../utils';
-
 type Parameters = {
   channelManager: ChannelManager;
   enableOfflineSupport: boolean;
@@ -24,10 +22,6 @@ type Parameters = {
   sort: ChannelSort;
 };
 
-const DEFAULT_OPTIONS = {
-  message_limit: 10,
-};
-
 const RETRY_INTERVAL_IN_MS = 5000;
 
 type QueryType = 'queryLocalDB' | 'reload' | 'refresh' | 'loadChannels';
@@ -46,7 +40,7 @@ export const usePaginatedChannels = ({
   channelManager,
   enableOfflineSupport,
   filters = {},
-  options = DEFAULT_OPTIONS,
+  options = {},
   sort = {},
 }: Parameters) => {
   const [staticChannelsActive, setStaticChannelsActive] = useState<boolean>(false);
@@ -99,7 +93,6 @@ export const usePaginatedChannels = ({
     setActiveQueryType(queryType);
 
     const newOptions = {
-      limit: options?.limit ?? MAX_QUERY_CHANNELS_LIMIT,
       offset: 0,
       ...options,
     };

package/src/components/MessageList/MessageList.tsx

@@ -2,13 +2,15 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
   FlatListProps,
   FlatList as FlatListType,
+  LayoutChangeEvent,
   ScrollViewProps,
   StyleSheet,
   View,
   ViewabilityConfig,
   ViewToken,
 } from 'react-native';
 
+import debounce from 'lodash/debounce';
 import type { Channel, Event, LocalMessage, MessageResponse } from 'stream-chat';
 
 import { useMessageList } from './hooks/useMessageList';
@@ -327,8 +329,8 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
 
   const renderItem = useCallback(
     ({ item: message, index }: { item: LocalMessage; index: number }) => {
-      const previousMessage = processedMessageListRef.current[index + 1];
-      const nextMessage = processedMessageListRef.current[index - 1];
+      const previousMessage = processedMessageList[index + 1];
+      const nextMessage = processedMessageList[index - 1];
       return (
         <MessageWrapper
           message={message}
@@ -337,7 +339,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
         />
       );
     },
-    [processedMessageListRef],
+    [processedMessageList],
   );
 
   const messageListLengthBeforeUpdate = useRef(0);
@@ -1126,6 +1128,44 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     [additionalFlatListProps?.contentContainerStyle, contentContainer],
   );
 
+  const viewportHeightRef = useRef<number>(undefined);
+
+  /**
+   * This debounced callback makes sure that if the current number of messages do not
+   * fill our screen, we load more messages continuously until we cover enough ground.
+   */
+  const debouncedPrefillMessages = useMemo(
+    () =>
+      debounce(
+        (viewportHeight: number, contentHeight: number) => {
+          if (viewportHeight >= contentHeight) {
+            maybeCallOnEndReached();
+          }
+        },
+        500,
+        {
+          leading: false,
+          trailing: true,
+        },
+      ),
+    [maybeCallOnEndReached],
+  );
+
+  const onContentSizeChange = useStableCallback((width: number, height: number) => {
+    if (additionalFlatListProps?.onContentSizeChange) {
+      additionalFlatListProps.onContentSizeChange(width, height);
+    }
+
+    debouncedPrefillMessages(viewportHeightRef.current ?? 0, height);
+  });
+
+  const onLayout = useStableCallback((event: LayoutChangeEvent) => {
+    if (additionalFlatListProps?.onLayout) {
+      additionalFlatListProps.onLayout(event);
+    }
+    viewportHeightRef.current = event.nativeEvent.layout.height;
+  });
+
   if (!FlatList) {
     return null;
   }
@@ -1168,6 +1208,8 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
           */
             maintainVisibleContentPosition={maintainVisibleContentPosition}
             maxToRenderPerBatch={30}
+            onContentSizeChange={onContentSizeChange}
+            onLayout={onLayout}
             onMomentumScrollEnd={onUserScrollEvent}
             onScroll={handleScroll}
             onScrollBeginDrag={onScrollBeginDrag}

package/yarn.lock

@@ -8335,10 +8335,10 @@ stdin-discarder@^0.2.2:
   resolved "https://registry.yarnpkg.com/stdin-discarder/-/stdin-discarder-0.2.2.tgz#390037f44c4ae1a1ae535c5fe38dc3aba8d997be"
   integrity sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ==
 
-stream-chat@^9.27.2:
-  version "9.27.2"
-  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.27.2.tgz#5b41173e513f3606c47c93f391693b589e663968"
-  integrity sha512-OdALDzg8lO8CAdl8deydJ1+O4wJ7mM9dPLeCwDppq/OQ4aFIS9X38P+IdXPcOCsgSS97UoVUuxD2/excC5PEeg==
+stream-chat@^9.33.0:
+  version "9.33.0"
+  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.33.0.tgz#3da6582ade9a22a808abe7f443b08137705bf792"
+  integrity sha512-JdeR6Nq2QEKBIKZsW8wnGa04pTHCiWmdIOqvWUVJ4DtmLzJ9oBBeBnHvPx1Q+RKbvpZqfjwvYaCwKY5ZFq+FxQ==
   dependencies:
     "@types/jsonwebtoken" "^9.0.8"
     "@types/ws" "^8.5.14"