hieptl

import { useContext } from "react";

import { useHistory } from 'react-router-dom';

import Context from "../context";

const Header = () => {
  const { user, setUser, eThree, cometChat } = useContext(Context);

  const history = useHistory();

hieptl

...
useEffect(() => {
  initCometChat();
}, []);

const initCometChat = async () => {
  const { CometChat } = await import('@cometchat-pro/chat');
  const appID = `${process.env.REACT_APP_COMETCHAT_APP_ID}`;
  const region = `${process.env.REACT_APP_COMETCHAT_REGION}`;
  const appSetting = new CometChat.AppSettingsBuilder().subscribePresenceForAllUsers().setRegion(region).build();

hieptl

import firebase from "firebase";
import "firebase/storage";

const firebaseConfig = {
  apiKey: `${process.env.REACT_APP_FIREBASE_API_KEY}`,
  authDomain: `${process.env.REACT_APP_FIREBASE_AUTH_DOMAIN}`,
  databaseURL: `${process.env.REACT_APP_FIREBASE_DATABASE_URL}`,
  projectId: `${process.env.REACT_APP_FIREBASE_PROJECT_ID}`,
  storageBucket: `${process.env.REACT_APP_FIREBASE_STORAGE_BUCKET}`,
  messagingSenderId: `${process.env.REACT_APP_FIREABSE_MESSAGING_SENDER_ID}`,

hieptl

import { useEffect, useRef, useContext } from "react";
import validator from "validator";
import { useHistory } from 'react-router-dom';
import withModal from "../common/Modal";
import SignUp from "../register/SignUp";
import Context from "../../context";
import { auth, realTimeDb } from "../../firebase";

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

hieptl

import { useState } from 'react';

const withModal = ModalComponent => WrapperComponent => {
  return function () { 
    const [isModalShown, setIsModalShown] = useState(false);
    
    return (
      <>
        <WrapperComponent toggleModal={setIsModalShown}/>
        {isModalShown && <ModalComponent toggleModal={setIsModalShown} />}

hieptl

import { useRef, useContext } from "react";

import validator from "validator";
import { v4 as uuidv4 } from "uuid";

import Context from "../../context";
import { auth, realTimeDb } from "../../firebase";

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

hieptl

import { useContext } from 'react';
import { useHistory } from 'react-router';
import Menu from './Menu';
import Context from '../../context';

const Menus = () => {
  const { cometChat, selectedMenu, setSelectedMenu, setSelectedFriend, setSelectedChannel, setSelectedChannelType } = useContext(Context);

  const history = useHistory();

hieptl

const Menu = (props) => {
  const { isActive, onItemSelected, item } = props;
  return (
    <div className={`menu__item ${isActive ? 'menu__item--active' : ''}`} onClick={onItemSelected(item)}>{item.icon}</div>
  );
};
export default Menu;

hieptl

import Sidebars from './Sidebars';
import Main from './Main';

const Friend = () => {
  return (
    <div className="friends__container">
      <Sidebars />
      <Main />
    </div>
  );

hieptl

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

const Sidebars = () => {
  const [friends, setFriends] = useState([]);

  const { cometChat, user, hasNewFriend, setHasNewFriend, setSelectedFriend } = useContext(Context);