Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useState } from 'react'

import { axios } from '../../utils'

import { useDispatch } from 'react-redux'

import { addNotification } from '../../redux/notification/notification.actions'

import styled from 'styled-components'

import WidgetLayout from '../widgets/WidgetLayout'

import EmptySection from '../UI/EmptySection'

const StyledContainer = styled(WidgetLayout)`

  padding: 1rem;

  h2 {

    font-size: 1.1rem;

    font-weight: 600;

    color: var(--title-color);

  }

`

const EventsList = () => {

  const [eventsAndTasks, setEventsAndTasks] = useState([])

  const dispatch = useDispatch()

  const getEvents = () => {

    axios

      .get('/helpers/next-events')

      .then((response) => {

        const { success, data } = response.data

        if (!success) {

          dispatch(addNotification({ style: 'danger', message: data }))

          return

        }

        setEventsAndTasks(data)

      })

      .catch((error) => {

        dispatch(

          addNotification({ style: 'danger', message: 'Ha ocurrido un error' })

        )

        throw new Error(error)

      })

  }

  useEffect(() => {

    getEvents()

  }, [])

  return (

    <StyledContainer>

      <h2>Eventos y Tareas</h2>

      <ul>

        {eventsAndTasks.length ? (

          eventsAndTasks.map((event) => {

            const eventStart = new Date(event.start).toLocaleString()

            const eventEnd = new Date(event.end).toLocaleString()

            return (

              <li key={event.id}>

                <a href={event.url} target="_blank" rel="noreferrer">

                  <div

                    className="calendar-event"

                    style={{

                      color: event.textColor,

                      background: event.backgroundColor,

                    }}

                  >

                    <h4>

                      <b>Evento: </b> {event.title}

                    </h4>

                    <span>

                      <b>Inicio: </b>

                      {eventStart}

                    </span>

                    {event.end && (

                      <span>

                        <b>Fin: </b>

                        {eventEnd}

                      </span>

                    )}

                  </div>

                </a>

              </li>

            )

          })

        ) : (

          <EmptySection message="No hay eventos disponibles" />

        )}

      </ul>

    </StyledContainer>

  )

}

export default EventsList