Customizing Channel List Real Time Behavior in Stream React SDK: Filter Only What You Need – getstream.io

Issue Overview

A common challenge when using Stream UI SDKs is maintaining a dynamic and filtered channel list in the application. One particular issue arises when a new channel is created: it appears in the list even if it does not meet the filter criteria. Interestingly, after reloading the page, the filtering works as expected.

For example, if your use case includes more than one channel type — such as one for 1-1 chats (channel type messaging) and another for group chats (channel type group) — you may want each view to display only its respective channel types. If the current view filters only channels of type messaging and the user is added to a group channel, you don’t want the messaging view to display the new group channel. Instead, the new channel should only appear in the relevant group view.

Question: How can you ensure the channel list is updated in real time and only displays channels that match the filter criteria?

Understanding the Default Behavior

The Stream API sends the notification.added_to_channel event whenever a user is added to a new channel. By default, the React SDK listens for this event and adds the new channel to the top of the list, regardless of the applied filters. This default behavior is designed to improve user experience by automatically showing new channels that the user is a member of, but it can disrupt custom filtering logic.

Solution: Customizing the onAddedToChannel Event Handler

To address this issue, you need to override the default behavior of the ChannelList component. The Stream React SDK provides an onAddedToChannel prop, which allows you to define a custom handler for the notification.added_to_channel event. By implementing a custom handler, you can control which channels get added to the list in real time based on your filter criteria.

Filter Criteria

In this example, we are filtering channels based on the following criteria:

 const filters = {

 type: "messaging",

 members: {

 $in: [userId], // Only include channels where the current user is a member
 },

 hidden: false // Exclude hidden channels
 };

Implementation

Below is an example of how to customize the onAddedToChannel behavior to ensure only channels of type messaging are added to the list:

<ChannelList

filters={filters}

options={options}

sort={sort}

onAddedToChannel={async (setChannels, e) => {

const { channel } = e;

console.log("channel", channel)

if (channel.type === filters.type) {
// If it matches, refresh the channel list with your filters

const refreshedChannelList = await chatClient.queryChannels(filters);

setChannels(refreshedChannelList);
 }

 }}
/>

By implementing this solution, you can ensure that each channel list view stays up-to-date and only displays channels that match its filter criteria, providing a seamless and context-specific user experience in your React application.

Additional Resources

For more information, refer to the official Stream documentation:

ChannelList Component Documentation

Related articles