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;