Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 895 | Rev 2776 | 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 
  background-color: ${(props) => props.background || 'transparent'};
711 stevensc 28 
  h4 {
712 stevensc 29 
    color: ${(props) => props.theme.font.color.title};
711 stevensc 30 
  }
710 stevensc 31 
  b {
32 
    color: ${(props) => props.theme.font.color.title};
712 stevensc 33 
    font-weight: 600;
710 stevensc 34 
  }
35 
  span {
36 
    color: ${(props) => props.color || props.theme.font.color.primary};
711 stevensc 37 
    font-weight: 400;
710 stevensc 38 
  }
709 stevensc 39 
`
40 
 
5 stevensc 41 
const EventsList = () => {
707 stevensc 42 
  const { data: eventsAndTasks } = useFetch('/helpers/next-events', [])
5 stevensc 43 
  const dispatch = useDispatch()
44 
 
709 stevensc 45 
  const getAdminAuth = (url) => {
5 stevensc 46 
    axios
47 
      .get(url)
706 stevensc 48 
      .then(({ data: responseData }) => {
49 
        const { data, success } = responseData
5 stevensc 50 
 
51 
        if (!success) {
707 stevensc 52 
          throw new Error('Error interno. Por favor, intente más tarde.')
5 stevensc 53 
        }
54 
 
55 
        window.open(data, '_blank')
56 
      })
655 stevensc 57 
      .catch((err) => {
707 stevensc 58 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
5 stevensc 59 
      })
60 
  }
61 
 
893 stevensc 62 
  const formatDate = (date, allDay) => {
896 stevensc 63 
    const dateObj = new Date(date)
736 stevensc 64 
 
65 
    if (isNaN(dateObj)) {
66 
      return date
67 
    }
68 
 
893 stevensc 69 
    return new Intl.DateTimeFormat('es', {
894 stevensc 70 
      dateStyle: 'medium',
893 stevensc 71 
      timeStyle: allDay ? undefined : 'short',
896 stevensc 72 
      timeZone: 'UTC',
893 stevensc 73 
      hour12: allDay ? undefined : true
739 stevensc 74 
    }).format(dateObj)
735 stevensc 75 
  }
76 
 
5 stevensc 77 
  return (
78 
    <StyledContainer>
79 
      <h2>Eventos y Tareas</h2>
80 
 
81 
      <ul>
82 
        {eventsAndTasks.length ? (
707 stevensc 83 
          eventsAndTasks.map(
710 stevensc 84 
            ({
85 
              id,
893 stevensc 86 
              allDay,
710 stevensc 87 
              url,
88 
              title,
89 
              backgroundColor,
90 
              start,
91 
              end,
92 
              textColor,
93 
              source
94 
            }) => {
707 stevensc 95 
              return (
96 
                <li key={id}>
709 stevensc 97 
                  <StyledEventContainer
98 
                    color={textColor}
99 
                    background={backgroundColor}
710 stevensc 100 
                    onClick={() =>
101 
                      source === 'external'
102 
                        ? window.open(url, '_blank')
103 
                        : getAdminAuth(url)
104 
                    }
5 stevensc 105 
                  >
106 
                    <h4>
707 stevensc 107 
                      <b>Evento: </b>
108 
                      {title}
5 stevensc 109 
                    </h4>
110 
                    <span>
111 
                      <b>Inicio: </b>
893 stevensc 112 
                      {formatDate(start, allDay)}
5 stevensc 113 
                    </span>
707 stevensc 114 
                    {end && (
5 stevensc 115 
                      <span>
116 
                        <b>Fin: </b>
893 stevensc 117 
                        {formatDate(end, allDay)}
5 stevensc 118 
                      </span>
119 
                    )}
709 stevensc 120 
                  </StyledEventContainer>
707 stevensc 121 
                </li>
122 
              )
123 
            }
124 
          )
5 stevensc 125 
        ) : (
655 stevensc 126 
          <EmptySection message='No hay eventos disponibles' />
5 stevensc 127 
        )}
128 
      </ul>
129 
    </StyledContainer>
130 
  )
131 
}
132 
 
133 
export default EventsList