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'

const HeaderOptions = ({

  Icon = null,

  title = '',

  url = '',

  childs = [],

  ajaxRequest = 0,

  isMobile = false,

  badgeCount = 0,

}) => {

  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>

        <span

          className={`badge ${badgeCount ? 'd-block' : 'd-none'}`}

          style={{ top: '10px' }}

        >

          {badgeCount}

        </span>

      </Link>

      <ListItemDropdown isShow={displayMenu} options={childs} />

    </li>

  )

}

export default HeaderOptions