hieptl

function StoryCard({ name, src, profile }) {
  return (
    <div className="story__card">
      <img
        className="story__profile"
        src={profile}
      />
      <img
        className="story__background"
        src={src}

hieptl

// import useRef, useState and useContext.
import { useRef, useState, useContext } from "react";
// import Context to get shared data from react context.
import Context from '../Context';
// import real time data and storage to interact with real time database and upload files to Firebase.
import { realTimeDb, storage } from "../firebase";
// import uuid to generate id for posts.
import { v4 as uuidv4 } from "uuid";

function InputBox() {

hieptl

// import useContext to get shared data.
import { useContext } from 'react';
// import Context.
import Context from '../Context';
// import custom components.
import Post from "./Post";

function Posts() {
  const { wallPosts } = useContext(Context);
  return (

hieptl

function Post({ createdBy, message, imageUrl, timestamp, userAvatar }) {
  return (
    <div className="post__container">
      <div className="post__title-container">
        <div className="post__title">
          <img className="header__avatar" src={userAvatar} />
          <div>
            <p className="post__name">{createdBy}</p>
            {timestamp ? (
              <p className="post__timestamp">

hieptl

// import custom components
import InputBox from "./InputBox";
import Stories from "./Stories";
import Posts from "./Posts";

function Feed({ posts }) {
  return (
    <div className="feed">
      <div className="feed__container">
        <Stories />

hieptl

// import useEffect, useState, useContext.
import { useEffect, useState, useContext } from 'react';
// import Context.
import Context from "../Context";

function Contact() {
  const [contacts, setContacts] = useState([]);

  const { user, cometChat, setSelectedContact, isChatLayoutShown } = useContext(Context);

hieptl

// import useEffect, useRef, useContext, useState.
import { useEffect, useRef, useContext, useState } from "react";
// import Context.
import Context from "../Context";
// import uuid to generate id for groups.
import { v4 as uuidv4 } from "uuid";

function Groups(props) {
  const [groups, setGroups] = useState([]);

hieptl

// import useContext, useRef.
import { useContext, useRef, useEffect, useState } from "react";
// import Context.
import Context from "../Context";
// import custom components.
import Message from "./Message";
// import uuid to generate id for messages.
import { v4 as uuidv4 } from "uuid";

function ChatBox() {

hieptl

function Message(props) {
  const {message, avatar, isRight} = props;

  if (!message || !avatar) { 
    return <></>
  }

  if (isRight) {
    return (
      <div className="message__right">

hieptl

// import useContext, useRef.
import { useContext, useRef, useEffect, useState } from "react";
// import Context.
import Context from "../Context";
// import custom components.
import Message from "./Message";
// import uuid to generate id for messages.
import { v4 as uuidv4 } from "uuid";

function ChatBox() {