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