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()
                  }
                  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