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,

                      color: textColor

                    }}

                    onClick={() =>

                      source === 'external' ? window.open(url, '_blank') : getAdminAuth(url)

                    }

                  >

                    <Typography variant='h4'>

                      <b>Evento: </b>

                      {title}

                    </Typography>

                    <Typography variant='h4'>

                      <b>Inicio: </b>

                      {formatDate(start, allDay)}

                    </Typography>

                    {end && (

                      <Typography variant='h4'>

                        <b>Fin: </b>

                        {formatDate(end, allDay)}

                      </Typography>

                    )}

                    <Typography variant='h4'>

                      <b>Tipo: </b>

                      {source === 'external' ? 'Externo' : 'Interno'}

                    </Typography>

                  </StyledEventContainer>

                </li>

              );

            }

          )

        ) : (

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

        )}

      </ul>

    </StyledContainer>

  );

};

export default EventsList;