hieptl

...
logoutButon.addEventListener('click', function() { 
  const isLeaved = confirm('Do you want to log out?');
  if (isLeaved) {
    // logout from cometchat and then clear storage.
    CometChatWidget.logout().then(response => {
      // User successfully logged out.
      // Perform any clean up if required.
      // redirect to login page.
      window.location.href = '/login.html';

hieptl

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

/**
 * init comet chat.
 */
 const initCometChat = async () => {
  const { CometChat } = await import('@cometchat-pro/chat');

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 useRef and useContext
import { useRef, useContext } from "react";
// import Context to get shared data from React context.
import Context from "../Context";
// import firebase authentication and real time database.
import { auth, realTimeDb } from "../firebase";
// import validator to validate user's credentials.
import validator from "validator";
// import custom componnets.
import withModal from "./Modal";

hieptl

// import useRef, useContext
import { useRef, useContext } from "react";
// import Context to get shared data.
import Context from "../Context";
// import validator to validate user's information.
import validator from "validator";
// import firebase authentication.
import { auth, realTimeDb } from "../firebase";
// import uuid to generate id for users.
import { v4 as uuidv4 } from "uuid";

hieptl

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

function Header() {
  const { user, setUser } = useContext(Context);

hieptl

// import cometchat components.
import {CometChatUI} from "../cometchat-pro-react-ui-kit/CometChatWorkspace/src";
function Chat() {
  return (
    <div className="chat-container">
      {/* CometChat Components will be go here */}
      <CometChatUI />
    </div>
  );
}

hieptl

.tribute-container {
  background: #fff;
  border-radius: 0.5rem;
  border: 1px solid #E5E7EB;
  max-height: 15rem;
  overflow: auto;
  padding: 0.75rem;
  top: 27.625rem !important;
  z-index: 10000;
}

hieptl

...
import Tribute from "tributejs";
import "./tribute.css";
...

hieptl

...
import Tribute from "tributejs";
import "./tribute.css";
...
class CometChatMessageComposer extends React.PureComponent {
	...
	groupListenerId = "group_" + new Date().getTime();
  ...
	constructor(props) {
		super(props);