Add update hook

Client/src/Pages/Monitors/Home/MonitorTable/index.jsx

@@ -36,6 +36,11 @@ const MonitorTable = ({ isAdmin }) => {
   const [monitors, setMonitors] = useState([]);
   const [monitorCount, setMonitorCount] = useState(0);
   const authState = useSelector((state) => state.auth);
+  const [updateTrigger, setUpdateTrigger] = useState(false);
+
+  const handleActionMenuDelete = () => {
+    setUpdateTrigger((prev) => !prev);
+  };
 
   const handlePageChange = (_, newPage) => {
     setPaginationController({
@@ -60,15 +65,19 @@ const MonitorTable = ({ isAdmin }) => {
           paginationController.page,
           paginationController.rowsPerPage
         );
-        console.log(res.data.data);
-        setMonitors(res?.data?.data ?? []);
-        setMonitorCount(0);
+        setMonitors(res?.data?.data?.monitors ?? []);
+        setMonitorCount(res?.data?.data?.monitorCount ?? 0);
       } catch (error) {
         logger.error(error);
       }
     };
     fetchPage();
-  }, []);
+  }, [
+    updateTrigger,
+    authState,
+    paginationController.page,
+    paginationController.rowsPerPage,
+  ]);
 
   let paginationComponent = <></>;
   if (monitorCount > paginationController.rowsPerPage) {
@@ -168,7 +177,11 @@ const MonitorTable = ({ isAdmin }) => {
                     </span>
                   </TableCell>
                   <TableCell>
-                    <ActionsMenu monitor={monitor} isAdmin={isAdmin} />
+                    <ActionsMenu
+                      monitor={monitor}
+                      isAdmin={isAdmin}
+                      updateCallback={handleActionMenuDelete}
+                    />
                   </TableCell>
                 </TableRow>
               );
@@ -181,4 +194,8 @@ const MonitorTable = ({ isAdmin }) => {
   );
 };
 
+MonitorTable.propTypes = {
+  isAdmin: PropTypes.bool,
+};
+
 export default MonitorTable;

Client/src/Pages/Monitors/Home/actionsMenu.jsx

@@ -19,7 +19,7 @@ import {
 import Settings from "../../../assets/icons/settings-bold.svg?react";
 import PropTypes from "prop-types";
 
-const ActionsMenu = ({ monitor, isAdmin }) => {
+const ActionsMenu = ({ monitor, isAdmin, updateCallback }) => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [actions, setActions] = useState({});
   const [isOpen, setIsOpen] = useState(false);
@@ -37,6 +37,7 @@ const ActionsMenu = ({ monitor, isAdmin }) => {
     if (action.meta.requestStatus === "fulfilled") {
       setIsOpen(false); // close modal
       dispatch(getUptimeMonitorsByTeamId(authState.authToken));
+      updateCallback();
       createToast({ body: "Monitor deleted successfully." });
     } else {
       createToast({ body: "Failed to delete monitor." });
@@ -222,6 +223,7 @@ ActionsMenu.propTypes = {
     type: PropTypes.string,
   }).isRequired,
   isAdmin: PropTypes.bool,
+  updateCallback: PropTypes.func,
 };
 
 export default ActionsMenu;

Client/src/Pages/Monitors/Home/index.jsx

@@ -9,7 +9,6 @@ import PropTypes from "prop-types";
 import SkeletonLayout from "./skeleton";
 import Fallback from "./fallback";
 import StatusBox from "./StatusBox";
-import { buildData } from "./monitorData";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import Greeting from "../../../Utils/greeting";
 import MonitorTable from "./MonitorTable";
@@ -25,7 +24,7 @@ const Monitors = ({ isAdmin }) => {
     dispatch(getUptimeMonitorsByTeamId(authState.authToken));
   }, [authState.authToken, dispatch]);
 
-  const monitorStats = monitorState.monitors.reduce(
+  const monitorStats = monitorState.monitors.monitors.reduce(
     (acc, monitor) => {
       if (monitor.isActive === false) {
         acc["paused"] += 1;
@@ -39,8 +38,6 @@ const Monitors = ({ isAdmin }) => {
     { paused: 0, up: 0, down: 0 }
   );
 
-  const data = buildData(monitorState.monitors, isAdmin, navigate);
-
   let loading = monitorState.isLoading && monitorState.monitors.length === 0;
 
   return (
@@ -119,8 +116,7 @@ const Monitors = ({ isAdmin }) => {
                   </Box>
                   {/* TODO - add search bar */}
                 </Stack>
-                <MonitorTable teamId="test" />
-                {/* <BasicTable data={data} paginated={true} table={"monitors"} /> */}
+                <MonitorTable isAdmin={isAdmin} />
               </Box>
             </>
           )}

Server/db/mongo/modules/monitorModule.js

@@ -396,6 +396,7 @@ const getMonitorsByTeamId = async (req, res) => {
     let { limit, type, status, sortOrder, normalize, page, rowsPerPage } =
       req.query || {};
     const monitorQuery = { teamId: req.params.teamId };
+    const monitorsCount = await Monitor.countDocuments(monitorQuery);
 
     // Pagination
     let skip = 0;
@@ -449,7 +450,7 @@ const getMonitorsByTeamId = async (req, res) => {
         return { ...monitor.toObject(), checks };
       })
     );
-    return monitorsWithChecks;
+    return { monitors: monitorsWithChecks, monitorCount: monitorsCount };
   } catch (error) {
     throw error;
   }