Proyectos de Subversion LeadersLinked - SPA

Rev

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