How can I split up the SBChannelList and SBConversation components into their own views?

Sendbird Chat UIKit
,
1

[Problem/Question]
// Detailed description of issue.
Hi, I am using nextjs and capacitor to create a mobile application. I was trying to get functionality by using the sdk to show the channellist with channellist preview but can’t find the functionality to allow a user to click on the channellist preview and then send them to the group channel that they clicked on using sdk, so i tried using the uikit but the channel list and the group channel view are on the same page and i couldn’t find the functionailty to split them out and see how the SBChannelList and SBConverstation and SBChannelSettings looked on the inside with all the functions. Is there a way to break these out or see exactly what these components are doing ?

// If problem, please fill out the below. If question, please delete.
// What version of the SDK are you using?
“scripts”: {
“codegen”: “graphql-codegen -r ts-node/register”,
“dev”: “yarn codegen && next ./app”,
“dev:site”: “next ./app”,
“build”: “yarn codegen && next build app”,
“test”: “yarn codegen && jest”,
“start”: “next start”
},

“dependencies”: {
“apollo/client”: “^3.5.10”,
“capacitor/android”: “^4.2.0”,
“capacitor/cli”: “latest”,
“capacitor/core”: “latest”,
“capacitor/ios”: “^4.3.0”,
“graphql-tools/load-files”: “6.0.18”,
“graphql-tools/merge”: “6.0.18”,
“graphql-tools/schema”: “6.0.18”,
“graphql-typed-document-node/core”: “^3.1.1”,
“graphql-yoga/node”: “^2.2.1”,
“movn/ui-library”: “^0.2.0”,
“sendbird/chat”: “^4.0.13”,
“sendbird/uikit-react”: “^3.2.3”,
“graphql”: “15.6.0”,
“graphql-tag”: “^2.12.6”,
“moment”: “^2.29.4”,
“next”: “^12.2.4”,
“react”: “^18.2.0”,
“react-dom”: “^18.2.0”,
“recoil”: “^0.7.5”,
“sass”: “^1.55.0”,
“sendbird”: “^3.1.27”
},
“devDependencies”: {
“graphql-codegen/cli”: “^2.6.2”,
“graphql-codegen/typed-document-node”: “^2.2.8”,
“graphql-codegen/typescript”: “^2.4.8”,
“graphql-codegen/typescript-operations”: “^2.3.5”,
“graphql-codegen/typescript-resolvers”: “^2.6.1”,
“movn/prettier-config”: “^1.0.2”,
“types/jest”: “^27.0.2”,
“types/mocha”: “^9.0.0”,
“types/node”: “18.7.1”,
“types/react”: “18.0.17”,
“types/react-dom”: “^18.0.6”,
“types/react-test-renderer”: “^17.0.1”,
“babel-jest”: “27.2.5”,
“jest”: “^27.2.5”,
“prettier”: “2.7.1”,
“react-test-renderer”: “^17.0.1”,
“ts-node”: “10.8.0”,
“typescript”: “^4.7.4”,
“yaml-loader”: “0.6.0”
},
“packageManager”: “yarn@3.2.4”,
“volta”: {
“node”: “16.17.1”,
“yarn”: “1.22.19”
}
[Reproduction Steps]
// Please provide reproduction steps and, if possible, code snippets.
in a utils file i initialized the sdk but in another component i tried just using the uikit-react with SBProvider as seen in examples.
[Frequency]
// How frequently is this issue occurring?
all the time
[Current impact]
// How is this currently impacting your implementation?
It has blocked me from moving forward.

==== here’s one page
import NoMessages from ‘…/components/atoms/NoMessages’
import { useSetRecoilState } from ‘recoil’
import { pageTitleAndCount } from ‘…/components/organisms/MessageList’
import Messages from ‘…/components/organisms/Messages’
import SBProvider from “@sendbird/uikit-react/SendbirdProvider”;
import “@sendbird/uikit-react/dist/index.css”;
import { APP_ID, USER_ID, NICKNAME } from ‘…/util/chatUtils’;
const Channels = () => {
const setTitle = useSetRecoilState(pageTitleAndCount)
setTitle({title: ‘Channels’, count: null})

return (
    <SBProvider appId={APP_ID} userId={USER_ID} nickname={NICKNAME} >
        <Messages />
    </SBProvider>
)

}
export default Channels
and the initialization of sdk
const params: GroupChannelListQueryParams = {
includeEmpty: true,
myMemberStateFilter: MyMemberStateFilter.JOINED,
order: GroupChannelListOrder.LATEST_LAST_MESSAGE,
limit: 15
}
const getChannels = async (sb) => {
const query: GroupChannelListQuery = sb.groupChannel.createMyGroupChannelListQuery(params);
if(query.hasNext) {
const channels: GroupChannel = await query.next()
return channels
}
return ;
}
const initializeChat = () => SendbirdChat.init({
appId: APP_ID,
modules: [
new GroupChannelModule(),
],
}) as SendbirdGroupChat;

const initializeChatUser = async (sb) => sb.connect(USER_ID)

export { initializeChat, initializeChatUser, getChannels, APP_ID, USER_ID, NICKNAME }
======= and where i call it
const MessageList = (props) => {
const sb = initializeChat()
console.log(‘sb’, sb);
const [{title, count}, setCount] = useRecoilState(pageTitleAndCount)
const [channels, setChannels] = useRecoilState(channelState)
const [user,setUser] = useState(‘’)
const initializeChatHandler = async () => {
try {
setUser(await initializeChatUser(sb))
setChannels(await getChannels(sb))
const count = await sb.groupChannel.getTotalUnreadMessageCount()
setCount({
title: ‘Messages’,
count: count,
})
} catch (err) {
throw err
}
}
useEffect(() => {
initializeChatHandler()
},);

2

I figured it out, closing this out…