Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useLayoutEffect, useRef, useState } from 'react'
import useOutsideClick from '../../../hooks/useOutsideClick'
import axios from '../../../utils/axios'
import ListItemDropdown from './ListItemDropdown'
import './HeaderOptions.scss'
import './Dropdowns.scss'

const HeaderOptions = ({
  Icon = null,
  title = '',
  url = '',
  childs = [],
  ajaxRequest = 0,
  isMobile = false,
  badgeCount = 0,
}) => {
  const [displayMenu, setDisplayMenu] = useState(false)
  const menu = useRef(null)
  const outsideClick = useOutsideClick(menu)

  const handleClick = () => {
    setDisplayMenu(!displayMenu)
  }

  const handleAjaxRequest = async () => {
    try {
      const { data } = await axios.get(url)
      if (data.success) {
        window.open(data.data, 'backend')
      }
    } catch (error) {
      console.log('>>: error > ', error)
    }
  }

  useLayoutEffect(() => {
    if (outsideClick) setDisplayMenu(false)
  }, [outsideClick])

  return (
    <li ref={menu} className={!isMobile && 'd-none d-lg-block'}>
      <a
        href={`/${url}`}
        className={`header__option ${isMobile && 'mobile'} ${
          displayMenu && 'active'
        }`}
        onClick={(e) => {
          if (ajaxRequest) {
            e.preventDefault()
            handleAjaxRequest()
            return
          }
          if (childs.length) {
            e.preventDefault()
            handleClick()
          }
        }}
        target="framename"
      >
        {Icon && <Icon className="header__option-icon" />}
        <span>{title}</span>
        <span
          className={`badge ${badgeCount ? 'd-block' : 'd-none'}`}
          style={{ top: '10px' }}
        >
          {badgeCount}
        </span>
      </a>
      <ListItemDropdown isShow={displayMenu} options={childs} />
    </li>
  )
}

export default HeaderOptions