Obtain a list of user channels from the useSendbirdStateContext hook

Sendbird Chat API/SDK JavaScript
1

Hello,
In a component nested inside a <SendbirdProvider>...</> I’m using the hook to access the senbird instance.
I would like to obtain a list of all the user’s channels (and their url’s) via hook, how can I do that?


// Note this component is nested inside the provider
const UserChannels = () =>{
 const state = useSendbirdStateContext();
 console.log("my state context", state)

 return (
   <div>hello</div>
 )
}

I do obtain the following object containing the sdk instances and the user store but it’s not obvious which selector (or which nested field?) I should use to get the list of GroupChannels of the currentUser.

{
config: {...}.
stores: { sdkStore: {...}, userStore: {}}
}

How can I extrat the list of group channels for the current user via hook?

Thanks

2

Hi @Toni_U

One way you can do this is to use the state context to get Sendbird selectors back, which can then be used to create a GroupChannelListQuery like in this example:

import React, { useEffect, useState } from 'react'
import { sendBirdSelectors, useSendbirdStateContext } from 'sendbird-uikit';

const Component = () => {
  const context = useSendbirdStateContext()
  const sdkInstance = sendBirdSelectors.getSdk(context)
  const [groupChannels, setGroupChannels] = useState(null)

  useEffect(() => {
    if (sdkInstance && sdkInstance.GroupChannel) {
      const query = sdkInstance.GroupChannel.createMyGroupChannelListQuery()
      query.includeEmpty = true;
      query.next((_groupChannels, error) => {
        if (error) {
          console.error("GroupChannelListQuery Error: ", error)
          return
        }
        setGroupChannels(_groupChannels)
      })
    }
  }, [sdkInstance])

// ...

Finally you should be able to map through groupChannels variable in the state above and access the url property.
(More general information in the docs about retrieving a group channels list)

Hopefully this helps,
Charis