Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4706 | Rev 4711 | 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([])
4705 stevensc 8 
    const [tasks, setTasks] = useState([])
4701 stevensc 9 
    const typeLabels = {
10 
        event: 'Evento',
11 
        task: 'Tarea',
4188 stevensc 12 
 
4701 stevensc 13 
    }
4189 stevensc 14 
    const dispatch = useDispatch()
15 
 
4188 stevensc 16 
    const getEvents = async () => {
17 
        try {
4702 stevensc 18 
            const { data: response } = await axios.get('/helpers/next-events')
4188 stevensc 19 
 
4189 stevensc 20 
            if (!response.success) {
21 
                dispatch(addNotification({ style: 'danger', message: response.data }))
22 
                return
23 
            }
4188 stevensc 24 
 
4705 stevensc 25 
            const nextTasks = response.data.filter(event => event.type === 'task')
4706 stevensc 26 
            const nextEvents = response.data.filter(event => event.type === 'event')
4705 stevensc 27 
 
28 
            setTasks(nextTasks)
29 
            setEvents(nextEvents)
30 
 
4188 stevensc 31 
        } catch (error) {
4189 stevensc 32 
            dispatch(addNotification({ style: 'danger', message: 'Ha ocurrido un error' }))
33 
            console.log(`Error: ${error.message}`)
4188 stevensc 34 
        }
35 
    }
4189 stevensc 36 
 
4188 stevensc 37 
    useEffect(() => {
38 
        getEvents()
39 
    }, [])
40 
 
4705 stevensc 41 
    return (
42 
        <>
43 
            <div className='peopleYouMayKnow'>
44 
                <div className="sd-title d-flex align-items-center justify-content-between">
45 
                    <h3>Proximos eventos</h3>
46 
                </div>
47 
                <div className="d-flex flex-column" style={{ gap: '.5rem' }}>
48 
                    {events.length
49 
                        ? events.map((event) => {
50 
                            const eventStart = new Date(event.start).toLocaleString()
51 
                            const eventEnd = new Date(event.end).toLocaleString()
4701 stevensc 52 
 
4705 stevensc 53 
                            return (
54 
                                <a
55 
                                    key={event.id}
56 
                                    href={event.url}
57 
                                    target='_blank'
58 
                                    rel="noreferrer"
59 
                                >
60 
                                    <div className='calendar-event' style={{ color: event.textColor, background: event.backgroundColor }}>
61 
                                        <h4>
62 
                                            <b>Evento: </b> {event.title}
63 
                                        </h4>
64 
                                        <span>
65 
                                            <b>Inicio: </b>{eventStart}
66 
                                        </span>
67 
                                        <span>
68 
                                            <b>Fin: </b>{eventEnd}
69 
                                        </span>
70 
                                    </div>
71 
                                </a>
72 
                            )
73 
                        })
74 
                        : <div className="view-more">No hay eventos</div>
75 
                    }
76 
                </div>
4189 stevensc 77 
            </div>
4705 stevensc 78 
            <div className='peopleYouMayKnow mt-2'>
79 
                <div className="sd-title d-flex align-items-center justify-content-between">
80 
                    <h3>Proximas tareas</h3>
81 
                </div>
82 
                <div className="d-flex flex-column" style={{ gap: '.5rem' }}>
83 
                    {tasks.length
84 
                        ? tasks.map((task) => {
85 
                            const taskStart = new Date(task.start).toLocaleString()
86 
                            const taskEnd = new Date(task.end).toLocaleString()
4193 stevensc 87 
 
4705 stevensc 88 
                            return (
89 
                                <a
90 
                                    key={task.id}
91 
                                    href={task.url}
92 
                                    target='_blank'
93 
                                    rel="noreferrer"
94 
                                >
95 
                                    <div className='calendar-event' style={{ color: task.textColor, background: task.backgroundColor }}>
96 
                                        <h4>
97 
                                            <b>Tarea: </b> {task.title}
98 
                                        </h4>
99 
                                        <span>
100 
                                            <b>Inicio: </b>{taskStart}
101 
                                        </span>
102 
                                        <span>
103 
                                            <b>Fin: </b>{taskEnd}
104 
                                        </span>
105 
                                    </div>
106 
                                </a>
107 
                            )
108 
                        })
4707 stevensc 109 
                        : <div className="view-more">No hay tareas</div>
4705 stevensc 110 
                    }
111 
                </div>
4189 stevensc 112 
            </div>
4705 stevensc 113 
        </>
4188 stevensc 114 
    )
115 
}
116 
 
117 
export default EventsList