add thunks for getting pagespeed monitor

Client/src/Features/PageSpeedMonitor/pageSpeedMonitorSlice.js

@@ -28,6 +28,26 @@ export const createPageSpeed = createAsyncThunk(
   }
 );
 
+export const getPagespeedMonitorById = createAsyncThunk(
+  "monitors/getMonitorById",
+  async (data, thunkApi) => {
+    try {
+      const { authToken, monitorId } = data;
+      const res = await networkService.getMonitorByid(authToken, monitorId);
+      return res.data;
+    } catch (error) {
+      if (error.response && error.response.data) {
+        return thunkApi.rejectWithValue(error.response.data);
+      }
+      const payload = {
+        status: false,
+        msg: error.message ? error.message : "Unknown error",
+      };
+      return thunkApi.rejectWithValue(payload);
+    }
+  }
+);
+
 export const getPageSpeedByTeamId = createAsyncThunk(
   "pageSpeedMonitors/getPageSpeedByTeamId",
   async (token, thunkApi) => {
@@ -109,6 +129,25 @@ export const deletePageSpeed = createAsyncThunk(
     }
   }
 );
+export const pausePageSpeed = createAsyncThunk(
+  "pageSpeedMonitors/pausePageSpeed",
+  async (data, thunkApi) => {
+    try {
+      const { authToken, monitorId } = data;
+      const res = await networkService.pauseMonitorById(authToken, monitorId);
+      return res.data;
+    } catch (error) {
+      if (error.response && error.response.data) {
+        return thunkApi.rejectWithValue(error.response.data);
+      }
+      const payload = {
+        status: false,
+        msg: error.message ? error.message : "Unknown error",
+      };
+      return thunkApi.rejectWithValue(payload);
+    }
+  }
+);
 
 const pageSpeedMonitorSlice = createSlice({
   name: "pageSpeedMonitor",
@@ -124,7 +163,7 @@ const pageSpeedMonitorSlice = createSlice({
   extraReducers: (builder) => {
     builder
       // *****************************************************
-      // Monitors by userId
+      // Monitors by teamId
       // *****************************************************
 
       .addCase(getPageSpeedByTeamId.pending, (state) => {
@@ -143,6 +182,23 @@ const pageSpeedMonitorSlice = createSlice({
           : "Getting page speed monitors failed";
       })
 
+      // *****************************************************
+      .addCase(getPagespeedMonitorById.pending, (state) => {
+        state.isLoading = true;
+      })
+      .addCase(getPagespeedMonitorById.fulfilled, (state, action) => {
+        state.isLoading = false;
+        state.success = action.payload.success;
+        state.msg = action.payload.msg;
+      })
+      .addCase(getPagespeedMonitorById.rejected, (state, action) => {
+        state.isLoading = false;
+        state.success = false;
+        state.msg = action.payload
+          ? action.payload.msg
+          : "Failed to get pagespeed monitor";
+      })
+
       // *****************************************************
       // Create Monitor
       // *****************************************************
@@ -163,7 +219,7 @@ const pageSpeedMonitorSlice = createSlice({
       })
 
       // *****************************************************
-      // Create Monitor
+      // Update Monitor
       // *****************************************************
       .addCase(updatePageSpeed.pending, (state) => {
         state.isLoading = true;
@@ -198,6 +254,24 @@ const pageSpeedMonitorSlice = createSlice({
         state.msg = action.payload
           ? action.payload.msg
           : "Failed to delete page speed monitor";
+      })
+      // *****************************************************
+      // Pause Monitor
+      // *****************************************************
+      .addCase(pausePageSpeed.pending, (state) => {
+        state.isLoading = true;
+      })
+      .addCase(pausePageSpeed.fulfilled, (state, action) => {
+        state.isLoading = false;
+        state.success = action.payload.success;
+        state.msg = action.payload.msg;
+      })
+      .addCase(pausePageSpeed.rejected, (state, action) => {
+        state.isLoading = false;
+        state.success = false;
+        state.msg = action.payload
+          ? action.payload.msg
+          : "Failed to pause page speed monitor";
       });
   },
 });

Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js

@@ -236,7 +236,7 @@ const uptimeMonitorsSlice = createSlice({
         state.success = false;
         state.msg = action.payload
           ? action.payload.msg
-          : "Failed to pause uptime monitor";
+          : "Failed to get uptime monitor";
       })
       // *****************************************************
       // update Monitor

Client/src/Pages/PageSpeed/Configure/index.jsx

@@ -1,12 +1,14 @@
 import { useEffect, useState } from "react";
 import { useTheme } from "@emotion/react";
-import { Box, Button, Modal, Skeleton, Stack, Typography } from "@mui/material";
+import { Box, Button, Modal, Stack, Typography } from "@mui/material";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router";
 import {
   deletePageSpeed,
+  getPagespeedMonitorById,
   getPageSpeedByTeamId,
   updatePageSpeed,
+  pausePageSpeed,
 } from "../../../Features/PageSpeedMonitor/pageSpeedMonitorSlice";
 import { monitorValidation } from "../../../Validation/validation";
 import { createToast } from "../../../Utils/toastUtils";
@@ -17,63 +19,18 @@ import Checkbox from "../../../Components/Inputs/Checkbox";
 import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import PulseDot from "../../../Components/Animated/PulseDot";
-
+import LoadingButton from "@mui/lab/LoadingButton";
+import PlayCircleOutlineRoundedIcon from "@mui/icons-material/PlayCircleOutlineRounded";
+import SkeletonLayout from "./skeleton";
 import "./index.css";
 
-/**
- * Renders a skeleton layout.
- *
- * @returns {JSX.Element}
- */
-const SkeletonLayout = () => {
-  const theme = useTheme();
-
-  return (
-    <>
-      <Skeleton variant="rounded" width="15%" height={34} />
-      <Stack gap={theme.spacing(20)} mt={theme.spacing(6)} maxWidth="1000px">
-        <Stack direction="row" gap={theme.spacing(4)} mt={theme.spacing(4)}>
-          <Skeleton
-            variant="circular"
-            style={{ minWidth: 24, minHeight: 24 }}
-          />
-          <Box width="80%">
-            <Skeleton
-              variant="rounded"
-              width="50%"
-              height={24}
-              sx={{ mb: theme.spacing(4) }}
-            />
-            <Skeleton variant="rounded" width="50%" height={18} />
-          </Box>
-          <Stack
-            direction="row"
-            gap={theme.spacing(6)}
-            sx={{
-              ml: "auto",
-              alignSelf: "flex-end",
-            }}
-          >
-            <Skeleton variant="rounded" width={100} height={34} />
-            <Skeleton variant="rounded" width={100} height={34} />
-          </Stack>
-        </Stack>
-        <Skeleton variant="rounded" width="100%" height={500} />
-        <Stack direction="row" justifyContent="flex-end">
-          <Skeleton variant="rounded" width="15%" height={34} />
-        </Stack>
-      </Stack>
-    </>
-  );
-};
-
 const PageSpeedConfigure = () => {
   const theme = useTheme();
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const MS_PER_MINUTE = 60000;
   const { authToken } = useSelector((state) => state.auth);
-  const { monitors } = useSelector((state) => state.pageSpeedMonitors);
+  const { isLoading } = useSelector((state) => state.pageSpeedMonitors);
   const { monitorId } = useParams();
   const [monitor, setMonitor] = useState({});
   const [errors, setErrors] = useState({});
@@ -89,15 +46,25 @@ const PageSpeedConfigure = () => {
   ];
 
   useEffect(() => {
-    const data = monitors.find((monitor) => monitor._id === monitorId);
-    if (!data) {
-      logger.error("Error fetching pagespeed monitor of id: " + monitorId);
-      navigate("/not-found", { replace: true });
-    }
-    setMonitor({
-      ...data,
-    });
-  }, [monitorId, monitors, navigate]);
+    const fetchMonitor = async () => {
+      try {
+        const action = await dispatch(
+          getPagespeedMonitorById({ authToken, monitorId })
+        );
+
+        if (getPagespeedMonitorById.fulfilled.match(action)) {
+          const monitor = action.payload.data;
+          setMonitor(monitor);
+        } else if (getPagespeedMonitorById.rejected.match(action)) {
+          throw new Error(action.error.message);
+        }
+      } catch (error) {
+        logger.error("Error fetching monitor of id: " + monitorId);
+        navigate("/not-found", { replace: true });
+      }
+    };
+    fetchMonitor();
+  }, [dispatch, authToken, monitorId, navigate]);
 
   const handleChange = (event, id) => {
     let { value } = event.target;
@@ -119,6 +86,21 @@ const PageSpeedConfigure = () => {
     });
   };
 
+  const handlePause = async () => {
+    try {
+      const action = await dispatch(pausePageSpeed({ authToken, monitorId }));
+      if (pausePageSpeed.fulfilled.match(action)) {
+        const monitor = action.payload.data;
+        setMonitor(monitor);
+      } else if (pausePageSpeed.rejected.match(action)) {
+        throw new Error(action.error.message);
+      }
+    } catch (error) {
+      logger.error("Error pausing monitor: " + monitorId);
+      createToast({ body: "Failed to pause monitor" });
+    }
+  };
+
   const handleSave = async (event) => {
     event.preventDefault();
     const action = await dispatch(
@@ -143,11 +125,9 @@ const PageSpeedConfigure = () => {
     }
   };
 
-  let loading = Object.keys(monitor).length === 0;
-
   return (
     <Stack className="configure-pagespeed" gap={theme.spacing(12)}>
-      {loading ? (
+      {Object.keys(monitor).length === 0 ? (
         <SkeletonLayout />
       ) : (
         <>
@@ -195,7 +175,9 @@ const PageSpeedConfigure = () => {
                 </Typography>
               </Box>
               <Box alignSelf="flex-end" ml="auto">
-                <Button
+                <LoadingButton
+                  onClick={handlePause}
+                  loading={isLoading}
                   variant="contained"
                   color="secondary"
                   sx={{
@@ -210,10 +192,20 @@ const PageSpeedConfigure = () => {
                     },
                   }}
                 >
-                  <PauseCircleOutlineIcon />
-                  Pause
-                </Button>
-                <Button
+                  {monitor?.isActive ? (
+                    <>
+                      <PauseCircleOutlineIcon />
+                      Pause
+                    </>
+                  ) : (
+                    <>
+                      <PlayCircleOutlineRoundedIcon />
+                      Resume
+                    </>
+                  )}
+                </LoadingButton>
+                <LoadingButton
+                  loading={isLoading}
                   variant="contained"
                   color="error"
                   onClick={() => setIsOpen(true)}
@@ -222,7 +214,7 @@ const PageSpeedConfigure = () => {
                   }}
                 >
                   Remove
-                </Button>
+                </LoadingButton>
               </Box>
             </Stack>
             <Stack
@@ -322,7 +314,8 @@ const PageSpeedConfigure = () => {
               </Stack>
             </Stack>
             <Stack direction="row" justifyContent="flex-end" mt="auto">
-              <Button
+              <LoadingButton
+                loading={isLoading}
                 type="submit"
                 variant="contained"
                 color="primary"
@@ -330,7 +323,7 @@ const PageSpeedConfigure = () => {
                 sx={{ px: theme.spacing(12) }}
               >
                 Save
-              </Button>
+              </LoadingButton>
             </Stack>
           </Stack>
         </>

Client/src/Pages/PageSpeed/Configure/skeleton.jsx

@@ -0,0 +1,51 @@
+import { Box, Skeleton, Stack } from "@mui/material";
+import { useTheme } from "@emotion/react";
+
+/**
+ * Renders a skeleton layout.
+ *
+ * @returns {JSX.Element}
+ */
+const SkeletonLayout = () => {
+  const theme = useTheme();
+
+  return (
+    <>
+      <Skeleton variant="rounded" width="15%" height={34} />
+      <Stack gap={theme.spacing(20)} mt={theme.spacing(6)} maxWidth="1000px">
+        <Stack direction="row" gap={theme.spacing(4)} mt={theme.spacing(4)}>
+          <Skeleton
+            variant="circular"
+            style={{ minWidth: 24, minHeight: 24 }}
+          />
+          <Box width="80%">
+            <Skeleton
+              variant="rounded"
+              width="50%"
+              height={24}
+              sx={{ mb: theme.spacing(4) }}
+            />
+            <Skeleton variant="rounded" width="50%" height={18} />
+          </Box>
+          <Stack
+            direction="row"
+            gap={theme.spacing(6)}
+            sx={{
+              ml: "auto",
+              alignSelf: "flex-end",
+            }}
+          >
+            <Skeleton variant="rounded" width={100} height={34} />
+            <Skeleton variant="rounded" width={100} height={34} />
+          </Stack>
+        </Stack>
+        <Skeleton variant="rounded" width="100%" height={500} />
+        <Stack direction="row" justifyContent="flex-end">
+          <Skeleton variant="rounded" width="15%" height={34} />
+        </Stack>
+      </Stack>
+    </>
+  );
+};
+
+export default SkeletonLayout;