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='rounded' key={event.id} style={{ background: event.backgroundColor }}>

                                <div className="d-flex align-items-center flex-column" style={{ gap: '.5rem' }}>

                                    <h4 style={{ color: event.textColor }}>{event.title}</h4>

                                    <span style={{ color: event.textColor }}>{`${eventStart} - ${eventEnd}`}</span>

                                </div>

                                <div className="d-flex align-items-center flex-column" style={{ gap: '.5rem' }}>

                                    <a

                                        className="btn btn-primary"

                                        href={event.url}

                                    >

                                        Ingresar

                                    </a>

                                </div>

                            </div>

                        )

                    })

                    : <div className="view-more">No hay eventos</div>

                }

            </div>

        </div>

    )

}

export default EventsList