Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState, useEffect } from 'react'
import { axios } from '../../utils'
import { getBackendVars } from '../../services/backendVars'

import DefaultNavbar from './default/Navbar'
import LinkendInHeader from './linkedin/Header'

const Header = ({ theme = 1 }) => {
  const [backendVars, setBackendVars] = useState(null)
  const [notificationsCount, setNotificationsCount] = useState(0)
  const [messagesCount, setMessagesCount] = useState(0)
  const [loading, setLoading] = useState(false)

  const checkSession = async (url) => {
    try {
      setLoading(true)
      const { data: response } = await axios.get(url)
      const { total_messages, total_notifications } = response.data

      if (response.success) {
        const msgs = Number(total_messages)
        const nots = Number(total_notifications)

        msgs !== messagesCount && setMessagesCount(msgs)
        nots !== notificationsCount && setNotificationsCount(nots)
      }

      setLoading(false)
    } catch (error) {
      throw new Error(error)
    }
  }

  useEffect(() => {
    getBackendVars('/helpers/menu')
      .then((results) => {
        const knowledgeRoutes = {
          label: 'Conocimiento',
          href: '/knowledge',
          img: '',
          childs: [],
          ajax: 0,
        }

        const comunicationRoutes = {
          label: 'Comunicación',
          href: '/comunication',
          img: '',
          childs: [
            { label: 'Calendario', href: '/calendar' },
            { label: 'Inmail', href: '/inmail', count: messagesCount },
            { label: 'Chat', href: '/chat' },
            {
              label: 'Notificaciones',
              href: '/notifications',
              count: notificationsCount,
            },
          ],
          ajax: 0,
        }

        const menuItems = [
          ...results.menu.splice(0, 5),
          knowledgeRoutes,
          comunicationRoutes,
        ]

        if (results.linkMyCoach) {
          knowledgeRoutes.childs.push({ label: 'Mi Coach', href: '/my-coach' })
        }

        if (results.linkKnowledgeArea) {
          knowledgeRoutes.childs.push({
            label: 'Área de conocimiento',
            href: results.routeKnowledgeArea,
          })
        }

        setBackendVars({ ...results, menu: menuItems })
      })
      .catch((err) => {
        console.log(err)
        throw new Error(err)
      })
  }, [])

  useEffect(() => {
    if (loading) return

    const timer = setTimeout(() => {
      checkSession(backendVars?.routeCheckSession)
    }, 2000)

    return () => {
      clearTimeout(timer)
    }
  }, [loading, backendVars])

  useEffect(() => {
    if (backendVars) {
      const newMenu = [...backendVars.menu]
      const comunications = newMenu[newMenu.length - 1]

      comunications.childs.forEach((child) => {
        if (child.label === 'Inmail') {
          child.count = messagesCount
        }
        if (child.label === 'Notificaciones') {
          child.count = notificationsCount
        }
      })

      newMenu[newMenu.length - 1] = comunications

      setBackendVars((prevVars) => {
        return {
          ...prevVars,
          menu: newMenu,
        }
      })
    }
  }, [messagesCount, notificationsCount])

  if (theme === 2) {
    return (
      <LinkendInHeader
        menu={backendVars?.menu}
        logo={backendVars?.logoForNavbar}
        fullName={backendVars?.fullName}
        notificationsCount={notificationsCount}
        messagesCount={messagesCount}
        {...backendVars}
      />
    )
  }

  return (
    <DefaultNavbar
      menu={backendVars?.menu}
      logo={backendVars?.logoForNavbar}
      name={backendVars?.fullName}
      {...backendVars}
    />
  )
}

export default Header