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 item xs md={4}>

          <ProfileInfo {...user} />

        </Grid>

        <Grid item xs 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;