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