Add update trigger for pause state

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

@@ -7,7 +7,7 @@ import useDebounce from "../../../../Utils/debounce";
 import PropTypes from "prop-types";
 import { Heading } from "../../../../Components/Heading";
 
-const CurrentMonitoring = ({ totalMonitors, monitors, isAdmin }) => {
+const CurrentMonitoring = ({ totalMonitors, monitors, isAdmin, handlePause }) => {
 	const theme = useTheme();
 	const [search, setSearch] = useState("");
 	const [isSearching, setIsSearching] = useState(false);
@@ -55,12 +55,14 @@ const CurrentMonitoring = ({ totalMonitors, monitors, isAdmin }) => {
 				filter={debouncedFilter}
 				setIsSearching={setIsSearching}
 				isSearching={isSearching}
+				handlePause={handlePause}
 			/>
 		</Box>
 	);
 };
 
 CurrentMonitoring.propTypes = {
+	handlePause: PropTypes.func,
 	totalMonitors: PropTypes.number,
 	monitors: PropTypes.array,
 	isAdmin: PropTypes.bool,

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

@@ -32,7 +32,7 @@ import ArrowUpwardRoundedIcon from "@mui/icons-material/ArrowUpwardRounded";
 
 import { Pagination } from "../../../Infrastructure/components/TablePagination";
 
-const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching }) => {
+const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching, handlePause }) => {
 	const theme = useTheme();
 	const navigate = useNavigate();
 	const dispatch = useDispatch();
@@ -48,7 +48,7 @@ const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching }) => {
 	const [sort, setSort] = useState({});
 	const prevFilter = useRef(filter);
 
-	const handleActionMenuDelete = () => {
+	const handleRowUpdate = () => {
 		setUpdateTrigger((prev) => !prev);
 	};
 
@@ -297,7 +297,8 @@ const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching }) => {
 											<ActionsMenu
 												monitor={monitor}
 												isAdmin={isAdmin}
-												updateCallback={handleActionMenuDelete}
+												updateRowCallback={handleRowUpdate}
+												pauseCallback={handlePause}
 											/>
 										</TableCell>
 									</TableRow>
@@ -325,6 +326,7 @@ MonitorTable.propTypes = {
 	filter: PropTypes.string,
 	setIsSearching: PropTypes.func,
 	isSearching: PropTypes.bool,
+	setMonitorUpdateTrigger: PropTypes.func,
 };
 
 const MemoizedMonitorTable = memo(MonitorTable);

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

@@ -14,7 +14,7 @@ import Settings from "../../../assets/icons/settings-bold.svg?react";
 import PropTypes from "prop-types";
 import Dialog from "../../../Components/Dialog";
 
-const ActionsMenu = ({ monitor, isAdmin, updateCallback }) => {
+const ActionsMenu = ({ monitor, isAdmin, updateRowCallback, pauseCallback }) => {
 	const [anchorEl, setAnchorEl] = useState(null);
 	const [actions, setActions] = useState({});
 	const [isOpen, setIsOpen] = useState(false);
@@ -47,9 +47,9 @@ const ActionsMenu = ({ monitor, isAdmin, updateCallback }) => {
 				pauseUptimeMonitor({ authToken, monitorId: monitor._id })
 			);
 			if (pauseUptimeMonitor.fulfilled.match(action)) {
-				updateCallback();
 				const state = action?.payload?.data.isActive === false ? "paused" : "resumed";
 				createToast({ body: `Monitor ${state} successfully.` });
+				pauseCallback();
 			} else {
 				throw new Error(action?.error?.message ?? "Failed to pause monitor.");
 			}
@@ -219,7 +219,8 @@ ActionsMenu.propTypes = {
 		isActive: PropTypes.bool,
 	}).isRequired,
 	isAdmin: PropTypes.bool,
-	updateCallback: PropTypes.func,
+	updateRowCallback: PropTypes.func,
+	pauseCallback: PropTypes.func,
 };
 
 export default ActionsMenu;

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

@@ -1,5 +1,5 @@
 import "./index.css";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { getUptimeMonitorsByTeamId } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
 import { useNavigate } from "react-router-dom";
@@ -19,10 +19,15 @@ const Monitors = ({ isAdmin }) => {
 	const monitorState = useSelector((state) => state.uptimeMonitors);
 	const authState = useSelector((state) => state.auth);
 	const dispatch = useDispatch({});
+	const [monitorUpdateTrigger, setMonitorUpdateTrigger] = useState(false);
+
+	const handlePause = () => {
+		setMonitorUpdateTrigger((prev) => !prev);
+	};
 
 	useEffect(() => {
 		dispatch(getUptimeMonitorsByTeamId(authState.authToken));
-	}, [authState.authToken, dispatch]);
+	}, [authState.authToken, dispatch, monitorUpdateTrigger]);
 
 	//TODO bring fetching to this component, like on pageSpeed
 
@@ -92,6 +97,7 @@ const Monitors = ({ isAdmin }) => {
 								isAdmin={isAdmin}
 								monitors={monitorState.monitorsSummary.monitors}
 								totalMonitors={totalMonitors}
+								handlePause={handlePause}
 							/>
 						</>
 					)}