Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useRef, useState } from 'react'
import { Link } from 'react-router-dom'
import { axios } from '../../../utils'
import useOutsideClick from '../../../hooks/useOutsideClick'

import ListItemDropdown from './ListItemDropdown'

import './HeaderOptions.scss'
import './Dropdowns.scss'
import Badge from '../../UI/Badge'

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

  const handleClick = (e) => {
    e.preventDefault()
    setDisplayMenu(!displayMenu)
  }

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

  return (
    <li ref={menu} className={!isMobile && 'd-none d-lg-block'}>
      <Link
        to={`/${url}`}
        className={`header__option ${isMobile && 'mobile'} ${
          displayMenu && 'active'
        }`}
        onClick={(e) => {
          if (ajaxRequest) handleAjaxRequest(e)
          if (childs.length) handleClick(e)
        }}
      >
        {Icon && <Icon className="header__option-icon" />}
        <span>{title}</span>
        {Boolean(count) && <Badge count={count} top="5px" left="80%" />}
      </Link>
      <ListItemDropdown isShow={displayMenu} options={childs} />
    </li>
  )
}

export default HeaderOptions