Added update and delete functionality

Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js

@@ -73,9 +73,39 @@ export const updateUptimeMonitor = createAsyncThunk(
   async (data, thunkApi) => {
     try {
       const { authToken, monitor } = data;
+      const updatedFields = {
+        name: monitor.name,
+        description: monitor.description,
+        interval: monitor.interval,
+      };
       const res = await axiosInstance.post(
         `/monitors/edit/${monitor._id}`,
-        monitor,
+        updatedFields,
+        {
+          headers: {
+            Authorization: `Bearer ${authToken}`,
+            "Content-Type": "application/json",
+          },
+        }
+      );
+      return res.data;
+    } catch (error) {
+      if (error.response && error.response.data) {
+        return thunkApi.rejectWithValue(error.response.data);
+      }
+      return thunkApi.rejectWithValue(error.message);
+    }
+  }
+);
+
+export const deleteUptimeMonitor = createAsyncThunk(
+  "monitors/deleteMonitor",
+  async (data, thunkApi) => {
+    try {
+      const { authToken, monitor } = data;
+      const res = await axiosInstance.post(
+        `/monitors/delete/${monitor._id}`,
+        {},
         {
           headers: {
             Authorization: `Bearer ${authToken}`,
@@ -181,6 +211,25 @@ const uptimeMonitorsSlice = createSlice({
         state.msg = action.payload
           ? action.payload.msg
           : "Failed to update uptime monitor";
+      })
+
+      // *****************************************************
+      // Delete Monitor
+      // *****************************************************
+      .addCase(deleteUptimeMonitor.pending, (state) => {
+        state.isLoading = true;
+      })
+      .addCase(deleteUptimeMonitor.fulfilled, (state, action) => {
+        state.isLoading = false;
+        state.success = action.payload.success;
+        state.msg = action.payload.msg;
+      })
+      .addCase(deleteUptimeMonitor.rejected, (state, action) => {
+        state.isLoading = false;
+        state.success = false;
+        state.msg = action.payload
+          ? action.payload.msg
+          : "Failed to delete uptime monitor";
       });
   },
 });

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

@@ -14,7 +14,12 @@ import "./index.css";
 import { monitorValidation } from "../../../Validation/validation";
 import Select from "../../../Components/Inputs/Select";
 import { formatDurationRounded } from "../../../Utils/timeUtils";
-import { updateUptimeMonitor } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
+import { createToast } from "../../../Utils/toastUtils";
+import {
+  updateUptimeMonitor,
+  getUptimeMonitorsByUserId,
+  deleteUptimeMonitor,
+} from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
 /**
  * Parses a URL string and returns a URL object.
  *
@@ -98,11 +103,28 @@ const Configure = () => {
     });
   };
 
-  const handleSubmit = (event) => {
+  const handleSubmit = async (event) => {
     event.preventDefault();
-    const updatedMonitor = { ...monitor };
-    delete updatedMonitor.checks;
-    dispatch(updateUptimeMonitor({ authToken, monitor: updatedMonitor }));
+    const action = await dispatch(
+      updateUptimeMonitor({ authToken, monitor: monitor })
+    );
+    if (action.meta.requestStatus === "fulfilled") {
+      createToast({ body: "Monitor updated successfully!" });
+      dispatch(getUptimeMonitorsByUserId(authToken));
+    } else {
+      createToast({ body: "Failed to update monitor." });
+    }
+  };
+
+  const hanldeRemove = async (event) => {
+    event.preventDefault();
+    // TODO add confirm
+    const action = await dispatch(deleteUptimeMonitor({ authToken, monitor }));
+    if (action.meta.requestStatus === "fulfilled") {
+      navigate("/monitors");
+    } else {
+      createToast({ body: "Failed to delete monitor." });
+    }
   };
 
   const frequencies = [
@@ -186,6 +208,7 @@ const Configure = () => {
                 boxShadow: "none",
                 px: theme.gap.ml,
               }}
+              onClick={hanldeRemove}
             />
           </Stack>
         </Stack>