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);
  }
  ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
  }
  a {
    display: block;
  }
`

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

  const getBackendVarUrl = (url) => {
    axios
      .get(url)
      .then((response) => {
        const { data, success } = response.data

        if (!success) {
          dispatch(
            addNotification({
              style: 'danger',
              msg: 'Error interno. Por favor, intente más tarde.',
            })
          )
          return
        }

        window.open(data, '_blank')
      })
      .catch((error) => {
        dispatch(
          addNotification({ style: 'danger', message: 'Ha ocurrido un error' })
        )
        throw new Error(error)
      })
  }

  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) => {
            return (
              <li key={event.id}>
                <a
                  href={event.url}
                  onClick={(e) => {
                    e.preventDefault()
                    getBackendVarUrl(event.url)
                  }}
                >
                  <div
                    className="calendar-event"
                    style={{
                      color: event.textColor,
                      background: event.backgroundColor,
                    }}
                  >
                    <h4>
                      <b>Evento: </b> {event.title}
                    </h4>
                    <span>
                      <b>Inicio: </b>
                      {event.start}
                    </span>
                    {event.end && (
                      <span>
                        <b>Fin: </b>
                        {event.end}
                      </span>
                    )}
                  </div>
                </a>
              </li>
            )
          })
        ) : (
          <EmptySection message="No hay eventos disponibles" />
        )}
      </ul>
    </StyledContainer>
  )
}

export default EventsList