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'>

        <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