hieptl

const Sidebar = (props) => {
  const { friend, onItemClicked } = props;

  if (!friend) {
    return <></>
  }
  
  const selectFriend = () => {
    onItemClicked(friend);
  };

hieptl

import { useState, useContext } from 'react';
import { CometChatMessages  } from '../../cometchat-pro-react-ui-kit/CometChatWorkspace/src';
import Header from './Header';
import Pendings from './Pendings';
import Add from './Add';
import RightSidebar from './RightSidebar';
import Context from '../../context';

const Main = () => {
  const [selectedOption, setSelectedOption] = useState(1);

hieptl

const Header = (props) => {
  const { onItemSelected, selectedOption } = props;

  const selectItem = (index) => () => {
    onItemSelected(index);
  };

  return (
    <div className="friends__main-header">
      <span onClick={selectItem(1)} className={`${selectedOption === 1 ? 'friends__main-header--active' : ''}`}>Pending</span>

hieptl

const RightSidebar = () => {
  return (
    <div className="right-sidebar">
      <div className="right-sidebar__title">Active Now</div>
      <div className="right-sidebar__description">
        <p className="right-sidebar__description-title">It's quiet for now...</p>
        <p className="right-sidebar__description-content">When a friend starts active-now activity - like playing a game or hanging out on voice - we'll show it here!</p>
      </div>
    </div>
  );

hieptl

import notFound from '../../images/404.png';

const NotFound = () => {
  return (
    <div className="not-found">
      <img src={notFound} alt="404"/>
      <p>No one's around to play with Wumpus.</p>
    </div>
  );
};

hieptl

import { useEffect, useState, useContext } from 'react';
import Search from './Search';
import Users from './Users';
import Context from '../../context';
import { realTimeDb } from '../../firebase';

const Add = () => {
  const [authenticatedUser, setAuthenticatedUser] = useState(null);
  const [users, setUsers] = useState(null);

hieptl

const Search = (props) => {
  const { onSearchChanged } = props;

  const onChanged = (e) => {
    const keywords = e.target.value.trim();
    onSearchChanged(keywords);
  };

  return (
    <div className="add-friend__search">

hieptl

import User from './User';

const Users = (props) => {
  const { users, onConfirmShown } = props;

  if (!users || !users.length) { 
    return <></>;
  }

  return (

hieptl

const User = (props) => {
  const { user, onItemClicked } = props;

  const selectUser = (user) => () => {
    onItemClicked(user);
  };

  return (
    <div className="add-friend__list-item" onClick={selectUser(user)}>
      <div className="add-friend__list-item-left">

hieptl

import { useEffect, useState, useContext } from 'react';
import SubHeader from "./SubHeader";
import Pending from './Pending';
import NotFound from './NotFound';
import Context from '../../context';
import { realTimeDb } from '../../firebase';

const Pendings = () => {
  const [authenticatedUser, setAuthenticatedUser] = useState(null);
  const [users, setUsers] = useState(null);