hieptl

const SubHeader = (props) => {
  const { title } = props;

  return (
    <div className="friends__sub-header">
      <span>{title}</span>
    </div>
  );
};
export default SubHeader;

hieptl

const Pending = (props) => {
  const { user, onAccepted, onRejected } = props;

  const accept = () => {
    onAccepted(user);
  };

  const reject = () => {
    onRejected(user);
  };

hieptl

...
const loginCometChat = (user) => {
  const authKey = `${process.env.REACT_APP_COMETCHAT_AUTH_KEY}`;

  cometChat.login(user.id, authKey).then(
    User => {
      localStorage.setItem('auth', JSON.stringify(user));

      setUser(user);
      setIsLoading(false);

hieptl

const createCometChatAccount = ({ userUuid, fullname, userAvatar }) => {
  const authKey = `${process.env.REACT_APP_COMETCHAT_AUTH_KEY}`;
  const user = new cometChat.User(userUuid);
  user.setName(fullname);
  user.setAvatar(userAvatar);

  cometChat.createUser(user, authKey).then(
    user => {
      setIsLoading(false);
    }, error => {

hieptl

...
useEffect(() => {
  ...
  if (cometChat && user) {
    listenCustomMessages();
  }
  return () => {
    ...
    if (cometChat) {
      cometChat.removeMessageListener(user.id);

hieptl

...
const sendCustomMessage = ({ message, type, receiverId }) => {
  const receiverID = receiverId;
  const customType = type;
  const receiverType = cometChat.RECEIVER_TYPE.USER;
  const customData = {
    message
  };
  const customMessage = new cometChat.CustomMessage(
    receiverID,

hieptl

import { useEffect, useContext } from 'react';
import Sidebars from './Sidebars';
import Main from './Main';
import Context from '../../context';

const Server = () => {
  const { setSelectedChannel } = useContext(Context);

  useEffect(() => {
    return () => {

hieptl

import { useState, useEffect, useContext } from 'react';
import withModal from '../common/Modal';
import Create from '../channel/Create';
import Channels from '../channel/Channels';
import Context from '../../context';
import { realTimeDb } from '../../firebase';

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

hieptl

...
useEffect(() => {
  if (cometChat) {
    listenCustomMessages();
  }
  return () => {
    if (cometChat) {
      cometChat.removeMessageListener(user.id);
    }
  }

hieptl

import { useState } from "react";
import Channel from './Channel';

const Channels = (props) => {
  const { title, channelType, channels, onItemClicked } = props;

  const [isExpanded, setIsExpanded] = useState(false);

  const toggleExpand = () => {
    setIsExpanded(previous => !previous);