Custom channellist filter (#678)

* adds optional prop to ChannelList for a custom filter on channels

* adds prop type

* remove debug

* updates test

* updates proptype

* cleanup on types

* cleanup

* rename channelListFilterFunction

Co-authored-by: Amin Mahboubi <[email protected]>

Author: yetieaterxb1

src/components/ChannelList/ChannelList.js

@@ -118,6 +118,10 @@ const ChannelList = (props) => {
     activeChannelHandler,
   );
 
+  const loadedChannels = props.channelRenderFilterFn
+    ? props.channelRenderFilterFn(channels)
+    : channels;
+
   useMobileNavigation(channelListRef, navOpen, closeMobileNav);
 
   // All the event listeners
@@ -216,13 +220,13 @@ const ChannelList = (props) => {
         LoadingIndicator={LoadingIndicator}
         LoadingErrorIndicator={LoadingErrorIndicator}
       >
-        {!channels || channels.length === 0
+        {!loadedChannels || loadedChannels.length === 0
           ? renderEmptyStateIndicator()
           : smartRender(Paginator, {
               loadNextPage,
               hasNextPage,
               refreshing: status.refreshing,
-              children: channels.map((item) => renderChannel(item)),
+              children: loadedChannels.map(renderChannel),
             })}
       </List>
     );
@@ -352,6 +356,13 @@ ChannelList.propTypes = {
    * @param {Event}     event       [Event object](https://getstream.io/chat/docs/event_object/?language=js) corresponding to `channel.deleted` event
    * */
   onChannelDeleted: PropTypes.func,
+  /**
+   * Optional function to filter channels prior to loading in the DOM. Do not use any complex or async logic here that would significantly delay the loading of the ChannelList.
+   * We recommend using a pure function with array methods like filter/sort/reduce.
+   * @param {Array} channels
+   * @returns {Array} channels
+   * */
+  channelRenderFilterFn: /** @type {PropTypes.Validator<(channels: import('stream-chat').Channel[]) => import('stream-chat').Channel[]>} */ (PropTypes.func),
   /**
    * Object containing query filters
    * @see See [Channel query documentation](https://getstream.io/chat/docs/query_channels/?language=js) for a list of available fields for filter.

src/components/ChannelList/__tests__/ChannelList.test.js

@@ -176,6 +176,37 @@ describe('ChannelList', () => {
     });
   });
 
+  it('should only show filtered channels when a filter function prop is provided', async () => {
+    const filteredChannel = generateChannel({ channel: { type: 'filtered' } });
+
+    const customFilterFunction = (channels) => {
+      return channels.filter((channel) => channel.type === 'filtered');
+    };
+
+    const props = {
+      filters: {},
+      Preview: ChannelPreviewComponent,
+      List: ChannelListComponent,
+      channelRenderFilterFn: customFilterFunction,
+    };
+
+    useMockedApis(chatClientUthred, [
+      queryChannelsApi([filteredChannel, testChannel1]),
+    ]);
+
+    const { getByRole, queryAllByRole } = render(
+      <Chat client={chatClientUthred}>
+        <ChannelList {...props} />
+      </Chat>,
+    );
+
+    // Wait for list of channels to load in DOM.
+    await waitFor(() => {
+      expect(getByRole('list')).toBeInTheDocument();
+      expect(queryAllByRole('listitem')).toHaveLength(1);
+    });
+  });
+
   it('should render `LoadingErrorIndicator` when queryChannels api throws error', async () => {
     useMockedApis(chatClientUthred, [erroredGetApi()]);
     jest.spyOn(console, 'warn').mockImplementationOnce(() => null);

types/index.d.ts

@@ -322,6 +322,11 @@ export interface ChannelListProps {
     e: Client.Event,
   ): void;
   setActiveChannelOnMount?: boolean;
+  /**
+   * Optional function to filter channels prior to loading in the DOM. Do not use any complex or async logic here that would significantly delay the loading of the ChannelList.
+   * We recommend using a pure function with array methods like filter/sort/reduce.
+   */
+  channelRenderFilterFn?: (channels: Client.Channel[]) => Client.Channel[];
   /** Object containing query filters */
   filters?: Client.ChannelFilters;
   /** Object containing query options */