Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
7279 stevensc 1 
import React, { useEffect, useState } from 'react'
2 
import { axios } from '../../utils'
3 
import { useDispatch } from 'react-redux'
4 
import { addNotification } from '../../redux/notification/notification.actions'
5 
import styled from 'styled-components'
6 
 
7 
import WidgetLayout from '../widgets/WidgetLayout'
8 
import EmptySection from '../UI/EmptySection'
9 
 
10 
const StyledContainer = styled(WidgetLayout)`
11 
  padding: 1rem;
12 
  h2 {
13 
    font-size: 1.1rem;
14 
    font-weight: 600;
15 
    color: var(--title-color);
16 
  }
7280 stevensc 17 
  ul {
18 
    display: flex;
19 
    flex-direction: column;
7281 stevensc 20 
    gap: 0.5rem;
7280 stevensc 21 
    margin-top: 1rem;
22 
  }
23 
  a {
24 
    display: block;
25 
  }
7279 stevensc 26 
`
27 
 
28 
const EventsList = () => {
29 
  const [eventsAndTasks, setEventsAndTasks] = useState([])
30 
  const dispatch = useDispatch()
31 
 
32 
  const getEvents = () => {
33 
    axios
34 
      .get('/helpers/next-events')
35 
      .then((response) => {
36 
        const { success, data } = response.data
37 
 
38 
        if (!success) {
39 
          dispatch(addNotification({ style: 'danger', message: data }))
40 
          return
41 
        }
42 
 
43 
        setEventsAndTasks(data)
44 
      })
45 
      .catch((error) => {
46 
        dispatch(
47 
          addNotification({ style: 'danger', message: 'Ha ocurrido un error' })
48 
        )
49 
        throw new Error(error)
50 
      })
51 
  }
52 
 
53 
  useEffect(() => {
54 
    getEvents()
55 
  }, [])
56 
 
57 
  return (
58 
    <StyledContainer>
59 
      <h2>Eventos y Tareas</h2>
60 
 
61 
      <ul>
62 
        {eventsAndTasks.length ? (
63 
          eventsAndTasks.map((event) => {
64 
            const eventStart = new Date(event.start).toLocaleString()
65 
            const eventEnd = new Date(event.end).toLocaleString()
66 
 
67 
            return (
68 
              <li key={event.id}>
69 
                <a href={event.url} target="_blank" rel="noreferrer">
70 
                  <div
71 
                    className="calendar-event"
72 
                    style={{
73 
                      color: event.textColor,
74 
                      background: event.backgroundColor,
75 
                    }}
76 
                  >
77 
                    <h4>
78 
                      <b>Evento: </b> {event.title}
79 
                    </h4>
80 
                    <span>
81 
                      <b>Inicio: </b>
82 
                      {eventStart}
83 
                    </span>
84 
                    {event.end && (
85 
                      <span>
86 
                        <b>Fin: </b>
87 
                        {eventEnd}
88 
                      </span>
89 
                    )}
90 
                  </div>
91 
                </a>
92 
              </li>
93 
            )
94 
          })
95 
        ) : (
96 
          <EmptySection message="No hay eventos disponibles" />
97 
        )}
98 
      </ul>
99 
    </StyledContainer>
100 
  )
101 
}
102 
 
103 
export default EventsList