Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */

import React, { useEffect, useRef, useState } from 'react'

import SearchIcon from '@mui/icons-material/Search'

import HomeIcon from '@mui/icons-material/Home'

import BusinessCenterIcon from '@mui/icons-material/BusinessCenter'

import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';

import SellIcon from '@mui/icons-material/Sell';

import PeopleIcon from '@mui/icons-material/People';

import GroupsIcon from '@mui/icons-material/Groups';

import HeaderOptions from './HeaderOptions'

import ChatIcon from '@mui/icons-material/Chat'

import NotificationsIcon from '@mui/icons-material/Notifications'

import UserOptions from './UserOptions'

import './Header.scss'

import { useForm } from 'react-hook-form';

const ICON_OPTIONS = [

  HomeIcon,

  PeopleIcon,

  BusinessCenterIcon,

  GroupsIcon,

  SellIcon,

  CalendarMonthIcon,

]

const Header = ({

  menu: menuItems = [],

  image = '',

  logoForNavbar = '',

  fullName,

  linkAdmin,

  linkImpersonate,

  //companyVars,

  //isChatPage,

  //routeCheckSession,

}) => {

  const [userImage, setUserImage] = useState(image)

  const [showMobileSearch, setShowMobileSearch] = useState(false)

  const [loading, setLoading] = useState(false);

  const searchInput = useRef(null);

  const { handleSubmit, register } = useForm()

  const handleOnSubmit = (data) => window.location.replace(`/search/entity/user?keyword=${data.keyword}`)

  useEffect(() => {

    let timer;

    if (!loading) {

      timer = setTimeout(() => checkUserImage(), 1000);

    }

    return () => {

      clearTimeout(timer);

    };

  }, [loading])

  const checkUserImage = async () => {

    setLoading(true);

    const session_image = sessionStorage.getItem('user_session_image')

    if (session_image) {

      await setUserImage(session_image)

      sessionStorage.removeItem('user_session_image')

    }

    setLoading(false);

  }

  const handleDisplayMobileSearch = () => {

    if (window.innerWidth < 992) {

      setShowMobileSearch(true)

    }

  }

  useEffect(() => {

    const handleClickOutside = (event) => {

      if (searchInput.current && !searchInput.current.contains(event.target)) {

        setShowMobileSearch(false)

      }

    }

    document.addEventListener("mousedown", handleClickOutside);

    return () => {

      document.removeEventListener("mousedown", handleClickOutside);

    };

  }, [searchInput]);

  return (

    <div className='header'>

      <div className='container'>

        <div className='header__nav'>

          <div className='header__left'>

            <img src={logoForNavbar} alt='Logo' />

            <form

              className={`header__search ${showMobileSearch && 'show'}`}

              onClick={handleDisplayMobileSearch}

              onSubmit={handleSubmit(handleOnSubmit)}

            >

              <SearchIcon />

              <input

                type='text'

                placeholder='Search'

                ref={searchInput}

                {...register('keyword')}

              />

            </form>

          </div>

          <nav className={`header__right ${showMobileSearch && 'd-none'}`}>

            <ul>

              {menuItems.map((item, index) => {

                return (

                  <HeaderOptions

                    key={index}

                    Icon={ICON_OPTIONS[index]}

                    title={item.label}

                    url={item.href}

                    childs={item.childs}

                  />

                )

              })}

              <UserOptions

                image={userImage}

                name={fullName}

                adminUrl={linkAdmin}

                impersonateUrl={linkImpersonate}

              />

            </ul>

          </nav>

        </div>

      </div>

    </div>

  )

}

export default Header