Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useState } from 'react'
import axios from '../../utils/axios'
import { useDispatch } from 'react-redux'
import { addNotification } from '../../redux/notification/notification.actions'

const EventsList = () => {
    const [events, setEvents] = useState([])
    const [tasks, setTasks] = useState([])
    const dispatch = useDispatch()

    const getEvents = async () => {
        try {
            const { data: response } = await axios.get('/helpers/next-events')

            if (!response.success) {
                dispatch(addNotification({ style: 'danger', message: response.data }))
                return
            }

            const nextTasks = response.data.filter(event => event.type === 'task')
            const nextEvents = response.data.filter(event => event.type === 'event')

            setTasks(nextTasks)
            setEvents(nextEvents)

        } catch (error) {
            dispatch(addNotification({ style: 'danger', message: 'Ha ocurrido un error' }))
            console.log(`Error: ${error.message}`)
        }
    }

    useEffect(() => {
        getEvents()
    }, [])

    return (
        <>
            <div className='peopleYouMayKnow'>
                <div className="sd-title d-flex align-items-center justify-content-between">
                    <h3>Proximos eventos</h3>
                </div>
                <div className="d-flex flex-column" style={{ gap: '.5rem' }}>
                    {events.length
                        ? events.map((event) => {
                            const eventStart = new Date(event.start).toLocaleString()
                            const eventEnd = new Date(event.end).toLocaleString()

                            return (
                                <a
                                    key={event.id}
                                    href={event.url}
                                    target='_blank'
                                    rel="noreferrer"
                                >
                                    <div className='calendar-event' style={{ color: event.textColor, background: event.backgroundColor }}>
                                        <h4>
                                            <b>Evento: </b> {event.title}
                                        </h4>
                                        <span>
                                            <b>Inicio: </b>{eventStart}
                                        </span>
                                        <span>
                                            <b>Fin: </b>{eventEnd}
                                        </span>
                                    </div>
                                </a>
                            )
                        })
                        : <div className="view-more">No hay eventos</div>
                    }
                </div>
            </div>
            <div className='peopleYouMayKnow mt-2'>
                <div className="sd-title d-flex align-items-center justify-content-between">
                    <h3>Proximas tareas</h3>
                </div>
                <div className="d-flex flex-column" style={{ gap: '.5rem' }}>
                    {tasks.length
                        ? tasks.map((task) => {
                            const taskStart = new Date(task.start).toLocaleString()
                            const taskEnd = new Date(task.end).toLocaleString()

                            return (
                                <a
                                    key={task.id}
                                    href={task.url}
                                    target='_blank'
                                    rel="noreferrer"
                                >
                                    <div className='calendar-event' style={{ color: task.textColor, background: task.backgroundColor }}>
                                        <h4>
                                            <b>Tarea: </b> {task.title}
                                        </h4>
                                        <span>
                                            <b>Inicio: </b>{taskStart}
                                        </span>
                                        <span>
                                            <b>Fin: </b>{taskEnd}
                                        </span>
                                    </div>
                                </a>
                            )
                        })
                        : <div className="view-more">No hay tareas</div>
                    }
                </div>
            </div>
        </>
    )
}

export default EventsList