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;