Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 2776 Rev 3432
Línea 1... Línea 1...
1 
import React 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 
 
Línea 7... Línea 7...
7 
import { useFetch } from '@hooks'
 7 
import { useFetch } from "@hooks";
8 
 
 8 
 
Línea 9... Línea 9...
9 
import WidgetLayout from '../widgets/WidgetLayout'
 9 
import WidgetLayout from "../widgets/WidgetLayout";
10 
import EmptySection from '../UI/EmptySection'
 10 
import EmptySection from "../UI/EmptySection";
11 
 
 11 
 
12 
const StyledContainer = styled(WidgetLayout)`
 12 
const StyledContainer = styled(WidgetLayout)`
13 
  padding: 1rem;
 13 
  padding: 1rem;
14 
  ul {
 14 
  ul {
15 
    display: flex;
 15 
    display: flex;
16 
    flex-direction: column;
 16 
    flex-direction: column;
17 
    gap: 0.5rem;
 17 
    gap: 0.5rem;
Línea 18... Línea 18...
18 
    margin-top: 0.5rem;
 18 
    margin-top: 0.5rem;
19 
  }
 19 
  }
20 
`
 20 
`;
21 
 
 21 
 
22 
const StyledEventContainer = styled.div`
 22 
const StyledEventContainer = styled.div`
23 
  display: flex;
 23 
  display: flex;
24 
  flex-direction: column;
 24 
  flex-direction: column;
25 
  cursor: pointer;
 25 
  cursor: pointer;
26 
  padding: 0.5rem;
 26 
  padding: 0.5rem;
27 
  border-radius: ${(props) => props.theme.border.radius};
 27 
  border-radius: ${(props) => props.theme.border.radius};
28 
  background-color: ${(props) => props.background || 'transparent'};
 28 
  background-color: ${(props) => props.background || "transparent"};
29 
  h4 {
 29 
  h4 {
Línea 35... Línea 35...
35 
  }
 35 
  }
36 
  span {
 36 
  span {
37 
    color: ${(props) => props.color || props.theme.font.color.primary};
 37 
    color: ${(props) => props.color || props.theme.font.color.primary};
38 
    font-weight: 400;
 38 
    font-weight: 400;
39 
  }
 39 
  }
40 
`
 40 
`;
Línea 41... Línea 41...
41 
 
 41 
 
42 
const EventsList = () => {
 42 
const EventsList = () => {
43 
  const { data: eventsAndTasks } = useFetch('/helpers/next-events', [])
 43 
  const { data: eventsAndTasks } = useFetch("/helpers/next-events", []);
Línea 44... Línea 44...
44 
  const dispatch = useDispatch()
 44 
  const dispatch = useDispatch();
45 
 
 45 
 
46 
  const getAdminAuth = (url) => {
 46 
  const getAdminAuth = (url) => {
47 
    axios
 47 
    axios
48 
      .get(url)
 48 
      .get(url)
Línea 49... Línea 49...
49 
      .then(({ data: responseData }) => {
 49 
      .then((response) => {
50 
        const { data, success } = responseData
 50 
        const { data, success } = response.data;
51 
 
 51 
 
Línea 52... Línea 52...
52 
        if (!success) {
 52 
        if (!success) {
53 
          throw new Error('Error interno. Por favor, intente más tarde.')
 53 
          throw new Error("Error interno. Por favor, intente más tarde.");
54 
        }
 54 
        }
55 
 
 55 
 
56 
        window.open(data, '_blank')
 56 
        window.open(data, "_blank");
57 
      })
 57 
      })
Línea 58... Línea 58...
58 
      .catch((err) => {
 58 
      .catch((err) => {
59 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
 59 
        dispatch(addNotification({ style: "danger", msg: err.message }));
Línea 60... Línea 60...
60 
      })
 60 
      });
61 
  }
 61 
  };
62 
 
 62 
 
Línea 63... Línea 63...
63 
  const formatDate = (date, allDay) => {
 63 
  const formatDate = (date, allDay) => {
64 
    const dateObj = new Date(date)
 64 
    const dateObj = new Date(date);
65 
 
 65 
 
66 
    if (isNaN(dateObj)) {
 66 
    if (isNaN(dateObj)) {
67 
      return date
 67 
      return date;
68 
    }
 68 
    }
69 
 
 69 
 
Línea 70... Línea 70...
70 
    return new Intl.DateTimeFormat('es', {
 70 
    return new Intl.DateTimeFormat("es", {
71 
      dateStyle: 'medium',
 71 
      dateStyle: "medium",
72 
      timeStyle: allDay ? undefined : 'short',
 72 
      timeStyle: allDay ? undefined : "short",
Línea 89... Línea 89...
89 
              title,
 89 
              title,
90 
              backgroundColor,
 90 
              backgroundColor,
91 
              start,
 91 
              start,
92 
              end,
 92 
              end,
93 
              textColor,
 93 
              textColor,
94 
              source
 94 
              source,
95 
            }) => {
 95 
            }) => {
96 
              return (
 96 
              return (
97 
                <li key={id}>
 97 
                <li key={id}>
98 
                  <StyledEventContainer
 98 
                  <StyledEventContainer
99 
                    color={textColor}
 99 
                    color={textColor}
100 
                    background={backgroundColor}
 100 
                    background={backgroundColor}
101 
                    onClick={() =>
 101 
                    onClick={() =>
102 
                      source === 'external'
 102 
                      source === "external"
103 
                        ? window.open(url, '_blank')
 103 
                        ? window.open(url, "_blank")
104 
                        : getAdminAuth(url)
 104 
                        : getAdminAuth(url)
105 
                    }
 105 
                    }
106 
                  >
 106 
                  >
107 
                    <h4>
 107 
                    <h4>
108 
                      <b>Evento: </b>
 108 
                      <b>Evento: </b>
Línea 118... Línea 118...
118 
                        {formatDate(end, allDay)}
 118 
                        {formatDate(end, allDay)}
119 
                      </span>
 119 
                      </span>
120 
                    )}
 120 
                    )}
121 
                  </StyledEventContainer>
 121 
                  </StyledEventContainer>
122 
                </li>
 122 
                </li>
123 
              )
 123 
              );
124 
            }
 124 
            }
125 
          )
 125 
          )
126 
        ) : (
 126 
        ) : (
127 
          <EmptySection message='No hay eventos disponibles' />
 127 
          <EmptySection message="No hay eventos disponibles" />
128 
        )}
 128 
        )}
129 
      </ul>
 129 
      </ul>
130 
    </StyledContainer>
 130 
    </StyledContainer>
131 
  )
 131 
  );
132 
}
 132 
};
Línea 133... Línea 133...
133 
 
 133