Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useState } from 'react'
import axios from '../../utils/axios'
import { useDispatch } from 'react-redux'
import { addNotification } from '../../redux/notification/notification.actions'

const EventsList = () => {
  const [eventsAndTasks, setEventsAndTasks] = useState([])
  const dispatch = useDispatch()

  const getEvents = async () => {
    try {
      const { data: response } = await axios.get('/helpers/next-events')

      if (!response.success) {
        dispatch(addNotification({ style: 'danger', message: response.data }))
        return
      }

      setEventsAndTasks(response.data)
    } catch (error) {
      dispatch(
        addNotification({ style: 'danger', message: 'Ha ocurrido un error' })
      )
      console.log(`Error: ${error}`)
    }
  }

  useEffect(() => {
    getEvents()
  }, [])

  return (
    <div className="task-widget">
      <div className="sd-title d-flex align-items-center justify-content-between">
        <h3>Eventos y Tareas</h3>
      </div>
      <div
        className="d-flex flex-column"
        style={{ gap: '.5rem', maxHeight: 500, overflow: 'hidden scroll' }}
      >
        {eventsAndTasks.length ? (
          eventsAndTasks.map((event) => {
            const eventStart = new Date(event.start).toLocaleString()
            const eventEnd = new Date(event.end).toLocaleString()

            return (
              <a
                key={event.id}
                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>
            )
          })
        ) : (
          <div className="view-more">No hay eventos</div>
        )}
      </div>
    </div>
  )
}

export default EventsList