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(({ data: responseData }) => {

        const { data, success } = responseData

        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