Creating default chat groups in Sendbird using React

Question

We've integrated a chat UI into a project using Sendbird. The chat interface is now working and what I am trying to do now is implement a feature where there are 2 default chat groups as shown in the mockup below:

I have already gone through the docs but I can’t seem to find the information I need to implement this feature. Can this be implemented? can someone guide me to the right direction, please?


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;

score 1 · Answer 1 · answered Oct 06 '21 at 15:53

you can use the <SendbirdProvider> component and provide your custom channel preview component (let's say <ChannelPreview>) inside the <ChannelList> component.

Within your custom preview component (<ChannelPreview>) you can choose wether or not to show a specific channel based on its member count (channel.memberCount) as shown below:

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;

Creating default chat groups in Sendbird using React

1 Answers1