Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { axios } from '../../utils';
import { useDispatch } from 'react-redux';
import { styled, Typography } from '@mui/material';
import { addNotification } from '../../redux/notification/notification.actions';

import { useFetch } from '@hooks';

import WidgetLayout from '../widgets/WidgetLayout';
import EmptySection from '../UI/EmptySection';

const StyledContainer = styled(WidgetLayout)`
  padding: 1rem;
  ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }
`;

const StyledEventContainer = styled('div')(({ theme }) => ({
  display: 'flex',
  flexDirection: 'column',
  cursor: 'pointer',
  padding: '0.5rem',
  borderRadius: theme.shape.borderRadius
}));

const EventsList = () => {
  const { data: eventsAndTasks } = useFetch('/helpers/next-events', []);
  const dispatch = useDispatch();

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

        if (!success) {
          throw new Error('Error interno. Por favor, intente más tarde.');
        }

        window.open(data, '_blank');
      })
      .catch((err) => {
        dispatch(addNotification({ style: 'danger', msg: err.message }));
      });
  };

  const formatDate = (date, allDay) => {
    const dateObj = new Date(date);

    if (isNaN(dateObj)) {
      return date;
    }

    return new Intl.DateTimeFormat('es', {
      dateStyle: 'medium',
      timeStyle: allDay ? undefined : 'short',
      timeZone: 'UTC',
      hour12: allDay ? undefined : true
    }).format(dateObj);
  };

  return (
    <StyledContainer>
      <h2>Eventos y Tareas</h2>

      <ul>
        {eventsAndTasks.length ? (
          eventsAndTasks.map(
            ({ id, allDay, url, title, backgroundColor, start, end, textColor, source }) => {
              return (
                <li key={id}>
                  <StyledEventContainer
                    sx={{ backgroundColor }}
                    onClick={() =>
                      source === 'external' ? window.open(url, '_blank') : getAdminAuth(url)
                    }
                  >
                    <Typography variant='h4' sx={{ color: textColor }}>
                      <b>Evento: </b>
                      {title}
                    </Typography>
                    <Typography variant='h4' sx={{ color: textColor }}>
                      <b>Inicio: </b>
                      {formatDate(start, allDay)}
                    </Typography>
                    {end && (
                      <Typography variant='h4' sx={{ color: textColor }}>
                        <b>Fin: </b>
                        {formatDate(end, allDay)}
                      </Typography>
                    )}
                    <Typography variant='h4' sx={{ color: textColor }}>
                      <b>Tipo: </b>
                      {source === 'external' ? 'Externo' : 'Interno'}
                    </Typography>
                  </StyledEventContainer>
                </li>
              );
            }
          )
        ) : (
          <EmptySection message='No hay eventos disponibles' />
        )}
      </ul>
    </StyledContainer>
  );
};

export default EventsList;