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/css/react-big-calendar.css';

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;