Skip to content

Instantly share code, notes, and snippets.

@handleman
Last active October 30, 2022 11:11
Show Gist options
  • Save handleman/1fbb64084292691f7736c38291633c24 to your computer and use it in GitHub Desktop.
Save handleman/1fbb64084292691f7736c38291633c24 to your computer and use it in GitHub Desktop.
sendbird chat customized
import SendbirdProvider from "@sendbird/uikit-react/SendbirdProvider";
import CustomizedScreen from './ChatScreen';
import "@sendbird/uikit-react/dist/index.css";
const APP_ID = 'FFFFF-20ED-4624-84C6-FFFFFFF';
const USER_ID = 'pavel-test-666';
const isSSR = () => typeof window === 'undefined';
export const Chat = () => {
return (
<div className="Chat">
{
<SendbirdProvider
// Add the two lines below.
appId={APP_ID} // Specify your Sendbird application ID.
userId={USER_ID} // Specify your user ID.
>
<CustomizedScreen />
</SendbirdProvider>
}
</div>
);
};
import React, { useState, useCallback } from 'react';
import SBConversation from '@sendbird/uikit-react/Channel';
import SBChannelList from '@sendbird/uikit-react/ChannelList';
import SBChannelSettings from '@sendbird/uikit-react/ChannelSettings';
import withSendbird from '@sendbird/uikit-react/withSendbird';
function ChatScreen(props) {
const {
stores: { sdkStore, userStore },
config: {
isOnline,
userId,
appId,
accessToken,
theme,
userListQuery,
logger,
pubSub,
}
} = props
const logDefaultProps = useCallback(() => {
console.log(
"SDK store list log",
sdkStore.initialized,
sdkStore.sdk,
sdkStore.loading,
sdkStore.error
);
console.log(
"User store list log",
userStore.initialized,
userStore.user,
userStore.loading
);
console.log(
"Config list log",
isOnline,
userId,
appId,
accessToken,
theme,
userListQuery,
logger,
pubSub
);
}, [
sdkStore.initialized,
sdkStore.sdk,
sdkStore.loading,
sdkStore.error,
userStore.initialized,
userStore.user,
userStore.loading,
isOnline,
userId,
appId,
accessToken,
theme,
userListQuery,
logger,
pubSub
]);
logDefaultProps();
const [showSettings, setShowSettings] = useState(false);
const [currentChannelUrl, setCurrentChannelUrl] = useState('');
return (
<div className="customized-app">
<div className='sendbird-app__wrap'>
<div className='sendbird-app__channellist-wrap'>
<SBChannelList
onChannelSelect={(channel) => {
if (channel && channel.url) {
setCurrentChannelUrl(channel.url);
}
}}
/>
</div>
<div className='sendbird-app__conversation-wrap'>
<SBConversation
channelUrl={currentChannelUrl}
onChatHeaderActionClick={() => {
setShowSettings(true);
}}
/>
</div>
</div>
{showSettings && (
<div className='sendbird-app__settingspanel-wrap'>
<SBChannelSettings
channelUrl={currentChannelUrl}
onCloseClick={() => {
setShowSettings(false);
}}
/>
</div>
)}
</div>
);
};
export default withSendbird(ChatScreen);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment