Proyectos de Subversion LeadersLinked - Antes de 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">
        <Grid container spacing={2}>
          <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