Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { Suspense, lazy, useEffect, useState } from 'react'

import { axios } from '../../../utils'

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

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

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

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

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

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

import MenuIcon from '@mui/icons-material/Menu'

import SchoolIcon from '@mui/icons-material/School'

import HeaderOptions from './HeaderOptions'

import UserOptions from './UserOptions'

import './Header.scss'

import NavSearch from './nav-search/NavSearch'

import useWindowSize from '../../../hooks/useWindowSize'

const MenuDrawer = lazy(() => import('./Drawer'))

const ICON_OPTIONS = [

  HomeIcon,

  PeopleIcon,

  BusinessCenterIcon,

  GroupsIcon,

  SellIcon,

  SchoolIcon,

]

const Header = ({

  menu,

  image = '',

  logoForNavbar = '',

  fullName,

  linkAdmin,

  linkImpersonate,

  linkKnowledgeArea,

  routeKnowledgeArea,

  // companyVars,

  // isChatPage,

  routeCheckSession,

  defaultNetwork,

}) => {

  const [menuItems, setMenuItems] = useState(menu || [])

  const [notificationsCount, setNotificationsCount] = useState(0)

  const [aditionalItems, setAditionalItems] = useState([])

  const [messagesCount, setMessagesCount] = useState(0)

  const [userImage, setUserImage] = useState(image)

  const [showDrawer, setShowDrawer] = useState(false)

  const [loading, setLoading] = useState(false)

  const [innerWidth] = useWindowSize()

  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 checkSession = async () => {

    try {

      setLoading(true)

      const { data: response } = await axios.get(routeCheckSession)

      const { total_messages, total_notifications } = response.data

      if (response.success) {

        setMessagesCount(Number(total_messages))

        setNotificationsCount(Number(total_notifications))

      }

      setLoading(false)

    } catch (error) {

      console.log(error)

    }

  }

  const getKnowledgeRoutes = () => {

    const childs = [{ label: 'Mi Coach', href: '/my-coach' }]

    if (linkKnowledgeArea) {

      childs.push({

        label: 'Área de conocimiento',

        href: routeKnowledgeArea,

      })

    }

    return childs

  }

  useEffect(() => {

    let timer

    if (!loading) {

      timer = setTimeout(() => {

        checkUserImage()

        checkSession()

      }, 2000)

    }

    return () => {

      clearTimeout(timer)

    }

  }, [loading])

  useEffect(() => {

    if (menu.length > 5) {

      setMenuItems(menu.splice(0, 5))

      setAditionalItems(menu.splice(menu.length - 5))

    }

  }, [])

  return (

    <>

      <div className="header">

        <div className="container px-0">

          <div className="header__nav">

            <div className={`header__left ${innerWidth < 992 && 'show'}`}>

              <a href="/">

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

              </a>

              <NavSearch />

            </div>

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

              <ul>

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

                  return (

                    <HeaderOptions

                      key={index}

                      Icon={ICON_OPTIONS[index]}

                      title={item.label}

                      url={item.href}

                      childs={item.childs}

                      ajaxRequest={item.ajax}

                    />

                  )

                })}

                <HeaderOptions

                  Icon={SchoolIcon}

                  title="Conocimiento"

                  url={routeKnowledgeArea}

                  childs={getKnowledgeRoutes()}

                />

                <HeaderOptions

                  Icon={ChatIcon}

                  title="Comunicación"

                  badgeCount={notificationsCount || messagesCount}

                  childs={[

                    ...aditionalItems,

                    { label: 'Inmail', href: '/inmail', count: messagesCount },

                    { label: 'Chat', href: '/chat' },

                    {

                      label: 'Notificaciones',

                      href: '/notifications',

                      count: notificationsCount,

                    },

                  ]}

                  isMobile={true}

                />

                <UserOptions

                  image={userImage}

                  name={fullName}

                  adminUrl={linkAdmin}

                  impersonateUrl={linkImpersonate}

                  defaultNetwork={defaultNetwork}

                  knowledgeAuth={linkKnowledgeArea}

                  routeKnowledge={routeKnowledgeArea}

                />

                {MenuDrawer && (

                  <li className="d-md-none">

                    <a

                      href="/"

                      className={'header__option mobile'}

                      onClick={(e) => {

                        e.preventDefault()

                        setShowDrawer(!showDrawer)

                      }}

                    >

                      <MenuIcon />

                    </a>

                  </li>

                )}

              </ul>

            </nav>

          </div>

        </div>

      </div>

      <Suspense fallback={null}>

        <MenuDrawer

          items={[

            ...menuItems,

            {

              label: 'Conocimiento',

              href: 'Conocimiento',

              img: '/images/navbar/market-place.svg',

              ajax: 0,

              childs: getKnowledgeRoutes(),

            },

          ]}

          icons={ICON_OPTIONS}

          isOpen={showDrawer}

          closeDrawer={() => setShowDrawer(false)}

        />

      </Suspense>

    </>

  )

}

export default Header