hieptl

...
useEffect(() => {
  // init cometchat pro.
  initCometChat();
}, []);

/**
 * init comet chat.
 */
const initCometChat = async () => {

hieptl

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

const firebaseConfig = {
  apiKey: `${process.env.NEXT_PUBLIC_FIREBASE_API_KEY}`,
  authDomain: `${process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN}`,
  databaseURL: `${process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL}`,
  projectId: `${process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID}`,
  storageBucket: `${process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET}`,
  messagingSenderId: `${process.env.NEXT_PUBLIC_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 useState, useRef, useContext to get shared data from react context.
import { useState, useRef, useContext } from "react";
// import Context to get shared data.
import Context from "../Context";
// import real time databse firebase.
import { realTimeDb } from "../firebase";
// import custom components.
import HeaderIcon from "./HeaderIcon";
import HeaderRightIcon from "./HeaderRightIcon";

hieptl

function HeaderIcon({active, icon, onClick }) {
  const handleClick = () => {
    if (onClick) {
      onClick();
    }
  }
  return (
    <div className={`${active ? 'icon--active' : ''} header__icon`} onClick={handleClick}>
      {icon}
    </div>

hieptl

function HeaderRightIcon({icon, onClick}) {
  const handleClick = () => {
    if (onClick) {
      onClick();
    }
  }
  return (
    <div className="header__ricon" onClick={handleClick}>
      {icon}
    </div>

hieptl

// import useContext to get share data from react context.
import { useContext } from 'react';
// import context.
import Context from "../Context";
// import custom components.
import SidebarRow from "./SidebarRow";
import Groups from "./Groups";
import withModal from "./Modal";

function Sidebar(props) {

hieptl

function SidebarRow({ src, title, toggleModal }) {
  return (
    <div className="sidebar__row" onClick={() => toggleModal(true)}>
      {src && (
        <img src={src} className="sidebar__imgrow" />
      )}
      <p className="sidebar__rowtitle">{title}</p>
    </div>
  );
}

hieptl

// import custom components.
import StoryCard from "./StoryCard";

const stories = [
  {
    name: "Bill Gates",
    src: "https://links.papareact.com/4u4",
    profile: "https://links.papareact.com/zvy",
  },
  {