Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4984 | 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 = () => {
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) {
21
      dispatch(addNotification({ style: 'danger', message: 'Ha ocurrido un error' }))
22
      console.log(`Error: ${error.message}`)
4188 stevensc 23
    }
5066 stevensc 24
  }
4189 stevensc 25
 
5066 stevensc 26
  useEffect(() => {
27
    getEvents()
28
  }, [])
4188 stevensc 29
 
5066 stevensc 30
  return (
31
    <div className='task-widget'>
32
      <div className="sd-title d-flex align-items-center justify-content-between">
33
        <h3>Eventos y Tareas</h3>
34
      </div>
35
      <div className="d-flex flex-column" style={{ gap: '.5rem', maxHeight: 500, overflow: 'hidden scroll' }}>
36
        {eventsAndTasks.length
37
          ? eventsAndTasks.map((event) => {
38
            const eventStart = new Date(event.start).toLocaleString()
39
            const eventEnd = new Date(event.end).toLocaleString()
4701 stevensc 40
 
5066 stevensc 41
            return (
42
              <a
43
                key={event.id}
44
                href={event.url}
45
                target='_blank'
46
                rel="noreferrer"
47
              >
48
                <div className='calendar-event' style={{ color: event.textColor, background: event.backgroundColor }}>
49
                  <h4>
50
                    <b>Evento: </b> {event.title}
51
                  </h4>
52
                  <span>
53
                    <b>Inicio: </b>{eventStart}
54
                  </span>
55
                  {event.end &&
56
                    <span>
57
                      <b>Fin: </b>{eventEnd}
58
                    </span>
59
                  }
60
                </div>
61
              </a>
62
            )
63
          })
64
          : <div className="view-more">No hay eventos</div>
65
        }
66
      </div>
67
    </div>
68
  )
4188 stevensc 69
}
70
 
5066 stevensc 71
export default EventsList