Creating chat group menu

Sendbird Chat API/SDK JavaScript
1

Hey community,

I am trying to implement a feature where other than being able to create a channel there are default chat group in the chat UI interface as shown in the mockup below:

image
image734×616 87.9 KB

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? or can someone guide me to the right direction, please?

Here is the code so far:


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]);

  const [showSettings, setShowSettings] = useState(false);
  const [currentChannelUrl, setCurrentChannelUrl] = useState(null);

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

export default ChatPage;
2

Hi @developing_Developer,

Welcome to the Sendbird community. This is something that could be implemented in a few ways.

The likely best way to handle this along side of the UIKit would be to automatically join these users to certain channels on creation though, do keep in mind that a user can only be a member of up to 2,000 channels, and each channel will have its own membership limitations.

If you were not using the UIKit, you’d be able to handle this differently because you’d have more control over the types of queries you utilize, however the channel_list in the UIKit utilizes the myGroupChannelListQuery meaning it will only return channels that the user is joined to.