From d5acfd9e9ea2e5376bbe1eb84637d456b2c51378 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Wed, 11 Dec 2024 10:46:54 +0800 Subject: [PATCH] Add update trigger for pause state --- .../Pages/Monitors/Home/CurrentMonitoring/index.jsx | 4 +++- Client/src/Pages/Monitors/Home/MonitorTable/index.jsx | 8 +++++--- Client/src/Pages/Monitors/Home/actionsMenu.jsx | 7 ++++--- Client/src/Pages/Monitors/Home/index.jsx | 10 ++++++++-- 4 files changed, 20 insertions(+), 9 deletions(-) diff --git a/Client/src/Pages/Monitors/Home/CurrentMonitoring/index.jsx b/Client/src/Pages/Monitors/Home/CurrentMonitoring/index.jsx index a7f70d96e..151f47827 100644 --- a/Client/src/Pages/Monitors/Home/CurrentMonitoring/index.jsx +++ b/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} /> ); }; CurrentMonitoring.propTypes = { + handlePause: PropTypes.func, totalMonitors: PropTypes.number, monitors: PropTypes.array, isAdmin: PropTypes.bool, diff --git a/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx b/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx index 9a73bd543..b12a8d487 100644 --- a/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx +++ b/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 }) => { @@ -325,6 +326,7 @@ MonitorTable.propTypes = { filter: PropTypes.string, setIsSearching: PropTypes.func, isSearching: PropTypes.bool, + setMonitorUpdateTrigger: PropTypes.func, }; const MemoizedMonitorTable = memo(MonitorTable); diff --git a/Client/src/Pages/Monitors/Home/actionsMenu.jsx b/Client/src/Pages/Monitors/Home/actionsMenu.jsx index f40092b11..e1be7fbf5 100644 --- a/Client/src/Pages/Monitors/Home/actionsMenu.jsx +++ b/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; diff --git a/Client/src/Pages/Monitors/Home/index.jsx b/Client/src/Pages/Monitors/Home/index.jsx index 345a0a88e..4c48bde3a 100644 --- a/Client/src/Pages/Monitors/Home/index.jsx +++ b/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} /> )}