[Problem/Question]
// Detailed description of issue.
In development environments, the Create Channel button disappears, but after deployment, the button is still there.
// If problem, please fill out the below. If question, please delete.
[UIKit Version]
// What version of the SDK are you using?
"@sendbird/uikit-react": "^3.14.0",
[Reproduction Steps]
// Please provide reproduction steps and, if possible, code snippets.
// components/chat/index.tsx
import dynamic from "next/dynamic";
import ChatList from "./list";
import ChatChannel from "./channel";
const ChatProvider = dynamic(() => import("components/Chat/provider"), {
ssr: false,
loading: () => <p>...</p>,
});
const Chat = ({ appId, userId, nickname, profileUrl, channelUrl, selectChannel }) => (
<ChatProvider {...{ appId, userId, nickname, profileUrl }}>
<ChatList {...{ channelUrl, selectChannel }} />
<ChatChannel {...{ channelUrl }} />
</ChatProvider>
);
export default Chat;
// components/chat/provider.tsx
import SendbirdProvider from "@sendbird/uikit-react/SendbirdProvider";
const ChatProvider = ({ appId, userId, nickname, profileUrl, children }) => (
<SendbirdProvider {...{ appId, userId, nickname, profileUrl }}>{children}</SendbirdProvider>
);
export default ChatProvider;
// components/chat/list.tsx
import { GroupChannelList } from "@sendbird/uikit-react/GroupChannelList";
import { GroupChannel } from "@sendbird/chat/groupChannel";
const ChatList = ({ channelUrl, selectChannel }: ChatListComponentProps) => (
<GroupChannelList
disableAutoSelect
{...{
selectedChannelUrl: channelUrl,
onChannelCreated: () => {},
onChannelSelect: selectChannel,
allowProfileEdit: false,
}}
/>
);
type ChatListComponentProps = {
channelUrl: string;
selectChannel(channel: GroupChannel): void;
};
export default ChatList;
// components/chat/channel.tsx
import { GroupChannel } from "@sendbird/uikit-react/GroupChannel";
const ChatChannel = ({ channelUrl }: ChatChannelComponentProps) => (
<GroupChannel {...{ channelUrl }} />
);
type ChatChannelComponentProps = {
channelUrl: string;
};
export default ChatChannel;
// pages/chat/index.tsx
// ...
const CardBodyStyleProps: GridProps = {
flexWrap: "nowrap",
height: 1,
width: 1,
pb: 7,
sx: {
".sendbird-channel-list": {
border: "1px solid rgba(0, 0, 0, 0.12)",
borderRight: "none",
},
".sendbird-conversation": {
border: "1px solid rgba(0, 0, 0, 0.12)",
},
".sendbird-channel-list__body": {
scrollbarWidth: "none",
},
".sendbird-channel-header": {
borderRight: "1px solid rgba(0, 0, 0, 0.12)",
},
// This was the actual class name for the Create channel icon button. I checked it in my browser.
".sendbird-ui-header__right .sendbird-ui-header--is-desktop": {
display: "none",
},
".sendbird-channel-header .sendbird-channel-header__right-icon": {
display: "none",
},
},
};
// ...
<Grid container {...CardBodyStyleProps}>
<Chat
{...{
appId: sendbirdApplicationID,
userId: sendbirdUserId,
nickname: sendbirdNickname,
profileUrl: sendbirdProfileUrl,
channelUrl,
selectChannel,
}}
/>
</Grid>
// ...
[Frequency]
// How frequently is this issue occurring?
I always have the same issue after deployment.
[Current impact]
// How is this currently impacting your implementation?
I need to restrict users from creating channels, but I can’t.