Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from "react";
import { axios } from "../../utils";
import { Container, Grid } from "@mui/material";
import { Calendar, momentLocalizer } from "react-big-calendar";
import moment from "moment";
import EventsList from "../../components/calendar/EventsList";
import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";

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

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

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

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

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

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

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

      const formattedData = events.map((event) => {
        const eventStart = new Date(event.start.replace(/-/g, "/"));
        const eventEnd = event.allDay
          ? eventStart
          : new Date(event.end.replace(/-/g, "/"));

        return {
          ...event,
          start: eventStart,
          end: eventEnd,
        };
      });

      setEvents(formattedData);
    });
  }, []);

  return (
    <>
      <Container
        as="main"
        className="px-0"
        sx={{ height: "100%", maxHeight: "70vh" }}
      >
        <Grid container spacing={2} sx={{ height: "100%" }}>
          <Grid item xs={12} md={8} spacing={3}>
            <Calendar
              views={["month", "week", "day", "agenda"]}
              selectable
              localizer={localizer}
              defaultDate={new Date()}
              defaultView="month"
              onSelectEvent={selectEvent}
              events={events}
              messages={{
                next: <ArrowForwardIosIcon />,
                previous: <ArrowBackIosIcon />,
                today: "Hoy",
                month: "Mes",
                week: "Semana",
                day: "Día",
                agenda: "Agenda",
                allDay: "Todo el día",
                date: "Fecha",
                time: "Hora",
                event: "Evento",
                showMore: "Ver más",
                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>
      </Container>
      <EventModal
        show={modalShow}
        event={selectedEvent}
        onClose={unselectEvent}
      />
    </>
  );
};

export default CalendarPage;