Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from "react";
import { axios } from "../../utils";
import { useDispatch } from "react-redux";
import { addNotification } from "store/notification/notification.actions";
import { Grid } from "@mui/material";
import { Calendar, momentLocalizer } from "react-big-calendar";
import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
import moment from "moment";

import EventsList from "components/calendar/EventsList";
import EventModal from "components/calendar/EventModal";

import "react-big-calendar/lib/sass/styles.scss";

moment.locale("es");
const localizer = momentLocalizer(moment);

const CalendarPage = () => {
  const [events, setEvents] = useState([]);
  const [selectedEvent, setSelectedEvent] = useState(null);
  const [modalShow, setModalShow] = useState(false);
  const dispatch = useDispatch();

  const selectEvent = (event) => {
    setSelectedEvent(event);
    setModalShow(true);
  };

  const unselectEvent = () => {
    setSelectedEvent(null);
    setModalShow(false);
  };

  useEffect(() => {
    axios
      .get("/calendar/events")
      .then((response) => {
        const { data, success } = response.data;

        if (!success) {
          const errorMessage =
            typeof data === "string"
              ? data
              : "Error interno. Por favor, intente más tarde.";
          throw new Error(errorMessage);
        }

        const formattedEvents = data.map((event) => {
          if (event.allDay) {
            return {
              ...event,
              start: new Date(event.start.replace("-", "/")),
              end: new Date(event.start.replace("-", "/")),
            };
          }

          return {
            ...event,
            start: new Date(event.start),
            end: new Date(event.end),
          };
        });

        setEvents(formattedEvents);
      })
      .catch((err) => {
        dispatch(addNotification({ style: "danger", msg: err.message }));
      });
  }, []);

  return (
    <>
      <Grid container spacing={1}>
        <Grid item xs={12} md={8} spacing={3}>
          <Calendar
            localizer={localizer}
            events={events}
            views={["month", "week", "day"]}
            popup={false}
            defaultDate={new Date()}
            defaultView="month"
            selectable
            onSelectEvent={selectEvent}
            onShowMore={(events) => this.setState({ showModal: true, events })}
            messages={{
              next: <ArrowForwardIosIcon />,
              previous: <ArrowBackIosIcon />,
              today: "Hoy",
              month: "Mes",
              week: "Semana",
              day: "Día",
              allDay: "Todo el día",
              date: "Fecha",
              time: "Hora",
              event: "Evento",
              noEventsInRange: "Sin eventos disponibles",
            }}
            eventPropGetter={(event) => {
              const backgroundColor = event.backgroundColor
                ? event.backgroundColor
                : "blue";
              const color = event.textColor ? event.textColor : "#fff";
              return { style: { backgroundColor, color } };
            }}
          />
        </Grid>
        <Grid item xs={12} md={4}>
          <EventsList />
        </Grid>
      </Grid>
      <EventModal
        show={modalShow}
        event={selectedEvent}
        onClose={unselectEvent}
      />
    </>
  );
};

export default CalendarPage;