Proyectos de Subversion LeadersLinked - SPA

import React from "react";
import { axios } from "../../utils";
import { useDispatch } from "react-redux";
import { addNotification } from "../../redux/notification/notification.actions";
import styled from "styled-components";

import { useFetch } from "@hooks";

import WidgetLayout from "../widgets/WidgetLayout";
import EmptySection from "../UI/EmptySection";

const StyledContainer = styled(WidgetLayout)`
  padding: 1rem;
  ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }
`;

const StyledEventContainer = styled.div`
  display: flex;
  flex-direction: column;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: ${(props) => props.theme.border.radius};
  background-color: ${(props) => props.background || "transparent"};
  h4 {
    color: ${(props) => props.theme.font.color.title};
  }
  b {
    color: ${(props) => props.theme.font.color.title};
    font-weight: 600;
  }
  span {
    color: ${(props) => props.color || props.theme.font.color.primary};
    font-weight: 400;
  }
`;

const EventsList = () => {
  const { data: eventsAndTasks } = useFetch("/helpers/next-events", []);
  const dispatch = useDispatch();

  const getAdminAuth = (url) => {
    axios
      .get(url)
      .then((response) => {
        const { data, success } = response.data;

        if (!success) {
          throw new Error("Error interno. Por favor, intente más tarde.");
        }

        window.open(data, "_blank");
      })
      .catch((err) => {
        dispatch(addNotification({ style: "danger", msg: err.message }));
      });
  };

  const formatDate = (date, allDay) => {
    const dateObj = new Date(date);

    if (isNaN(dateObj)) {
      return date;
    }

    return new Intl.DateTimeFormat("es", {
      dateStyle: "medium",
      timeStyle: allDay ? undefined : "short",
      timeZone: "UTC",
      hour12: allDay ? undefined : true,
    }).format(dateObj);
  };

  return (
    <StyledContainer>
      <h2>Eventos y Tareas</h2>

      <ul>
        {eventsAndTasks.length ? (
          eventsAndTasks.map(
            ({
              id,
              allDay,
              url,
              title,
              backgroundColor,
              start,
              end,
              textColor,
              source,
            }) => {
              return (
                <li key={id}>
                  <StyledEventContainer
                    color={textColor}
                    background={backgroundColor}
                    onClick={() =>
                      source === "external"
                        ? window.open(url, "_blank")
                        : getAdminAuth(url)
                    }
                  >
                    <h4>
                      <b>Evento: </b>
                      {title}
                    </h4>
                    <span>
                      <b>Inicio: </b>
                      {formatDate(start, allDay)}
                    </span>
                    {end && (
                      <span>
                        <b>Fin: </b>
                        {formatDate(end, allDay)}
                      </span>
                    )}
                  </StyledEventContainer>
                </li>
              );
            }
          )
        ) : (
          <EmptySection message="No hay eventos disponibles" />
        )}
      </ul>
    </StyledContainer>
  );
};

export default EventsList;