feat: reflect predefined filters in the channel list ordering

MartinCupela · MartinCupela · commit cb19a6669950 · 2026-05-18T12:56:27.000+02:00
diff --git a/src/components/ChannelList/ChannelList.tsx b/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
   });
diff --git a/src/components/ChannelList/__tests__/ChannelList.test.tsx b/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', () => {
diff --git a/src/components/ChannelList/hooks/usePaginatedChannels.ts b/src/components/ChannelList/hooks/usePaginatedChannels.ts
@@ -8,6 +8,7 @@ import type {
   ChannelOptions,
   ChannelSort,
   ErrorFromResponse,
+  ParsedPredefinedFilterResponse,
   StreamChat,
 } from 'stream-chat';
 
@@ -34,6 +35,27 @@ export type CustomQueryChannelParams = {
 
 export type CustomQueryChannelsFn = (params: CustomQueryChannelParams) => Promise<void>;
 
+/**
+ * Filters and sort effectively used by the channel list. When `options.predefined_filter`
+ * is set, these reflect the backend-resolved values from `predefined_filter` response
+ * metadata; otherwise they fall back to the caller-supplied `filters`/`sort`.
+ */
+export type EffectiveQueryParams = {
+  filters: ChannelFilters;
+  sort: ChannelSort;
+};
+
+/**
+ * The `predefined_filter` response carries sort as
+ * `[{ field, direction }]`. `ChannelSort` expects `[{ field: direction }]`.
+ */
+const mapPredefinedFilterSortToChannelSort = (
+  sort: NonNullable<ParsedPredefinedFilterResponse['sort']>,
+): ChannelSort =>
+  sort.map(({ direction = 1, field }) => ({
+    [field]: direction,
+  })) as ChannelSort;
+
 export const usePaginatedChannels = (
   client: StreamChat,
   filters: ChannelFilters,
@@ -42,6 +64,7 @@ export const usePaginatedChannels = (
   activeChannelHandler: (
     channels: Array<Channel>,
     setChannels: React.Dispatch<React.SetStateAction<Array<Channel>>>,
+    effectiveQueryParams: EffectiveQueryParams,
   ) => void,
   recoveryThrottleIntervalMs: number = RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS,
   customQueryChannels?: CustomQueryChannelsFn,
@@ -53,6 +76,14 @@ export const usePaginatedChannels = (
   const { t } = useTranslationContext();
   const [channels, setChannels] = useState<Array<Channel>>([]);
   const [hasNextPage, setHasNextPage] = useState(true);
+  // Backend-resolved filter/sort from `predefined_filter` response metadata.
+  // Used to override the caller `filters`/`sort` for local WS-driven list
+  // mutation decisions (archiving, pinning) when a predefined filter is in
+  // use. Stays `undefined` for non-predefined queries.
+  const [responseFilters, setResponseFilters] = useState<ChannelFilters | undefined>(
+    undefined,
+  );
+  const [responseSort, setResponseSort] = useState<ChannelSort | undefined>(undefined);
   const lastRecoveryTimestamp = useRef<number | undefined>(undefined);
 
   const recoveryThrottleInterval =
@@ -82,6 +113,10 @@ export const usePaginatedChannels = (
           setChannels,
           setHasNextPage,
         });
+        // `customQueryChannels` bypasses the SDK response so any previously
+        // resolved predefined-filter metadata is no longer trustworthy.
+        setResponseFilters(undefined);
+        setResponseSort(undefined);
       } else {
         const newOptions = {
           offset,
@@ -92,19 +127,38 @@ export const usePaginatedChannels = (
           filters,
           sort || {},
           newOptions,
+          { withResponse: true },
         );
 
         const newChannels =
           queryType === 'reload'
-            ? channelQueryResponse
-            : uniqBy([...channels, ...channelQueryResponse], 'cid');
+            ? channelQueryResponse.channels
+            : uniqBy([...channels, ...channelQueryResponse.channels], 'cid');
 
         setChannels(newChannels);
-        setHasNextPage(channelQueryResponse.length >= (newOptions.limit ?? 1));
+        setHasNextPage(channelQueryResponse.channels.length >= (newOptions.limit ?? 1));
+
+        // Pull backend-resolved filter/sort from `predefined_filter` metadata so
+        // WS-driven list mutations use the effective semantics. Always reset
+        // first; non-predefined queries do not return this metadata and keeping
+        // stale values would silently change list behavior.
+        const predefinedFilter = channelQueryResponse.predefined_filter;
+        const nextResponseFilters = predefinedFilter
+          ? (predefinedFilter.filter as ChannelFilters)
+          : undefined;
+        const nextResponseSort = predefinedFilter?.sort
+          ? mapPredefinedFilterSortToChannelSort(predefinedFilter.sort)
+          : undefined;
+
+        setResponseFilters(nextResponseFilters);
+        setResponseSort(nextResponseSort);
 
         // Set active channel only on load of first page
         if (!offset && activeChannelHandler) {
-          activeChannelHandler(newChannels, setChannels);
+          activeChannelHandler(newChannels, setChannels, {
+            filters: nextResponseFilters ?? filters,
+            sort: nextResponseSort ?? sort,
+          });
         }
       }
     } catch (error) {
@@ -165,8 +219,17 @@ export const usePaginatedChannels = (
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filterString, sortString]);
 
+  // Effective filters/sort: response-derived values take precedence over
+  // caller-supplied props when a predefined filter is in use. Falls back to
+  // the caller props for non-predefined queries and during the initial load
+  // before the first response.
+  const effectiveFilters = responseFilters ?? filters;
+  const effectiveSort = responseSort ?? sort;
+
   return {
     channels,
+    effectiveFilters,
+    effectiveSort,
     hasNextPage,
     loadNextPage,
     setChannels,
