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'
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'

const NotificationsOption = ({ addNotification, sessionLink, Icon, title, url, }) => {
    const [notifications, setNotifications] = useState([])
    const [notificationsCount, setNotificationsCount] = useState(0)
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        handleNotifications()
    }, [notificationsCount])

    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_notifications } = response.data

            if (response.success) {
                setNotificationsCount(Number(total_notifications))
            }
            setLoading(false)
        } catch (error) {
            console.log(error)
        }
    }

    const readNotification = (link_read, link_notification) => {
        axios.post(link_read)
            .then(({ data }) =>
                data.success
                    ? window.open(link_notification, '_blank').focus()
                    : addNotification({ style: 'danger', msg: data.data }))
    }

    const deleteNotification = (link_delete) => {
        axios.post(link_delete)
            .then(({ data }) => {
                !data.success && addNotification({ style: 'danger', msg: data.data })
                setNotificationsCount(prev => prev - 1)
                setNotifications(notifications.filter(notification => notification.link_delete !== link_delete))
                addNotification({ style: 'success', msg: data.data })
            })
    }

    const handleNotifications = () => {
        axios.get('/notifications/unreads')
            .then(({ data }) => {
                if (data.success) {
                    let notifications = new Set(data.data.notifications)
                    setNotifications([...notifications])
                }
            })
            .catch(err => {
                addNotification({
                    style: "error",
                    msg: 'Disculpe, ha ocurrido un error buscando notificaciones',
                })
                console.log('>>: err > ', err)
            })
    }

    return (
        <li>
            <a href={url} className="header__option mobile">
                {Icon && <Icon className="header__option-icon" />}
                <span>{title}</span>
                <span className={`badge ${notificationsCount ? 'd-block' : 'd-none'}`} style={{ top: '10px' }}>
                    {notificationsCount}
                </span>
            </a>
            {!!notifications.length &&
                <nav className='nav__options-dropdown' style={{ maxHeight: '300px', overflow: 'auto' }}>
                    <ul>{notifications.map(({ message, link_mark_read, link, link_delete, time_elapsed }, index) =>
                        <li key={index}>
                            <div className="d-flex align-items-center" style={{ gap: '.5rem' }}>
                                <a
                                    href={link}
                                    onClick={(e) => {
                                        e.preventDefault()
                                        readNotification(link_mark_read, link)
                                    }}
                                >
                                    {message}
                                </a>
                                <DeleteOutlineIcon onClick={() => deleteNotification(link_delete)} />
                            </div>
                            <small style={{ fontSize: '.85rem' }}>
                                {time_elapsed}
                            </small>
                        </li>
                    )}
                    </ul>
                </nav>
            }
        </li>
    )
}

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

export default connect(null, mapDispatchToProps)(NotificationsOption)