Hiding Channels Based on channel type using metadata

[mahijendra]

Motivation
In my project, I'm working with a chat feature that involves multiple roles, let's call them Role A and Role B, each having their own channels for one-on-one conversations. We recently introduced a new group messaging feature that combines users from both roles. In our channel data, we utilize metadata to differentiate between one-on-one and group conversations with fields like:

{
  "conversationType": "one_on_one",
  "roleOwnerType": "RoleA"
}

and for group messaging:

{
  "roleOwnerType": "RoleB",
  "conversationType": "group"
}

My Question:

Is there a way, using stream-chat-react, to conditionally hide all one-on-one channels when at least one group channel exists? I'm interested in implementing logic that checks the conversationType within each channel's metadata and adjusts channel visibility accordingly. Specifically, if a user has access to a "group" type channel, we'd like to hide "one_on_one" channels from the view to streamline their experience.

What I'm Looking For:

Guidelines or existing features within stream-chat-react that support this kind of dynamic channel visibility based on metadata.
Examples or suggestions on how to implement this, assuming it's possible with the current capabilities of the library.
Any considerations or best practices when attempting to hide channels conditionally to ensure a seamless user experience and maintain performance.

Additional Details:

I'm trying understand how to query channels and use filters, also I'm uncertain how to apply this dynamically based on the presence of certain channel types.

This is how I'm currently trying to filter out, but it doesn't give anything

const groupChannelsFilter = {
        type: 'messaging',
        'data.metadata.conversationType': 'group',
      };

      const groupChannels = await streamClient.queryChannels({
        groupChannelsFilter,
      });

Thank you in advance for any insights or advice you can provide!

[MartinCupela]

Hello @mahijendra , you can customize the channels rendering by passing custom renderChannels function to ChannelList component

The function has the following signature:

(
    channels: Channel<StreamChatGenerics>[],
    channelPreview: (item: Channel<StreamChatGenerics>) => React.ReactNode,
  ) => React.ReactNode;

[mahijendra]

Hello @mahijendra , you can customize the channels rendering by passing custom renderChannels function to ChannelList component

The function has the following signature:

(
    channels: Channel<StreamChatGenerics>[],
    channelPreview: (item: Channel<StreamChatGenerics>) => React.ReactNode,
  ) => React.ReactNode;

Yes thanks, it worked