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)