Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4704 | Rev 4706 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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