How to deselect the selected channel using ChannelListProvider & ChannelListUI

[Problem/Question]
When using ChannelListProvider props disableAutoSelect and onChannelSelect, it would seem typical that one would want to control the select/deselection of the current channel. Works great on first load, doing something like:

<ChannelListProvider
          disableAutoSelect
          onChannelSelect={(channel) => {
            if (channel?.url) {
             // application store, this value is then loaded into ChannelProvider channelUrl and ChannelUI is rendered.
              appChatStore.setChannel(channel.url)
            }
          }}
        >

But then, should you want to “close” the channel, and deselect that channel from the list, I cant see an obvious way to do this. Is it possible?

Is there a way to tap into the uikit dispatcher (channelListDispatcher) from a parent application?


// If problem, please fill out the below. If question, please delete.
3.3.4

Ok I managed to tap into the dispatcher with:

const context = useChannelListContext()

Then there is a method:

<button
  onClick={() => {
    context.channelListDispatcher({
      type: 'SET_CURRENT_CHANNEL',
      payload: null,
    })
  }}
>
  Unselect!
</button>

But for some reason it has been excluded from the exported typescript definitions: sendbird-uikit-react/index.d.ts at 69ab721c5fc60326a46cb530c6b6da858c6436bb · sendbird/sendbird-uikit-react · GitHub

1 Like