Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useEffect, useRef, useState } from 'react'
import './HeaderOptions.scss'
import './Dropdowns.scss'
import useOutsideClick from '../../../hooks/useOutsideClick'
import axios from '../../../utils/axios'

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

    useEffect(() => {
        if (outsideClick) setDisplayMenu(false)
    }, [outsideClick])

    const handleAjaxRequest = async () => {
        try {
            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-md-block'}>
            <a
                href={`/${url}`}
                className={`header__option ${isMobile && 'mobile'} ${displayMenu && 'active'}`}
                onClick={(e) => {
                    if (ajaxRequest) {
                        e.preventDefault()
                        handleAjaxRequest()
                    }
                    if (childs.length) {
                        e.preventDefault()
                        setDisplayMenu(!displayMenu)
                    }
                }}
                target='framename'
            >
                {Icon && <Icon className="header__option-icon" />}
                <span>{title}</span>
            </a>
            {!!childs.length &&
                <nav className={`nav__options-dropdown ${isMobile && 'mobile'} ${displayMenu && 'show'}`}>
                    <ul>{childs.map((linkOption, index) =>
                        <li key={index}>
                            {linkOption.childs?.length
                                ? <a href='/' onClick={(e) => e.preventDefault()}>{linkOption.label}</a>
                                : <a href={`/${linkOption.href}`} target='framename'>{linkOption.label}</a>
                            }
                            {!!linkOption.childs?.length &&
                                <nav className='navLinkLevelThree'>
                                    <ul>
                                        {linkOption.childs?.map((optionsChild, index) =>
                                            <li key={index}>
                                                <a href={`/${optionsChild.href}`} target='framename'>{optionsChild.label}</a>
                                            </li>
                                        )}
                                    </ul>
                                </nav>
                            }
                        </li>
                    )}
                    </ul>
                </nav>
            }
        </li>
    )
}

export default HeaderOptions