Setting initial channel

Sendbird Chat UIKit React
, ,
1

Hi all,

I’m trying to find a way to automatically set the initial channel when loading the page (use case is so that we can link directly to certain channels). I’m using the Channel and ChannelList components, with a stateful currentChannelUrl variable - it’s pretty much all the same as the sample app.

I can pass a channel URL and update the currentChannelUrl variable, but I’m finding that the ChanneList automatically triggers onChannelSelect (sometimes multiple times) with the top channel in the list. So even if I set it to an initial value, something is automatically resetting it to the top value when the channel list loads. I haven’t found a way around this without hacky ideas like ignoring the onChannelSelect call for the first X times. It seems to be triggered twice, but I don’t know why or if it that’s consistent

Any thoughts? Is there a way to prevent it from automatically triggering on its own when loading the component?

I’m using the react UI Kit version 2.2.1.

Thanks!

2 Likes
2

Hi @kevinkasson,

Looking at the code, it doesn’t look like there is a way to prevent it from firing. onChannelSelect is fired in a useEffect() when initially loaded and selects a channel based on the loaded channel list.

Using a sandbox created by @Sravan_S, I was able to use a react hook that the UIKit exposes to grab the sdk instance:

const context = useSendbirdStateContext();
const sdkInstance = sendBirdSelectors.getSdk(context);

Using this, I was able to alter the onChannelSelect() to only update the channel after the SDK is initialized:

<SBChannelList
  onChannelSelect={(channel) => {
    if (channel && channel.url && sdkInstance.initialized) {
      setCurrentChannelUrl(channel.url);
    }
  }}
/>

Here is the sandbox I used, where you can test it:

3

Thanks, that seems to work. It doesn’t highlight the new channel in the ChannelList, but that’s a separate issue. I think I can move forward from here.

4

Is there a way we can pass an initially selected channel? I would like for it to be highlighted with the channel I navigate to. I am not seeing a channelUrl prop on this component. Thanks!

5

There is not a way to pass in an initially selected channel, which is why we had to look at a potential workaround for Kevin. The channel likely cannot be highlighted without actually clicking on the channel as there is some deeper logic that is not exposed.

6

Any chance it will be exposed in a future version?

7

In the code sandbox, sdkInstance.initialized is always undefined so the workaround actually just breaks channel selecting.

8

We need this functionality also. It seems odd not being able to decide when to load a channel or not.

9

An alternate solution is to use the sortChannelList param. When this is provided, the ChannelList component will select the first item in your list.

There is an example of this here

It still seems odd the ability to set an initial channel is not supported out of the box by ChannelList.
How might a PR be raised to support this? Do any dev’s at sendbird have a preferred solution for a proper fix?

Cheers!

10

I’m still stuck at this problem. Does anyone have any solution?

11

I was experiencing this problem and it ended up being related to passing a value for the queries prop to the ChannelList component.

I found the solution here: IncludeEmpty option is re-rendering the ChannelList - #9 by Jared