Proyectos de Subversion LeadersLinked - Antes de SPA

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

const ComunicationOptions = ({ sessionLink, Icon, title, url, childs }) => {
    const [messagesCount, setMessagesCount] = useState(0)
    const [loading, setLoading] = useState(false);

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

    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)
        }
    }

    return (
        <li>
            <a href={url} className="header__option">
                {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'>
                    <ul>{childs.map((linkOption, index) =>
                        <li key={index}>
                            {linkOption.childs?.length
                                ? <a href='/' onClick={(e) => e.preventDefault()}>{linkOption.label}</a>
                                : <a href={linkOption.href}>{linkOption.label}</a>
                            }
                            {!!linkOption.childs?.length &&
                                <nav className='navLinkLevelThree'>
                                    <ul>
                                        {linkOption.childs?.map((optionsChild, index) =>
                                            <li className='d-flex align-items-center justify-content-between' key={index}>
                                                <a href={optionsChild.href}>{optionsChild.label}</a>
                                                {(optionsChild.label === 'Inmail' && messagesCount) && <span>{messagesCount}</span>}
                                            </li>
                                        )}
                                    </ul>
                                </nav>
                            }
                        </li>
                    )}
                    </ul>
                </nav>
            }
        </li>
    )
}

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

export default connect(null, mapDispatchToProps)(ComunicationOptions)