Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4703 | Rev 4705 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
4189 stevensc 1 
import React, { useEffect, useState } from 'react'
4191 stevensc 2 
import axios from '../../utils/axios'
4189 stevensc 3 
import { useDispatch } from 'react-redux'
4 
import { addNotification } from '../../redux/notification/notification.actions'
4188 stevensc 5 
 
6 
const EventsList = () => {
4701 stevensc 7 
    const [events, setEvents] = useState([])
8 
    const typeLabels = {
9 
        event: 'Evento',
10 
        task: 'Tarea',
4188 stevensc 11 
 
4701 stevensc 12 
    }
4189 stevensc 13 
    const dispatch = useDispatch()
14 
 
4188 stevensc 15 
    const getEvents = async () => {
16 
        try {
4702 stevensc 17 
            const { data: response } = await axios.get('/helpers/next-events')
4188 stevensc 18 
 
4189 stevensc 19 
            if (!response.success) {
20 
                dispatch(addNotification({ style: 'danger', message: response.data }))
21 
                return
22 
            }
4188 stevensc 23 
 
4189 stevensc 24 
            setEvents(response.data)
4188 stevensc 25 
        } catch (error) {
4189 stevensc 26 
            dispatch(addNotification({ style: 'danger', message: 'Ha ocurrido un error' }))
27 
            console.log(`Error: ${error.message}`)
4188 stevensc 28 
        }
29 
    }
4189 stevensc 30 
 
4188 stevensc 31 
    useEffect(() => {
32 
        getEvents()
33 
    }, [])
34 
 
4701 stevensc 35 
 
36 
 
4188 stevensc 37 
    return (
4190 stevensc 38 
        <div className='peopleYouMayKnow'>
4189 stevensc 39 
            <div className="sd-title d-flex align-items-center justify-content-between">
40 
                <h3>Proximos eventos</h3>
41 
            </div>
4704 stevensc 42 
            <div className="d-flex flex-column" style={{ gap: '.5rem' }}>
4189 stevensc 43 
                {events.length
4193 stevensc 44 
                    ? events.map((event) => {
45 
                        const eventStart = new Date(event.start).toLocaleString()
46 
                        const eventEnd = new Date(event.end).toLocaleString()
47 
 
48 
                        return (
4223 stevensc 49 
                            <a
4194 stevensc 50 
                                key={event.id}
4223 stevensc 51 
                                href={event.url}
52 
                                target='_blank'
53 
                                rel="noreferrer"
4194 stevensc 54 
                            >
4703 stevensc 55 
                                <div className='calendar-event' style={{ color: event.textColor, background: event.backgroundColor }}>
4223 stevensc 56 
                                    <h4>
4701 stevensc 57 
                                        <b>{typeLabels[event.type]}: </b> {event.title}
4223 stevensc 58 
                                    </h4>
59 
                                    <span>
60 
                                        <b>Inicio: </b>{eventStart}
61 
                                    </span>
62 
                                    <span>
63 
                                        <b>Fin: </b>{eventEnd}
64 
                                    </span>
65 
                                </div>
66 
                            </a>
4193 stevensc 67 
                        )
68 
                    })
4189 stevensc 69 
                    : <div className="view-more">No hay eventos</div>
70 
                }
71 
            </div>
72 
        </div>
4188 stevensc 73 
    )
74 
}
75 
 
76 
export default EventsList