Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useEffect, useRef, useState } from 'react'
import { connect } from 'react-redux'
import { addNotification } from '../../../redux/notification/notification.actions'
import useOutsideClick from '../../../hooks/useOutsideClick'

const ComunicationOptions = ({
    messagesCount = 0,
    Icon = null,
    title = '',
    url = '',
    childs = []
}) => {
    const [displayMenu, setDisplayMenu] = useState(false)
    const outsideClick = useOutsideClick(menu)
    const menu = useRef(null)

    const handleClick = (e) => {
        e.preventDefault()
        setDisplayMenu(!displayMenu)
    }

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

    return (
        <li ref={menu}>
            <a href={url} className={`header__option mobile ${displayMenu && 'active'}`} onClick={handleClick}>
                {Icon && <Icon className="header__option-icon" />}
                <span>{title}</span>
                <span className={`badge ${messagesCount ? 'd-block' : 'd-none'}`} style={{ top: '10px' }}>
                    {messagesCount}
                </span>
            </a>
            {!!childs.length &&
                <nav className={`nav__options-dropdown ${displayMenu && 'show'}`}>
                    <ul>{childs.map((linkOption, index) =>
                        <li key={index}>
                            <li className='d-flex align-items-center justify-content-between' key={index}>
                                <a href={linkOption.href} target='secondary'>{linkOption.label}</a>
                                {(linkOption.label === 'Inmail' && messagesCount) &&
                                    <span className={`badge ${messagesCount ? 'd-block position-relative' : 'd-none'}`} style={{ left: 0, transform: 'none' }}>
                                        {messagesCount}
                                    </span>}
                            </li>
                        </li>
                    )}
                    </ul>
                </nav>
            }
        </li>
    )
}

const mapDispatchToProps = {
    addNotification: (notification) => addNotification(notification),
}

export default connect(null, mapDispatchToProps)(ComunicationOptions)