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

            setEvents(response.data)
        } 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="w-100 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 (
                            <div
                                className='d-flex align-items-center flex-column rounded p-3'
                                key={event.id}
                                style={{ background: event.backgroundColor, gap: '.5rem' }}
                            >
                                <h4 className='font-weight-bold' style={{ color: event.textColor }}>{event.title}</h4>
                                <span style={{ color: event.textColor }}>{`${eventStart} - ${eventEnd}`}</span>
                                <a
                                    className="btn btn-primary"
                                    href={event.url}
                                >
                                    Ingresar
                                </a>
                            </div>
                        )
                    })
                    : <div className="view-more">No hay eventos</div>
                }
            </div>
        </div>
    )
}

export default EventsList