fix: on pagination keep a unique list of channels in the ChannelList (#…

…2115)
GetStream · Oct 6, 2023 · 11173e1 · 11173e1
1 parent db18efd
commit 11173e1
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 1 deletion.
diff --git a/src/components/ChannelList/__tests__/ChannelList.test.js b/src/components/ChannelList/__tests__/ChannelList.test.js
@@ -324,6 +324,35 @@ describe('ChannelList', () => {
     expect(results).toHaveNoViolations();
   });
 
+  it('should show unique channels', async () => {
+    useMockedApis(chatClientUthred, [queryChannelsApi([testChannel1, testChannel2])]);
+    const ChannelPreview = (props) => <div data-testid={props.channel.id} role='listitem' />;
+    render(
+      <Chat client={chatClientUthred}>
+        <ChannelList filters={{}} options={{ limit: 2 }} Preview={ChannelPreview} />
+      </Chat>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId(testChannel1.channel.id)).toBeInTheDocument();
+      expect(screen.getByTestId(testChannel2.channel.id)).toBeInTheDocument();
+      expect(screen.getAllByRole('listitem')).toHaveLength(2);
+    });
+
+    useMockedApis(chatClientUthred, [queryChannelsApi([testChannel1, testChannel3])]);
+
+    await act(() => {
+      fireEvent.click(screen.getByTestId('load-more-button'));
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId(testChannel1.channel.id)).toBeInTheDocument();
+      expect(screen.getByTestId(testChannel2.channel.id)).toBeInTheDocument();
+      expect(screen.getByTestId(testChannel3.channel.id)).toBeInTheDocument();
+      expect(screen.getAllByRole('listitem')).toHaveLength(3);
+    });
+  });
+
   describe('Default and custom active channel', () => {
     let setActiveChannel;
     const watchersConfig = { limit: 20, offset: 0 };

diff --git a/src/components/ChannelList/hooks/usePaginatedChannels.ts b/src/components/ChannelList/hooks/usePaginatedChannels.ts
@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
+import uniqBy from 'lodash.uniqby';
 
 import { MAX_QUERY_CHANNELS_LIMIT } from '../utils';
 
@@ -52,7 +53,9 @@ export const usePaginatedChannels = <
       const channelQueryResponse = await client.queryChannels(filters, sort || {}, newOptions);
 
       const newChannels =
-        queryType === 'reload' ? channelQueryResponse : [...channels, ...channelQueryResponse];
+        queryType === 'reload'
+          ? channelQueryResponse
+          : uniqBy([...channels, ...channelQueryResponse], 'cid');
 
       setChannels(newChannels);
       setHasNextPage(channelQueryResponse.length >= newOptions.limit);