Update <ChannelList /> after channel freeze/unfreeze with frozen applied filter

Question

I'm trying to build a chat frontend using the stream react components with the return of a ChatPage component that has this structure.

    <ChatConfig config={config}>
      <Chat client={client} customStyles={options?.theme}>
        <ChannelList
          Preview={CustomChannelPreview}
          filters={filters}
          sort={sort}
        />
        <Channel>
          <Window>
            <CustomChannelHeader/>
            <MessageList/>
            <MessageInput Input={CustomMessageInput}/>
          </Window>
          <Thread/>
        </Channel>
      </Chat>
    </ChatConfig>

So there are the channel list and the channel window in the same page where the user con freeze or unfreeze a channel.

The FE of the react application is capable of getting the filters to apply from the window.location.search so that the applied filters let the user view frozen or unfrozen channels only (e.g. {"frozen":{"$eq":false}, .....}).

When a user freezes or unfreezes, is there a way to re-render the channel list after the channel update to match the updated channel state?

Is it possible to do that without reimplementing the whole filtering strategy in the onChannelUpdated function?

Thanks in advance.

Answer 1

The ChannelList component accepts a key prop. When the value of this prop changes, the component re-renders and matches the updated channel state.

In your case, you can keep track of the channel list key state:

const generateUniqueChars = () => {
 // any generation strategy you want here
}

const [channelListKey, setChannelListKey] = useState(generateUniqueChars())

const updateChannelListKey = () => {
  setChannelListKey(generateUniqueChars())
}

Then, you pass the key to the ChannelList component:

<ChannelList key={channelListKey} />

Using React context, or any means you prefer, you can pass the updateChannelListKey function to the component that freezes/unfreezes a channel. When the freeze/unfreeze is triggered, you call the update channel list function, which updates the channel list key state, and re-renders the channel list to match the new state of channels.