chore: predefined filter support for offline mode (#3595)

## 🎯 Goal

This PR introduces missing support for offline handling of predefined
filters.

## 🛠 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/ExpoMessaging/app/index.tsx

@@ -3,13 +3,12 @@ import { Alert, Image, Pressable, StyleSheet, View } from 'react-native';
 import { ChannelList, SqliteClient } from 'stream-chat-expo';
 import { useCallback, useContext, useMemo } from 'react';
 import { Stack, useRouter } from 'expo-router';
-import { ChannelSort } from 'stream-chat';
 import { AppContext } from '../context/AppContext';
 import { useUserContext } from '@/context/UserContext';
 import { getInitialsOfName } from '@/utils/getInitialsOfName';
 
-const sort: ChannelSort = { last_updated: -1 };
-const options = {
+const baseOptions = {
+  predefined_filter: 'basic_channel_list_filter',
   state: true,
   watch: true,
 };
@@ -46,12 +45,15 @@ const LogoutButton = () => {
 
 export default function ChannelListScreen() {
   const { user } = useUserContext();
-  const filters = useMemo(
+  const userId = user?.id || '';
+  const options = useMemo(
     () => ({
-      members: { $in: [user?.id as string] },
-      type: 'messaging',
+      ...baseOptions,
+      filter_values: {
+        user_id: userId,
+      },
     }),
-    [user?.id],
+    [userId],
   );
   const router = useRouter();
   const { setChannel } = useContext(AppContext);
@@ -63,13 +65,11 @@ export default function ChannelListScreen() {
       />
 
       <ChannelList
-        filters={filters}
         onSelect={(channel) => {
           setChannel(channel);
           router.push(`/channel/${channel.cid}`);
         }}
         options={options}
-        sort={sort}
       />
     </View>
   );

examples/SampleApp/src/screens/ChannelListScreen.tsx

@@ -17,7 +17,6 @@ import { MessageSearchList } from '../components/MessageSearch/MessageSearchList
 import { useAppContext } from '../context/AppContext';
 import { usePaginatedSearchedMessages } from '../hooks/usePaginatedSearchedMessages';
 
-import type { ChannelSort } from 'stream-chat';
 import { useStreamChatContext } from '../context/StreamChatContext';
 import { Search } from '../icons/Search';
 import { ChannelInfo } from '../icons/ChannelInfo.tsx';
@@ -60,18 +59,12 @@ const styles = StyleSheet.create({
   },
 });
 
-const baseFilters = {
-  archived: false,
-  type: 'messaging',
-};
-
-const sort: ChannelSort = [{ pinned_at: -1 }, { last_message_at: -1 }, { updated_at: -1 }];
-
-const options = {
+const baseOptions = {
   presence: true,
   state: true,
   watch: true,
   message_limit: 25,
+  predefined_filter: 'basic_channel_list_filter',
 };
 
 export const ChannelListScreen: React.FC = () => {
@@ -91,15 +84,12 @@ export const ChannelListScreen: React.FC = () => {
     usePaginatedSearchedMessages(searchQuery);
 
   const chatClientUserId = chatClient?.user?.id || '';
-  const filters = useMemo(
-    () => ({
-      ...baseFilters,
-      members: {
-        $in: [chatClientUserId],
-      },
-    }),
-    [chatClientUserId],
-  );
+  const options = useMemo(() => ({
+    ...baseOptions,
+    filter_values: {
+      user_id: chatClientUserId,
+    }
+  }), [chatClientUserId])
 
   useScrollToTop(scrollRef as RefObject<FlatList<Channel>>);
 
@@ -248,13 +238,11 @@ export const ChannelListScreen: React.FC = () => {
           <View style={[styles.channelListContainer, { opacity: searchQuery ? 0 : 1 }]}>
             <ChannelList
               additionalFlatListProps={additionalFlatListProps}
-              filters={filters}
               maxUnreadCount={99}
               onSelect={onSelect}
               options={options}
               setFlatListRef={setScrollRef}
               getChannelActionItems={getChannelActionItems}
-              sort={sort}
             />
           </View>
         </View>

package/package.json

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

package/src/components/ChannelList/__tests__/ChannelList.test.tsx

@@ -184,6 +184,74 @@ describe('ChannelList', () => {
     });
   });
 
+  it('should re-query channels when predefined filter options change', async () => {
+    const queryChannelsSpy = jest.spyOn(chatClient, 'queryChannels');
+    useMockedApis(chatClient, [queryChannelsApi([testChannel1])]);
+
+    render(
+      <Chat client={chatClient}>
+        <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
+          <ChannelList
+            {...props}
+            options={{
+              filter_values: { user_id: 'dan' },
+              predefined_filter: 'user_messaging',
+            }}
+          />
+        </WithComponents>
+      </Chat>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId(testChannel1.channel.id)).toBeTruthy();
+    });
+
+    expect(queryChannelsSpy).toHaveBeenNthCalledWith(
+      1,
+      {},
+      expect.anything(),
+      expect.objectContaining({
+        filter_values: { user_id: 'dan' },
+        offset: 0,
+        predefined_filter: 'user_messaging',
+      }),
+      expect.anything(),
+    );
+
+    useMockedApis(chatClient, [queryChannelsApi([testChannel2])]);
+
+    screen.rerender(
+      <Chat client={chatClient}>
+        <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
+          <ChannelList
+            {...props}
+            options={{
+              filter_values: { user_id: 'sara' },
+              predefined_filter: 'user_messaging',
+            }}
+          />
+        </WithComponents>
+      </Chat>,
+    );
+
+    await waitFor(() => {
+      expect(queryChannelsSpy).toHaveBeenCalledTimes(2);
+      expect(screen.getByTestId(testChannel2.channel.id)).toBeTruthy();
+    });
+
+    expect(queryChannelsSpy).toHaveBeenNthCalledWith(
+      2,
+      {},
+      expect.anything(),
+      expect.objectContaining({
+        filter_values: { user_id: 'sara' },
+        offset: 0,
+        predefined_filter: 'user_messaging',
+      }),
+      expect.anything(),
+    );
+  });
+
   it('should update if filters are updated while awaiting api call', async () => {
     const deferredCallForStaleFilter = new DeferredPromise();
     const deferredCallForFreshFilter = new DeferredPromise();

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

@@ -53,6 +53,7 @@ export const usePaginatedChannels = ({
   const hasNextPage = pagination?.hasNext;
 
   const filtersRef = useRef<typeof filters | null>(null);
+  const optionsRef = useRef<typeof options | null>(null);
   const sortRef = useRef<typeof sort | null>(null);
   const activeRequestId = useRef<number>(0);
   const isQueryingRef = useRef(false);
@@ -69,10 +70,9 @@ export const usePaginatedChannels = ({
       queryType === 'loadChannels' ||
       queryType === 'refresh' ||
       queryType === 'backgroundRefresh' ||
-      [
-        JSON.stringify(filtersRef.current) !== JSON.stringify(filters),
-        JSON.stringify(sortRef.current) !== JSON.stringify(sort),
-      ].some(Boolean);
+      JSON.stringify(filtersRef.current) !== JSON.stringify(filters) ||
+      JSON.stringify(optionsRef.current) !== JSON.stringify(options) ||
+      JSON.stringify(sortRef.current) !== JSON.stringify(sort);
 
     const isQueryStale = () => !isMountedRef || activeRequestId.current !== currentRequestId;
 
@@ -87,6 +87,7 @@ export const usePaginatedChannels = ({
     }
 
     filtersRef.current = filters;
+    optionsRef.current = options;
     sortRef.current = sort;
     isQueryingRef.current = true;
     activeRequestId.current++;
@@ -146,7 +147,7 @@ export const usePaginatedChannels = ({
   };
 
   /**
-   * Equality check using stringified filters/sort ensure that we don't make un-necessary queryChannels api calls
+   * Equality check using stringified filters/options/sort ensure that we don't make un-necessary queryChannels api calls
    * for the scenario:
    *
    * <ChannelList
@@ -161,6 +162,7 @@ export const usePaginatedChannels = ({
    * in return will trigger useEffect. To avoid this, we can add a value check.
    */
   const filterStr = useMemo(() => JSON.stringify(filters), [filters]);
+  const optionsStr = useMemo(() => JSON.stringify(options), [options]);
   const sortStr = useMemo(() => JSON.stringify(sort), [sort]);
 
   useEffect(() => {
@@ -178,7 +180,7 @@ export const usePaginatedChannels = ({
 
     return () => listener?.unsubscribe?.();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filterStr, sortStr, channelManager]);
+  }, [filterStr, optionsStr, sortStr, channelManager]);
 
   return {
     channelListInitialized,

package/src/store/OfflineDB.ts

@@ -51,8 +51,8 @@ export class OfflineDB extends AbstractOfflineDB {
     api.getChannels({ channelIds: cids, currentUserId: userId });
 
   // TODO: Rename currentUserId -> userId in the next major version as it is technically breaking.
-  getChannelsForQuery = ({ userId, filters, sort }: DBGetChannelsForQueryType) =>
-    api.getChannelsForFilterSort({ currentUserId: userId, filters, sort });
+  getChannelsForQuery = ({ userId, filters, options, sort }: DBGetChannelsForQueryType) =>
+    api.getChannelsForFilterSort({ currentUserId: userId, filters, options, sort });
 
   getAllChannelCids = api.getAllChannelIds;
 

package/src/store/apis/__tests__/channelQueryCids.test.ts

@@ -0,0 +1,55 @@
+import { BetterSqlite } from '../../../test-utils/BetterSqlite';
+import { SqliteClient } from '../../SqliteClient';
+import { selectChannelIdsForFilterSort } from '../queries/selectChannelIdsForFilterSort';
+import { upsertCidsForQuery } from '../upsertCidsForQuery';
+
+describe('channel query cids', () => {
+  beforeEach(async () => {
+    await SqliteClient.initializeDatabase();
+    await BetterSqlite.openDB();
+  });
+
+  afterEach(() => {
+    BetterSqlite.dropAllTables();
+    BetterSqlite.closeDB();
+    jest.clearAllMocks();
+  });
+
+  it('stores separate cid lists for predefined filter queries with the same filters and sort', async () => {
+    await upsertCidsForQuery({
+      cids: ['messaging:channel-1'],
+      filters: {},
+      options: {
+        predefined_filter: 'user_messaging',
+      },
+      sort: {},
+    });
+    await upsertCidsForQuery({
+      cids: ['messaging:channel-2'],
+      filters: {},
+      options: {
+        predefined_filter: 'team_channels',
+      },
+      sort: {},
+    });
+
+    await expect(
+      selectChannelIdsForFilterSort({
+        filters: {},
+        options: {
+          predefined_filter: 'user_messaging',
+        },
+        sort: {},
+      }),
+    ).resolves.toEqual(['messaging:channel-1']);
+    await expect(
+      selectChannelIdsForFilterSort({
+        filters: {},
+        options: {
+          predefined_filter: 'team_channels',
+        },
+        sort: {},
+      }),
+    ).resolves.toEqual(['messaging:channel-2']);
+  });
+});

package/src/store/apis/getChannelsForFilterSort.ts

@@ -1,4 +1,4 @@
-import type { ChannelAPIResponse, ChannelFilters, ChannelSort } from 'stream-chat';
+import type { ChannelAPIResponse, ChannelFilters, ChannelOptions, ChannelSort } from 'stream-chat';
 
 import { getChannels } from './getChannels';
 import { selectChannelIdsForFilterSort } from './queries/selectChannelIdsForFilterSort';
@@ -18,20 +18,24 @@ import { SqliteClient } from '../SqliteClient';
 export const getChannelsForFilterSort = async ({
   currentUserId,
   filters,
+  options,
   sort,
 }: {
   currentUserId: string;
   filters?: ChannelFilters;
+  options?: ChannelOptions;
   sort?: ChannelSort;
 }): Promise<Omit<ChannelAPIResponse, 'duration'>[] | null> => {
-  if (!filters && !sort) {
-    console.warn('Please provide the query (filters/sort) to fetch channels from DB');
+  if (!filters && !sort && !options?.predefined_filter) {
+    console.warn(
+      'Please provide the query (filters/sort/options.predefined_filter) to fetch channels from the DB.',
+    );
     return null;
   }
 
-  SqliteClient.logger?.('info', 'getChannelsForFilterSort', { filters, sort });
+  SqliteClient.logger?.('info', 'getChannelsForFilterSort', { filters, options, sort });
 
-  const channelIds = await selectChannelIdsForFilterSort({ filters, sort });
+  const channelIds = await selectChannelIdsForFilterSort({ filters, options, sort });
 
   if (!channelIds) {
     return null;

package/src/store/apis/queries/selectChannelIdsForFilterSort.ts

@@ -1,4 +1,4 @@
-import type { ChannelFilters, ChannelSort } from 'stream-chat';
+import type { ChannelFilters, ChannelOptions, ChannelSort } from 'stream-chat';
 
 import { createSelectQuery } from '../../sqlite-utils/createSelectQuery';
 import { SqliteClient } from '../../SqliteClient';
@@ -17,12 +17,14 @@ import { convertFilterSortToQuery } from '../utils/convertFilterSortToQuery';
 
 export const selectChannelIdsForFilterSort = async ({
   filters,
+  options,
   sort,
 }: {
   filters?: ChannelFilters;
+  options?: ChannelOptions;
   sort?: ChannelSort;
 }): Promise<string[] | null> => {
-  const query = convertFilterSortToQuery({ filters, sort });
+  const query = convertFilterSortToQuery({ filters, options, sort });
 
   SqliteClient.logger?.('info', 'selectChannelIdsForFilterSort', {
     query,