hieptl

const Channel = (props) => {
  const { channelType, channel, onItemClicked } = props;

  const renderChannelIcon = () => {
    if (channelType === 1) {
      return <svg width="24" height="24" viewBox="0 0 24 24" className="icon-3pNFyS" background="background-6FOJIb"><path className="foreground-SshK2E" fill="currentColor" fillRule="evenodd" clipRule="evenodd" d="M5.88657 21C5.57547 21 5.3399 20.7189 5.39427 20.4126L6.00001 17H2.59511C2.28449 17 2.04905 16.7198 2.10259 16.4138L2.27759 15.4138C2.31946 15.1746 2.52722 15 2.77011 15H6.35001L7.41001 9H4.00511C3.69449 9 3.45905 8.71977 3.51259 8.41381L3.68759 7.41381C3.72946 7.17456 3.93722 7 4.18011 7H7.76001L8.39677 3.41262C8.43914 3.17391 8.64664 3 8.88907 3H9.87344C10.1845 3 10.4201 3.28107 10.3657 3.58738L9.76001 7H15.76L16.3968 3.41262C16.4391 3.17391 16.6466 3 16.8891 3H17.8734C18.1845 3 18.4201 3.28107 18.3657 3.58738L17.76 7H21.1649C21.4755 7 21.711 7.28023 21.6574 7.58619L21.4824 8.58619C21.4406 8.82544 21.2328 9 20.9899 9H17.41L16.35 15H19.7549C20.0655 1

hieptl

import { useState, useRef, useContext } from 'react';
import { v4 as uuidv4 } from "uuid";
import Context from '../../context';
import { realTimeDb } from '../../firebase';

const Create = (props) => {
  const { toggleModal } = props;

  const { user, cometChat, setIsLoading } = useContext(Context);

hieptl

...
const createCometChatGroup = async ({ guid, channelName }) => {
  const group = new cometChat.Group(guid, channelName, 'public', '');
  await cometChat.createGroup(group);
};
...

hieptl

import { useEffect, useContext } from 'react';

import { CometChatMessages } from '../../cometchat-pro-react-ui-kit/CometChatWorkspace/src';
import Header from './Header';
import RightSidebar from './RightSidebar';

import Context from '../../context';

const Main = () => {
  const { cometChat, selectedChannel, selectedChannelType, setSelectedChannelType } = useContext(Context);

hieptl

...
const startDirectCall = () => {
  if (cometChat && selectedChannel && selectedChannelType === 2) {
    const sessionID = selectedChannel.guid;
    const audioOnly = false;
    const defaultLayout = true;

    const callSettings = new cometChat.CallSettingsBuilder()
      .enableDefaultLayout(defaultLayout)
      .setSessionID(sessionID)

hieptl

const Header = () => {
  return (
    <div className="server__main-header">
    </div>
  );
};
export default Header;

hieptl

import { useState, useEffect, useContext, useRef, useCallback } from 'react';
import { v4 as uuidv4 } from "uuid";
import Sidebar from './Sidebar';
import Context from '../../context';

const RightSidebar = () => {
  const [members, setMembers] = useState([]);

  const { cometChat, selectedChannel } = useContext(Context);

hieptl

...
const loadChannelMembers = () => {
  const limit = 30;
  const groupMemberRequest = new cometChat.GroupMembersRequestBuilder(selectedChannel.guid)
    .setLimit(limit)
    .build();

  groupMemberRequest.fetchNext().then(
    groupMembers => {
      setMembers(() => groupMembers);

hieptl

...
useEffect(() => {
  if (cometChat && selectedChannel) {
    listenGroupChanges();
    return () => {
      if (cometChat) {
        cometChat.removeGroupListener(selectedChannel.guid);
      }
    }
  }

hieptl

useEffect(() => {
  if (cometChat && selectedChannel) {
    listenUserPresense();
    return () => {
      if (cometChat) {
        cometChat.removeUserListener(userPresenseListenerId);
      }
    }
  }
}, [cometChat, selectedChannel]);