Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev Autor Línea Nro. Línea
707 stevensc 1 
import React from 'react'
5 stevensc 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'
707 stevensc 9 
import useFetch from '../../hooks/useFetch'
5 stevensc 10 
 
11 
const StyledContainer = styled(WidgetLayout)`
12 
  padding: 1rem;
13 
  h2 {
14 
    font-size: 1.1rem;
15 
    font-weight: 600;
16 
    color: var(--title-color);
17 
  }
18 
  ul {
19 
    display: flex;
20 
    flex-direction: column;
21 
    gap: 0.5rem;
22 
    margin-top: 1rem;
23 
  }
24 
  a {
25 
    display: block;
26 
  }
27 
`
28 
 
29 
const EventsList = () => {
707 stevensc 30 
  const { data: eventsAndTasks } = useFetch('/helpers/next-events', [])
5 stevensc 31 
  const dispatch = useDispatch()
32 
 
33 
  const getBackendVarUrl = (url) => {
34 
    axios
35 
      .get(url)
706 stevensc 36 
      .then(({ data: responseData }) => {
37 
        const { data, success } = responseData
5 stevensc 38 
 
39 
        if (!success) {
707 stevensc 40 
          throw new Error('Error interno. Por favor, intente más tarde.')
5 stevensc 41 
        }
42 
 
43 
        window.open(data, '_blank')
44 
      })
655 stevensc 45 
      .catch((err) => {
707 stevensc 46 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
5 stevensc 47 
      })
48 
  }
49 
 
50 
  return (
51 
    <StyledContainer>
52 
      <h2>Eventos y Tareas</h2>
53 
 
54 
      <ul>
55 
        {eventsAndTasks.length ? (
707 stevensc 56 
          eventsAndTasks.map(
57 
            ({ id, url, title, backgroundColor, start, end, textColor }) => {
58 
              return (
59 
                <li key={id}>
5 stevensc 60 
                  <div
655 stevensc 61 
                    className='calendar-event'
5 stevensc 62 
                    style={{
707 stevensc 63 
                      color: textColor,
64 
                      background: backgroundColor
5 stevensc 65 
                    }}
707 stevensc 66 
                    onClick={() => getBackendVarUrl(url)}
5 stevensc 67 
                  >
68 
                    <h4>
707 stevensc 69 
                      <b>Evento: </b>
70 
                      {title}
5 stevensc 71 
                    </h4>
72 
                    <span>
73 
                      <b>Inicio: </b>
707 stevensc 74 
                      {start}
5 stevensc 75 
                    </span>
707 stevensc 76 
                    {end && (
5 stevensc 77 
                      <span>
78 
                        <b>Fin: </b>
707 stevensc 79 
                        {end}
5 stevensc 80 
                      </span>
81 
                    )}
82 
                  </div>
707 stevensc 83 
                </li>
84 
              )
85 
            }
86 
          )
5 stevensc 87 
        ) : (
655 stevensc 88 
          <EmptySection message='No hay eventos disponibles' />
5 stevensc 89 
        )}
90 
      </ul>
91 
    </StyledContainer>
92 
  )
93 
}
94 
 
95 
export default EventsList