Proyectos de Subversion LeadersLinked - Antes de SPA

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

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

    const checkSession = async () => {
        try {
            setLoading(true)
            const { data: response } = await axios.get(sessionLink)
            const { total_messages } = response.data

            if (response.success) {
                setMessagesCount(Number(total_messages))
            }
            setLoading(false)
        } catch (error) {
            console.log(error)
        }
    }

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

    useEffect(() => {
        let timer;
        if (!loading) {
            timer = setTimeout(() => checkSession(), 1000);
        }
        return () => {
            clearTimeout(timer);
        };
    }, [loading])

    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)