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;