feat: reflect predefined filters in the channel list ordering

package.json

@@ -103,7 +103,7 @@
     "emoji-mart": "^5.4.0",
     "react": "^19.0.0 || ^18.0.0 || ^17.0.0",
     "react-dom": "^19.0.0 || ^18.0.0 || ^17.0.0",
-    "stream-chat": "^9.43.0",
+    "stream-chat": "^9.44.2",
     "modern-normalize": "^3.0.1"
   },
   "peerDependenciesMeta": {
@@ -174,7 +174,7 @@
     "react-dom": "^19.0.0",
     "sass": "^1.97.2",
     "semantic-release": "^25.0.3",
-    "stream-chat": "^9.43.0",
+    "stream-chat": "^9.44.2",
     "typescript": "^5.4.5",
     "typescript-eslint": "^8.17.0",
     "vite": "^7.3.1",

src/components/ChannelList/ChannelList.tsx

@@ -11,7 +11,10 @@ import type {
 } from 'stream-chat';
 
 import { useConnectionRecoveredListener } from './hooks/useConnectionRecoveredListener';
-import type { CustomQueryChannelsFn } from './hooks/usePaginatedChannels';
+import type {
+  CustomQueryChannelsFn,
+  EffectiveQueryParams,
+} from './hooks/usePaginatedChannels';
 import { usePaginatedChannels } from './hooks/usePaginatedChannels';
 import {
   useChannelListShape,
@@ -211,6 +214,7 @@ const UnMemoizedChannelList = (props: ChannelListProps) => {
   const activeChannelHandler = async (
     channels: Array<Channel>,
     setChannels: React.Dispatch<React.SetStateAction<Array<Channel>>>,
+    effectiveQueryParams: EffectiveQueryParams,
   ) => {
     if (!channels.length) {
       return;
@@ -234,7 +238,7 @@ const UnMemoizedChannelList = (props: ChannelListProps) => {
         const newChannels = moveChannelUpwards({
           channels,
           channelToMove: customActiveChannelObject,
-          sort,
+          sort: effectiveQueryParams.sort,
         });
 
         setChannels(newChannels);
@@ -253,7 +257,14 @@ const UnMemoizedChannelList = (props: ChannelListProps) => {
    */
   const forceUpdate = useCallback(() => setChannelUpdateCount((count) => count + 1), []);
 
-  const { channels, hasNextPage, loadNextPage, setChannels } = usePaginatedChannels(
+  const {
+    channels,
+    effectiveFilters,
+    effectiveSort,
+    hasNextPage,
+    loadNextPage,
+    setChannels,
+  } = usePaginatedChannels(
     client,
     filters || DEFAULT_FILTERS,
     sort || DEFAULT_SORT,
@@ -269,7 +280,11 @@ const UnMemoizedChannelList = (props: ChannelListProps) => {
 
   const { customHandler, defaultHandler } = usePrepareShapeHandlers({
     allowNewMessagesFromUnfilteredChannels,
-    filters,
+    // `effectiveFilters`/`effectiveSort` reflect the backend-resolved
+    // `predefined_filter` metadata when `options.predefined_filter` is in use.
+    // For non-predefined queries they fall back to the caller-supplied
+    // `filters`/`sort` props so behavior is unchanged.
+    filters: effectiveFilters,
     lockChannelOrder,
     onAddedToChannel,
     onChannelDeleted,
@@ -281,7 +296,7 @@ const UnMemoizedChannelList = (props: ChannelListProps) => {
     onMessageNewHandler,
     onRemovedFromChannel,
     setChannels,
-    sort,
+    sort: effectiveSort,
     // TODO: implement
     // customHandleChannelListShape
   });

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

@@ -1876,6 +1876,192 @@ describe('ChannelList', () => {
         expect(results).toHaveNoViolations();
       });
     });
+
+    describe('predefined_filter response metadata', () => {
+      // Resolved `predefined_filter` from queryChannels response overrides the
+      // caller-supplied `filters`/`sort` props for local WS-driven channel list
+      // mutation decisions. See stream-chat PR #1747 for the underlying SDK
+      // change.
+
+      const mockQueryChannelsResponseWithPredefinedFilter = ({
+        channels,
+        filter,
+        sort,
+      }: {
+        channels: ChannelAPIResponse[];
+        filter: Record<string, unknown>;
+        sort?: { direction?: 1 | -1; field: string }[];
+      }) => {
+        (vi.spyOn(chatClient.axiosInstance, 'post') as unknown as Mock).mockResolvedValue(
+          {
+            data: {
+              channels,
+              duration: '0.01ms',
+              predefined_filter: {
+                filter,
+                name: 'messaging_channels',
+                sort,
+              },
+            },
+            status: 200,
+          },
+        );
+      };
+
+      const channelListProps = {
+        filters: {},
+        options: {
+          limit: 25,
+          message_limit: 25,
+          predefined_filter: 'messaging_channels',
+        },
+      };
+
+      it('does not promote an archived channel when resolved filter excludes archived', async () => {
+        mockQueryChannelsResponseWithPredefinedFilter({
+          channels: [testChannel1, testChannel2, testChannel3],
+          filter: { archived: false },
+        });
+
+        const { getAllByRole, getByRole } = await render(
+          <Chat client={chatClient}>
+            <WithComponents
+              overrides={{
+                ChannelListItemUI: ChannelPreviewComponent,
+                ChannelListUI: ChannelListComponent,
+              }}
+            >
+              <ChannelList {...channelListProps} />
+            </WithComponents>
+          </Chat>,
+        );
+
+        await waitFor(() => {
+          expect(getByRole('list')).toBeInTheDocument();
+        });
+
+        // Mark target channel as archived after it has been loaded into the
+        // list so the response is still "non-archived" but local state for the
+        // channel is archived.
+        const targetChannel = chatClient.activeChannels[testChannel3.channel.cid];
+        targetChannel.state.membership = {
+          archived_at: '2024-01-15T10:30:00Z',
+        };
+
+        const itemsBefore = getAllByRole('listitem').map((el) =>
+          el.getAttribute('data-testid'),
+        );
+
+        await act(() => {
+          dispatchMessageNewEvent(
+            chatClient,
+            generateMessage({ user: generateUser() }),
+            testChannel3.channel,
+          );
+        });
+
+        const itemsAfter = getAllByRole('listitem').map((el) =>
+          el.getAttribute('data-testid'),
+        );
+
+        expect(itemsAfter).toStrictEqual(itemsBefore);
+      });
+
+      it('does not move a pinned channel when resolved sort considers pinned_at', async () => {
+        mockQueryChannelsResponseWithPredefinedFilter({
+          channels: [testChannel1, testChannel2, testChannel3],
+          filter: {},
+          sort: [{ direction: -1, field: 'pinned_at' }],
+        });
+
+        const { getAllByRole, getByRole } = await render(
+          <Chat client={chatClient}>
+            <WithComponents
+              overrides={{
+                ChannelListItemUI: ChannelPreviewComponent,
+                ChannelListUI: ChannelListComponent,
+              }}
+            >
+              <ChannelList {...channelListProps} />
+            </WithComponents>
+          </Chat>,
+        );
+
+        await waitFor(() => {
+          expect(getByRole('list')).toBeInTheDocument();
+        });
+
+        // Mark target channel as pinned in local state after it has been
+        // loaded.
+        const targetChannel = chatClient.activeChannels[testChannel3.channel.cid];
+        targetChannel.state.membership = {
+          pinned_at: '2024-01-15T10:30:00Z',
+        };
+
+        const itemsBefore = getAllByRole('listitem').map((el) =>
+          el.getAttribute('data-testid'),
+        );
+
+        await act(() => {
+          dispatchMessageNewEvent(
+            chatClient,
+            generateMessage({ user: generateUser() }),
+            testChannel3.channel,
+          );
+        });
+
+        const itemsAfter = getAllByRole('listitem').map((el) =>
+          el.getAttribute('data-testid'),
+        );
+
+        expect(itemsAfter).toStrictEqual(itemsBefore);
+      });
+
+      it('falls back to caller filters/sort when response has no predefined_filter', async () => {
+        useMockedApis(chatClient, [
+          queryChannelsApi([testChannel1, testChannel2, testChannel3]),
+        ]);
+
+        const { getAllByRole, getByRole, getByText } = await render(
+          <Chat client={chatClient}>
+            <WithComponents
+              overrides={{
+                ChannelListItemUI: ChannelPreviewComponent,
+                ChannelListUI: ChannelListComponent,
+              }}
+            >
+              <ChannelList filters={{}} options={{ limit: 25, message_limit: 25 }} />
+            </WithComponents>
+          </Chat>,
+        );
+
+        await waitFor(() => {
+          expect(getByRole('list')).toBeInTheDocument();
+        });
+
+        // Even with archived local membership, the absence of an effective
+        // `archived` filter means the channel should still be promoted.
+        const targetChannel = chatClient.activeChannels[testChannel3.channel.cid];
+        targetChannel.state.membership = {
+          archived_at: '2024-01-15T10:30:00Z',
+        };
+
+        const newMessage = generateMessage({ user: generateUser() });
+        await act(() => {
+          dispatchMessageNewEvent(chatClient, newMessage, testChannel3.channel);
+        });
+
+        await waitFor(() => {
+          expect(getByText(newMessage.text)).toBeInTheDocument();
+        });
+
+        const items = getAllByRole('listitem');
+        const channelPreview = getByText(newMessage.text).closest(
+          ROLE_LIST_ITEM_SELECTOR,
+        );
+        expect(channelPreview?.isEqualNode(items[0])).toBe(true);
+      });
+    });
   });
 
   describe('on connection recovery', () => {