Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5066 | | 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 = () => {
5066 stevensc 7 
  const [eventsAndTasks, setEventsAndTasks] = useState([])
8 
  const dispatch = useDispatch()
4189 stevensc 9 
 
5066 stevensc 10 
  const getEvents = async () => {
11 
    try {
12 
      const { data: response } = await axios.get('/helpers/next-events')
4188 stevensc 13 
 
5066 stevensc 14 
      if (!response.success) {
15 
        dispatch(addNotification({ style: 'danger', message: response.data }))
16 
        return
17 
      }
4188 stevensc 18 
 
5066 stevensc 19 
      setEventsAndTasks(response.data)
20 
    } catch (error) {
6359 stevensc 21 
      dispatch(
22 
        addNotification({ style: 'danger', message: 'Ha ocurrido un error' })
23 
      )
24 
      console.log(`Error: ${error}`)
4188 stevensc 25 
    }
5066 stevensc 26 
  }
4189 stevensc 27 
 
5066 stevensc 28 
  useEffect(() => {
29 
    getEvents()
30 
  }, [])
4188 stevensc 31 
 
5066 stevensc 32 
  return (
6359 stevensc 33 
    <div className="task-widget">
5066 stevensc 34 
      <div className="sd-title d-flex align-items-center justify-content-between">
35 
        <h3>Eventos y Tareas</h3>
36 
      </div>
6359 stevensc 37 
      <div
38 
        className="d-flex flex-column"
39 
        style={{ gap: '.5rem', maxHeight: 500, overflow: 'hidden scroll' }}
40 
      >
41 
        {eventsAndTasks.length ? (
42 
          eventsAndTasks.map((event) => {
5066 stevensc 43 
            const eventStart = new Date(event.start).toLocaleString()
44 
            const eventEnd = new Date(event.end).toLocaleString()
4701 stevensc 45 
 
5066 stevensc 46 
            return (
47 
              <a
48 
                key={event.id}
49 
                href={event.url}
6359 stevensc 50 
                target="_blank"
5066 stevensc 51 
                rel="noreferrer"
52 
              >
6359 stevensc 53 
                <div
54 
                  className="calendar-event"
55 
                  style={{
56 
                    color: event.textColor,
57 
                    background: event.backgroundColor,
58 
                  }}
59 
                >
5066 stevensc 60 
                  <h4>
61 
                    <b>Evento: </b> {event.title}
62 
                  </h4>
63 
                  <span>
6359 stevensc 64 
                    <b>Inicio: </b>
65 
                    {eventStart}
5066 stevensc 66 
                  </span>
6359 stevensc 67 
                  {event.end && (
5066 stevensc 68 
                    <span>
6359 stevensc 69 
                      <b>Fin: </b>
70 
                      {eventEnd}
5066 stevensc 71 
                    </span>
6359 stevensc 72 
                  )}
5066 stevensc 73 
                </div>
74 
              </a>
75 
            )
76 
          })
6359 stevensc 77 
        ) : (
78 
          <div className="view-more">No hay eventos</div>
79 
        )}
5066 stevensc 80 
      </div>
81 
    </div>
82 
  )
4188 stevensc 83 
}
84 
 
5066 stevensc 85 
export default EventsList