hieptl

// import useContext to get share data.
import { useContext } from 'react';
// import Context.
import Context from '../Context';

function RightSidebar() {

  const { selectedContact } = useContext(Context);

  if (!selectedContact) {

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';
// import logo white
import logoWhite from '../logo_white.png';

function Header() {

hieptl

// import useContext, useState, useEffect, useRef, useCallback
import { useContext, useState, useEffect, useRef, useCallback } from 'react';
// import Context
import Context from '../Context';
// import
import { OpenStreetMapProvider } from 'leaflet-geosearch';
// import custom components.
import withModal from './Modal';
import RequestRide from './RequestRide';

hieptl

// import useContext.
import { useContext } from 'react';
// import realtime database from Firebase.
import { realTimeDb } from "../firebase";
// import uuid to generate id for users.
import { v4 as uuidv4 } from "uuid";
// import Context
import Context from '../Context';

function RequestRide(props) {

hieptl

// import useEffect.
import { useEffect, useState, useContext } from 'react';
// import firebase authentication.
import { realTimeDb } from "../firebase";
// import Context
import Context from '../Context';
function RideList() {

  const [rideRequests, setRideRequests] = useState();

hieptl

// import useContext.
import { useContext } from 'react';
// import firebase authentication.
import { realTimeDb } from "../firebase";
// import Context
import Context from '../Context';
// import react router. 
import { useHistory } from 'react-router-dom';

function RideDetail(props) {