使用 React 在 Sendbird 中创建默认聊天组答案

【问题标题】：Creating default chat groups in Sendbird using React使用 React 在 Sendbird 中创建默认聊天组
【发布时间】：2021-10-06 23:53:00
【问题描述】：

我们已使用 Sendbird 将聊天 UI 集成到项目中。聊天界面现在正在工作，我现在要做的是实现一个功能，其中有 2 个默认聊天组，如下面的模型所示：

我已经浏览了文档，但似乎找不到实现此功能所需的信息。这可以实施吗？有人可以指导我正确的方向吗？


import React, { useEffect, useState, useRef } from 'react';
import { useHistory } from 'react-router-dom';
import { useSelector } from 'react-redux';


import 'sendbird-uikit/dist/index.css';
import { App as SendBirdApp,  } from 'sendbird-uikit';

import { getModuleState as getAuthModuleState } from 'services/auth';
import colorSet from './styled/chatPalette';
import { Chat, ChatContainer, List } from './styled/chatPage';

import ChatGroups from './ChatGroups';

function ChatPage(props) {
  const { theme } = props;
  const history = useHistory();
  const authState = useSelector(getAuthModuleState);
  const userId = authState.username;
  const nickname = authState.username;
  const appId = authState.sendbirdData.appId;
  const accessToken = authState.sendbirdData.accessToken;

  useEffect(() => {
    if (!userId || !nickname) {
      console.error('Error, empty userId or nickname');
    }
  }, [userId, nickname, history]);


  return (
    <ChatContainer>
      <SendBirdApp
        appId={appId}
        userId={userId}
        nickname={nickname}
        colorSet={colorSet}
      />      
      
    </ChatContainer>
  );
}

export default ChatPage;

【问题讨论】：

标签： reactjs sendbird

【解决方案1】：

您可以使用<SendbirdProvider> 组件并在<ChannelList> 组件内提供您的自定义频道预览组件（比如说<ChannelPreview>）。

在您的自定义预览组件 (<ChannelPreview>) 中，您可以根据成员数量 (channel.memberCount) 选择是否显示特定频道，如下所示：

import { Channel, ChannelList, SendBirdProvider } from 'sendbird-uikit';
import 'sendbird-uikit/dist/index.css';
import { useState } from 'react';

const CHANNEL_PREVIEW_MODES = [
  '1-on-1',
  'Group'
]

function ChannelPreview({channel, previewMode}) {
  if (
    (channel.memberCount <=2 && previewMode !== CHANNEL_PREVIEW_MODES[0]) ||
    (channel.memberCount > 2 && previewMode !== CHANNEL_PREVIEW_MODES[1])
    ) {
    return null
  }

  return (
    <div key={channel.url}>
      <img height="20px" width="20px" src={channel.coverUrl}/>
      {channel.url}
    </div>
  )
}

function App() {
  const [previewMode, setPreviewMode] = useState(CHANNEL_PREVIEW_MODES[0])
  const [currentChannel, setCurrentChannel] = useState(null);

  return (
    <div className="App">
      <SendBirdProvider
        userId='<USER_ID>'
        appId='<APP_ID>'
      >
        <div>
          {CHANNEL_PREVIEW_MODES.map(mode =>
            <label className="preview-mode-radio">{mode}
              <input
                type='radio'
                value={mode}
                name='preview-mode'
                onChange={() => setPreviewMode(mode)}
                checked={previewMode === mode}
              />
            </label>
          )}
        </div>
        <ChannelList
          renderChannelPreview={({channel}) => <ChannelPreview channel={channel} previewMode={previewMode} />}
          onChannelSelect={channel => setCurrentChannel(channel)}
        />
        <Channel channelUrl={currentChannel?.url} />
      </SendBirdProvider>
    </div>
  );
}

export default App;

【讨论】：