Multiple Lists

This example will focus on the specific use case where there are two ChannelList components in the same application.

The event listeners of both lists, let’s say A and B, will pick up all new.message events for every channel, regardless of which list the message is sent in. If a message is sent in list B, the event listener in list A will also pick up the new message and bump the impacted channel to the top of the list. This is not the desired result for multiples lists, but there is a correct way to handle the routing of these messages.

channelRenderFilterFn prop

The reason that a channel will automatically be bumped to the top of a list even though it’s not actually part of the list is due to the default behavior. The ChannelList components will retrieve a channel from client.activeChannels if the channel doesn’t already exist.

By using the channelRenderFilterFn prop we can apply custom filtering logic to the list of channels that are rendered. Since we have access to the entire channel object, we can filter on type, custom fields, or other.

const customChannelFilterFunction = (channels: Channel[]) => {
  return channels.filter(/** your custom filter logic */);
};

<ChannelList
  channelRenderFilterFn={customChannelFilterFunction}
  filters={filters}
  sort={sort}
  options={options}
/>;