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

Author: MartinCupela

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 };

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);