Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { Grid, IconButton, List, ListItem, ListItemButton, ListItemText } from '@mui/material';
import Delete from '@mui/icons-material/Delete';

import { axios } from '@utils';
import { useFetch } from '@hooks';
import { addNotification } from '@store/notification/notification.actions';

import Widget from '@components/UI/Widget';
import Options from '@components/UI/Option';
import Spinner from '@components/UI/Spinner';
import EmptySection from '@components/UI/EmptySection';
import ProfileInfo from '@components/widgets/default/ProfileWidget';
import ConfirmModal from '@components/modals/ConfirmModal';

const NotificationsPage = () => {
  const { data: user } = useFetch('/helpers/menu');
  const { data: fetchedNotifications, isLoading } = useFetch('/notifications', []);
  const [notifications, setNotifications] = useState([]);
  const [deleteModalState, setDeleteModalState] = useState({
    show: false,
    type: 'multiple',
    url: null
  });
  const dispatch = useDispatch();

  // useFetch('/notifications/mark-all-read') POST request needed

  const deleteAllNotifications = () => {
    axios
      .post('/notifications/clear')
      .then(({ data: { data, success } }) => {
        if (!success) throw new Error('Error al borrar todas las notificaciones');
        setNotifications([]);
        dispatch(addNotification({ style: 'success', msg: data }));
      })
      .catch((err) => {
        dispatch(addNotification({ style: 'danger', msg: err.message }));
      });
  };

  const deleteNotification = (url) => {
    axios
      .post(url)
      .then(({ data: { data, success } }) => {
        if (!success) throw new Error('Error al borrar la notificacion');
        const newNotifications = notifications.filter(({ link_delete }) => link_delete !== url);
        setNotifications(newNotifications);
        dispatch(addNotification({ style: 'success', msg: data }));
      })
      .catch((err) => {
        dispatch(addNotification({ style: 'danger', msg: err.message }));
      });
  };

  const handleDelete = (url) => {
    setDeleteModalState({
      show: true,
      type: url ? 'single' : 'multiple',
      url
    });
  };

  const handleDeleteAccept = () => {
    if (deleteModalState.type === 'multiple') {
      deleteAllNotifications();
    } else {
      deleteNotification(deleteModalState.url);
    }
    setDeleteModalState({
      show: false,
      type: 'multiple'
    });
  };

  const handleDeleteCancel = () => {
    setDeleteModalState({
      show: false,
      type: 'multiple'
    });
  };

  useEffect(() => {
    if (fetchedNotifications) {
      setNotifications(fetchedNotifications);
    }
  }, [fetchedNotifications]);

  return (
    <>
      <Grid container spacing={1}>
        <Grid size={{ xs: 12, md: 4 }}>
          <ProfileInfo {...user} />
        </Grid>
        <Grid size={{ xs: 12, md: 8 }}>
          <Widget>
            <Widget.Header
              title='Notificaciones'
              renderAction={() => (
                <Options>
                  <Options.Item onClick={handleDelete}>Borrar notificaciones</Options.Item>
                </Options>
              )}
            />
            <Widget.Body>
              {isLoading && <Spinner />}
              {notifications.length === 0 && !isLoading && (
                <EmptySection message='No hay notificaciones' align='center' />
              )}

              <List sx={{ maxHeight: '60vh', overflow: 'auto' }}>
                {notifications.map(({ link_delete, link, message, time_elapsed }) => (
                  <ListItem
                    key={link}
                    secondaryAction={
                      <IconButton onClick={() => handleDelete(link_delete)}>
                        <Delete />
                      </IconButton>
                    }
                  >
                    <ListItemButton LinkComponent={Link} to={link}>
                      <ListItemText primary={message} secondary={time_elapsed} />
                    </ListItemButton>
                  </ListItem>
                ))}
              </List>
            </Widget.Body>
          </Widget>
        </Grid>
      </Grid>
      <ConfirmModal
        show={deleteModalState.show}
        onClose={handleDeleteCancel}
        onAccept={handleDeleteAccept}
      />
    </>
  );
};

export default NotificationsPage;