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";

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, loading } = 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>
              {loading && <Spinner />}
              {notifications.length === 0 && !loading && (
                <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;