Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev Autor Línea Nro. Línea
3432 stevensc 1
import React from "react";
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";
5 stevensc 6
 
3432 stevensc 7
import { useFetch } from "@hooks";
2776 stevensc 8
 
3432 stevensc 9
import WidgetLayout from "../widgets/WidgetLayout";
10
import EmptySection from "../UI/EmptySection";
5 stevensc 11
 
12
const StyledContainer = styled(WidgetLayout)`
13
  padding: 1rem;
14
  ul {
15
    display: flex;
16
    flex-direction: column;
17
    gap: 0.5rem;
709 stevensc 18
    margin-top: 0.5rem;
5 stevensc 19
  }
3432 stevensc 20
`;
5 stevensc 21
 
709 stevensc 22
const StyledEventContainer = styled.div`
23
  display: flex;
24
  flex-direction: column;
25
  cursor: pointer;
26
  padding: 0.5rem;
27
  border-radius: ${(props) => props.theme.border.radius};
3432 stevensc 28
  background-color: ${(props) => props.background || "transparent"};
711 stevensc 29
  h4 {
712 stevensc 30
    color: ${(props) => props.theme.font.color.title};
711 stevensc 31
  }
710 stevensc 32
  b {
33
    color: ${(props) => props.theme.font.color.title};
712 stevensc 34
    font-weight: 600;
710 stevensc 35
  }
36
  span {
37
    color: ${(props) => props.color || props.theme.font.color.primary};
711 stevensc 38
    font-weight: 400;
710 stevensc 39
  }
3432 stevensc 40
`;
709 stevensc 41
 
5 stevensc 42
const EventsList = () => {
3432 stevensc 43
  const { data: eventsAndTasks } = useFetch("/helpers/next-events", []);
44
  const dispatch = useDispatch();
5 stevensc 45
 
709 stevensc 46
  const getAdminAuth = (url) => {
5 stevensc 47
    axios
48
      .get(url)
3432 stevensc 49
      .then((response) => {
50
        const { data, success } = response.data;
5 stevensc 51
 
52
        if (!success) {
3432 stevensc 53
          throw new Error("Error interno. Por favor, intente más tarde.");
5 stevensc 54
        }
55
 
3432 stevensc 56
        window.open(data, "_blank");
5 stevensc 57
      })
655 stevensc 58
      .catch((err) => {
3432 stevensc 59
        dispatch(addNotification({ style: "danger", msg: err.message }));
60
      });
61
  };
5 stevensc 62
 
893 stevensc 63
  const formatDate = (date, allDay) => {
3432 stevensc 64
    const dateObj = new Date(date);
736 stevensc 65
 
66
    if (isNaN(dateObj)) {
3432 stevensc 67
      return date;
736 stevensc 68
    }
69
 
3432 stevensc 70
    return new Intl.DateTimeFormat("es", {
71
      dateStyle: "medium",
72
      timeStyle: allDay ? undefined : "short",
73
      timeZone: "UTC",
74
      hour12: allDay ? undefined : true,
75
    }).format(dateObj);
76
  };
735 stevensc 77
 
5 stevensc 78
  return (
79
    <StyledContainer>
80
      <h2>Eventos y Tareas</h2>
81
 
82
      <ul>
83
        {eventsAndTasks.length ? (
707 stevensc 84
          eventsAndTasks.map(
710 stevensc 85
            ({
86
              id,
893 stevensc 87
              allDay,
710 stevensc 88
              url,
89
              title,
90
              backgroundColor,
91
              start,
92
              end,
93
              textColor,
3432 stevensc 94
              source,
710 stevensc 95
            }) => {
707 stevensc 96
              return (
97
                <li key={id}>
709 stevensc 98
                  <StyledEventContainer
99
                    color={textColor}
100
                    background={backgroundColor}
710 stevensc 101
                    onClick={() =>
3432 stevensc 102
                      source === "external"
103
                        ? window.open(url, "_blank")
710 stevensc 104
                        : getAdminAuth(url)
105
                    }
5 stevensc 106
                  >
107
                    <h4>
707 stevensc 108
                      <b>Evento: </b>
109
                      {title}
5 stevensc 110
                    </h4>
111
                    <span>
112
                      <b>Inicio: </b>
893 stevensc 113
                      {formatDate(start, allDay)}
5 stevensc 114
                    </span>
707 stevensc 115
                    {end && (
5 stevensc 116
                      <span>
117
                        <b>Fin: </b>
893 stevensc 118
                        {formatDate(end, allDay)}
5 stevensc 119
                      </span>
120
                    )}
709 stevensc 121
                  </StyledEventContainer>
707 stevensc 122
                </li>
3432 stevensc 123
              );
707 stevensc 124
            }
125
          )
5 stevensc 126
        ) : (
3432 stevensc 127
          <EmptySection message="No hay eventos disponibles" />
5 stevensc 128
        )}
129
      </ul>
130
    </StyledContainer>
3432 stevensc 131
  );
132
};
5 stevensc 133
 
3432 stevensc 134
export default EventsList;