Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 706 | Rev 709 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 706 Rev 707
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from 'react'
 1 
import React from 'react'
2 
import { axios } from '../../utils'
 2 
import { axios } from '../../utils'
3 
import { useDispatch } from 'react-redux'
 3 
import { useDispatch } from 'react-redux'
4 
import { addNotification } from '../../redux/notification/notification.actions'
 4 
import { addNotification } from '../../redux/notification/notification.actions'
5 
import styled from 'styled-components'
 5 
import styled from 'styled-components'
Línea 6... Línea 6...
6 
 
 6 
 
7 
import WidgetLayout from '../widgets/WidgetLayout'
 7 
import WidgetLayout from '../widgets/WidgetLayout'
- 
 
 8 
import EmptySection from '../UI/EmptySection'
Línea 8... Línea 9...
8 
import EmptySection from '../UI/EmptySection'
 9 
import useFetch from '../../hooks/useFetch'
9 
 
 10 
 
10 
const StyledContainer = styled(WidgetLayout)`
 11 
const StyledContainer = styled(WidgetLayout)`
11 
  padding: 1rem;
 12 
  padding: 1rem;
Línea 24... Línea 25...
24 
    display: block;
 25 
    display: block;
25 
  }
 26 
  }
26 
`
 27 
`
Línea 27... Línea 28...
27 
 
 28 
 
28 
const EventsList = () => {
 29 
const EventsList = () => {
29 
  const [eventsAndTasks, setEventsAndTasks] = useState([])
 30 
  const { data: eventsAndTasks } = useFetch('/helpers/next-events', [])
Línea 30... Línea 31...
30 
  const dispatch = useDispatch()
 31 
  const dispatch = useDispatch()
31 
 
 32 
 
32 
  const getBackendVarUrl = (url) => {
 33 
  const getBackendVarUrl = (url) => {
33 
    axios
 34 
    axios
34 
      .get(url)
 35 
      .get(url)
Línea 35... Línea 36...
35 
      .then(({ data: responseData }) => {
 36 
      .then(({ data: responseData }) => {
36 
        const { data, success } = responseData
 - 
 
37 
 
 - 
 
38 
        if (!success) {
 - 
 
39 
          dispatch(
 37 
        const { data, success } = responseData
40 
            addNotification({
 - 
 
41 
              style: 'danger',
 - 
 
42 
              msg: 'Error interno. Por favor, intente más tarde.'
 - 
 
43 
            })
 38 
 
Línea 44... Línea 39...
44 
          )
 39 
        if (!success) {
45 
          return
 40 
          throw new Error('Error interno. Por favor, intente más tarde.')
46 
        }
 41 
        }
47 
 
 - 
 
48 
        window.open(data, '_blank')
 - 
 
49 
      })
 42 
 
50 
      .catch((err) => {
 43 
        window.open(data, '_blank')
51 
        console.log(err)
 44 
      })
Línea 52... Línea -...
52 
        const error = new Error('Error interno. Por favor, intente más tarde.')
 - 
 
53 
        dispatch(addNotification({ style: 'danger', message: error.message }))
 - 
 
54 
      })
 - 
 
55 
  }
 - 
 
56 
 
 - 
 
57 
  const getEvents = () => {
 - 
 
58 
    axios
 - 
 
59 
      .get('/helpers/next-events')
 - 
 
60 
      .then((response) => {
 - 
 
61 
        const { success, data } = response.data
 - 
 
62 
 
 - 
 
63 
        if (!success) {
 - 
 
64 
          dispatch(addNotification({ style: 'danger', message: data }))
 - 
 
65 
          return
 - 
 
66 
        }
 - 
 
67 
 
 - 
 
68 
        setEventsAndTasks(data)
 - 
 
69 
      })
 - 
 
70 
      .catch((err) => {
 - 
 
71 
        dispatch(addNotification({ style: 'danger', message: err.message }))
 - 
 
72 
      })
 - 
 
73 
  }
 - 
 
74 
 
 45 
      .catch((err) => {
75 
  useEffect(() => {
 46 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
76 
    getEvents()
 47 
      })
Línea 77... Línea 48...
77 
  }, [])
 48 
  }
78 
 
 49 
 
79 
  return (
 50 
  return (
80 
    <StyledContainer>
 - 
 
81 
      <h2>Eventos y Tareas</h2>
 - 
 
82 
 
 - 
 
83 
      <ul>
 - 
 
84 
        {eventsAndTasks.length ? (
 - 
 
85 
          eventsAndTasks.map((event) => {
 - 
 
86 
            return (
 51 
    <StyledContainer>
87 
              <li key={event.id}>
 52 
      <h2>Eventos y Tareas</h2>
88 
                <a
 53 
 
89 
                  href={event.url}
 54 
      <ul>
90 
                  onClick={(e) => {
 55 
        {eventsAndTasks.length ? (
91 
                    e.preventDefault()
 56 
          eventsAndTasks.map(
92 
                    getBackendVarUrl(event.url)
 57 
            ({ id, url, title, backgroundColor, start, end, textColor }) => {
93 
                  }}
 58 
              return (
94 
                >
 59 
                <li key={id}>
- 
 
 60 
                  <div
95 
                  <div
 61 
                    className='calendar-event'
96 
                    className='calendar-event'
 62 
                    style={{
97 
                    style={{
 63 
                      color: textColor,
- 
 
 64 
                      background: backgroundColor
98 
                      color: event.textColor,
 65 
                    }}
99 
                      background: event.backgroundColor
 66 
                    onClick={() => getBackendVarUrl(url)}
100 
                    }}
 67 
                  >
101 
                  >
 68 
                    <h4>
102 
                    <h4>
 69 
                      <b>Evento: </b>
103 
                      <b>Evento: </b> {event.title}
 70 
                      {title}
104 
                    </h4>
 71 
                    </h4>
105 
                    <span>
 72 
                    <span>
106 
                      <b>Inicio: </b>
 73 
                      <b>Inicio: </b>
107 
                      {event.start}
 74 
                      {start}
108 
                    </span>
 75 
                    </span>
109 
                    {event.end && (
 76 
                    {end && (
110 
                      <span>
 77 
                      <span>
111 
                        <b>Fin: </b>
 78 
                        <b>Fin: </b>
112 
                        {event.end}
 79 
                        {end}
113 
                      </span>
 80 
                      </span>
114 
                    )}
 81 
                    )}
115 
                  </div>
 82 
                  </div>
116 
                </a>
 83 
                </li>
117 
              </li>
 84 
              )
118 
            )
 85 
            }