Setting initial channel

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!

1 Like

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:

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.

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!

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.

Any chance it will be exposed in a future version?

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