Add thunks for getting single monitor and pausing/resuming single monitor

Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js

@@ -28,6 +28,26 @@ export const createUptimeMonitor = createAsyncThunk(
   }
 );
 
+export const getUptimeMonitorById = 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 getUptimeMonitorsByTeamId = createAsyncThunk(
   "montiors/getMonitorsByTeamId",
   async (token, thunkApi) => {
@@ -109,6 +129,26 @@ export const deleteUptimeMonitor = createAsyncThunk(
   }
 );
 
+export const pauseUptimeMonitor = createAsyncThunk(
+  "monitors/pauseMonitor",
+  async (data, thunkApi) => {
+    try {
+      const { authToken, monitor } = data;
+      const res = await networkService.pauseMonitorById(authToken, monitor._id);
+      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 uptimeMonitorsSlice = createSlice({
   name: "uptimeMonitors",
   initialState,
@@ -160,7 +200,24 @@ const uptimeMonitorsSlice = createSlice({
           ? action.payload.msg
           : "Failed to create uptime monitor";
       })
-
+      // *****************************************************
+      // Get Monitor By Id
+      // *****************************************************
+      .addCase(getUptimeMonitorById.pending, (state) => {
+        state.isLoading = true;
+      })
+      .addCase(getUptimeMonitorById.fulfilled, (state, action) => {
+        state.isLoading = false;
+        state.success = action.payload.success;
+        state.msg = action.payload.msg;
+      })
+      .addCase(getUptimeMonitorById.rejected, (state, action) => {
+        state.isLoading = false;
+        state.success = false;
+        state.msg = action.payload
+          ? action.payload.msg
+          : "Failed to pause uptime monitor";
+      })
       // *****************************************************
       // update Monitor
       // *****************************************************
@@ -197,6 +254,24 @@ const uptimeMonitorsSlice = createSlice({
         state.msg = action.payload
           ? action.payload.msg
           : "Failed to delete uptime monitor";
+      })
+      // *****************************************************
+      // Pause Monitor
+      // *****************************************************
+      .addCase(pauseUptimeMonitor.pending, (state) => {
+        state.isLoading = true;
+      })
+      .addCase(pauseUptimeMonitor.fulfilled, (state, action) => {
+        state.isLoading = false;
+        state.success = action.payload.success;
+        state.msg = action.payload.msg;
+      })
+      .addCase(pauseUptimeMonitor.rejected, (state, action) => {
+        state.isLoading = false;
+        state.success = false;
+        state.msg = action.payload
+          ? action.payload.msg
+          : "Failed to pause uptime monitor";
       });
   },
 });

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

@@ -8,6 +8,7 @@ import { createToast } from "../../../Utils/toastUtils";
 import { logger } from "../../../Utils/Logger";
 import {
   updateUptimeMonitor,
+  getUptimeMonitorById,
   getUptimeMonitorsByTeamId,
   deleteUptimeMonitor,
 } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
@@ -19,6 +20,7 @@ import Checkbox from "../../../Components/Inputs/Checkbox";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import PulseDot from "../../../Components/Animated/PulseDot";
 import "./index.css";
+import { networkService } from "../../../main";
 
 /**
  * Parses a URL string and returns a URL object.
@@ -92,7 +94,6 @@ const Configure = () => {
   const theme = useTheme();
   const dispatch = useDispatch();
   const { user, authToken } = useSelector((state) => state.auth);
-  const { monitors } = useSelector((state) => state.uptimeMonitors);
   const [monitor, setMonitor] = useState({});
   const [errors, setErrors] = useState({});
   const { monitorId } = useParams();
@@ -106,15 +107,25 @@ const Configure = () => {
   };
 
   useEffect(() => {
-    const data = monitors.find((monitor) => monitor._id === monitorId);
-    if (!data) {
-      logger.error("Error fetching monitor of id: " + monitorId);
-      navigate("/not-found", { replace: true });
-    }
-    setMonitor({
-      ...data,
-    });
-  }, [monitorId, authToken, monitors, navigate]);
+    const fetchMonitor = async () => {
+      try {
+        const action = await dispatch(
+          getUptimeMonitorById({ authToken, monitorId })
+        );
+
+        if (getUptimeMonitorById.fulfilled.match(action)) {
+          const monitor = action.payload.data;
+          setMonitor(monitor);
+        } else if (getUptimeMonitorById.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();
+  }, [monitorId, authToken, navigate]);
 
   const handleChange = (event, name) => {
     let { value, id } = event.target;
@@ -170,6 +181,11 @@ const Configure = () => {
     }
   };
 
+  const handlePause = async () => {
+    try {
+    } catch (error) {}
+  };
+
   const handleSubmit = async (event) => {
     event.preventDefault();
     const action = await dispatch(
@@ -276,6 +292,7 @@ const Configure = () => {
                       mr: theme.gap.xs,
                     },
                   }}
+                  onClick={handlePause}
                 />
                 <Button
                   level="error"

Client/src/Utils/NetworkService.js

@@ -17,6 +17,27 @@ class NetworkService {
     );
   }
 
+  /**
+   *
+   * ************************************
+   * Create a new monitor
+   * ************************************
+   *
+   * @async
+   * @param {string} authToken - The authorization token to be used in the request header.
+   * @param {string} monitorId - The monitor ID to be sent in the param.
+   * @returns {Promise<AxiosResponse>} The response from the axios GET request.
+   */
+
+  async getMonitorByid(authToken, monitorId) {
+    return this.axiosInstance.get(`/monitors/${monitorId}`, {
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+        "Content-Type": "application/json",
+      },
+    });
+  }
+
   /**
    *
    * ************************************
@@ -163,6 +184,24 @@ class NetworkService {
       },
     });
   }
+  /**
+   * ************************************
+   * Pauses a single monitor by its ID
+   * ************************************
+   *
+   * @async
+   * @param {string} authToken - The authorization token to be used in the request header.
+   * @param {string} monitorId - The ID of the monitor to be paused.
+   * @returns {Promise<AxiosResponse>} The response from the axios POST request.
+   */
+  async pauseMonitorById(authToken, monitorId) {
+    return this.axiosInstance.post(`/monitors/pause/${monitorId}`, {
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+        "Content-Type": "application/json",
+      },
+    });
+  }
 
   /**
    * ************************************