add missed files, add logger

Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router-dom";
+import { useSelector } from "react-redux";
 import {
   Button,
   IconButton,
@@ -10,19 +11,39 @@ import {
   Stack,
   Typography,
 } from "@mui/material";
+import LoadingButton from "@mui/lab/LoadingButton";
+import { logger } from "../../../../Utils/Logger";
 import Settings from "../../../../assets/icons/settings-bold.svg?react";
 import PropTypes from "prop-types";
+import { networkService } from "../../../../main";
+import { createToast } from "../../../../Utils/toastUtils";
 
-const ActionsMenu = ({ isAdmin, maintenanceWindow }) => {
+const ActionsMenu = ({ isAdmin, maintenanceWindow, updateCallback }) => {
+  const { authToken } = useSelector((state) => state.auth);
   const [anchorEl, setAnchorEl] = useState(null);
   const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
   const theme = useTheme();
 
   const handleRemove = async (event) => {
     event.preventDefault();
     event.stopPropagation();
-    console.log("remove");
-    setIsOpen(false); // close modal
+    try {
+      setIsLoading(true);
+      await networkService.deleteMaintenanceWindow({
+        authToken,
+        maintenanceWindowId: maintenanceWindow._id,
+      });
+      updateCallback();
+      createToast({ body: "Maintenance window deleted successfully." });
+    } catch (error) {
+      createToast({ body: "Failed to delete maintenance window." });
+      logger.error("Failed to delete maintenance window", error);
+    } finally {
+      setIsLoading(false);
+    }
+    setIsOpen(false);
   };
 
   const openMenu = (event) => {
@@ -156,7 +177,8 @@ const ActionsMenu = ({ isAdmin, maintenanceWindow }) => {
             >
               Cancel
             </Button>
-            <Button
+            <LoadingButton
+              loading={isLoading}
               variant="contained"
               color="error"
               onClick={(e) => {
@@ -165,7 +187,7 @@ const ActionsMenu = ({ isAdmin, maintenanceWindow }) => {
               }}
             >
               Delete
-            </Button>
+            </LoadingButton>
           </Stack>
         </Stack>
       </Modal>

Client/src/Pages/Maintenance/MaintenanceTable/index.jsx

@@ -108,11 +108,12 @@ const MaintenanceTable = ({
   setSort,
   maintenanceWindows,
   maintenanceWindowCount,
+  updateCallback,
 }) => {
   const { rowsPerPage } = useSelector((state) => state.ui.maintenance);
-
   const theme = useTheme();
   const dispatch = useDispatch();
+
   const handleChangePage = (event, newPage) => {
     setPage(newPage);
   };
@@ -264,7 +265,10 @@ const MaintenanceTable = ({
                       : formatDurationRounded(maintenanceWindow.repeat)}
                   </TableCell>
                   <TableCell>
-                    <ActionsMenu maintenanceWindow={maintenanceWindow} />
+                    <ActionsMenu
+                      maintenanceWindow={maintenanceWindow}
+                      updateCallback={updateCallback}
+                    />
                   </TableCell>
                 </TableRow>
               );
@@ -352,6 +356,7 @@ MaintenanceTable.propTypes = {
   setSort: PropTypes.func,
   maintenanceWindows: PropTypes.array,
   maintenanceWindowCount: PropTypes.number,
+  updateCallback: PropTypes.func,
 };
 
 const MemoizedMaintenanceTable = memo(MaintenanceTable);

Client/src/Pages/Maintenance/index.jsx

@@ -19,6 +19,11 @@ const Maintenance = ({ isAdmin }) => {
   const [maintenanceWindowCount, setMaintenanceWindowCount] = useState(0);
   const [page, setPage] = useState(0);
   const [sort, setSort] = useState({});
+  const [updateTrigger, setUpdateTrigger] = useState(false);
+
+  const handleActionMenuDelete = () => {
+    setUpdateTrigger((prev) => !prev);
+  };
 
   useEffect(() => {
     const fetchMaintenanceWindows = async () => {
@@ -37,7 +42,7 @@ const Maintenance = ({ isAdmin }) => {
       }
     };
     fetchMaintenanceWindows();
-  }, [authToken, page, rowsPerPage]);
+  }, [authToken, page, rowsPerPage, updateTrigger]);
 
   return (
     <Box
@@ -84,6 +89,7 @@ const Maintenance = ({ isAdmin }) => {
             setSort={setSort}
             maintenanceWindows={maintenanceWindows}
             maintenanceWindowCount={maintenanceWindowCount}
+            updateCallback={handleActionMenuDelete}
           />
         </Stack>
       )}

Client/src/Utils/NetworkService.js

@@ -754,6 +754,31 @@ class NetworkService {
       }
     );
   }
+  /**
+   * ************************************
+   * Get maintenance windows by teamId
+   * ************************************
+   *
+   * @async
+   * @param {Object} config - The configuration object.
+   * @param {string} config.authToken - The authorization token to be used in the request header.
+   * @param {string} [config.maintenanceWindowId] - The id of the maintenance window to delete.
+   * @returns {Promise<AxiosResponse>} The response from the axios POST request.
+   *
+   */
+
+  async deleteMaintenanceWindow(config) {
+    const { authToken, maintenanceWindowId } = config;
+    return this.axiosInstance.delete(
+      `/maintenance-window/${maintenanceWindowId}`,
+      {
+        headers: {
+          Authorization: `Bearer ${authToken}`,
+          "Content-Type": "application/json",
+        },
+      }
+    );
+  }
 }
 
 export default NetworkService;