Added async thunk for creating monitors, connected CreateMonitor to backend

Client/src/Features/Monitors/monitorsSlice.js

@@ -1,6 +1,7 @@
 import axios from "axios";
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import { jwtDecode } from "jwt-decode";
+const BASE_URL = import.meta.env.VITE_APP_API_BASE_URL;
 
 const initialState = {
   isLoading: false,
@@ -9,6 +10,28 @@ const initialState = {
   msg: null,
 };
 
+export const createMonitor = createAsyncThunk(
+  "monitors/createMonitor",
+  async (data, thunkApi) => {
+    try {
+      const { authToken, monitor } = data;
+
+      const res = await axios.post(`${BASE_URL}/monitors`, monitor, {
+        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 getMonitors = createAsyncThunk(
   "monitors/getMonitors",
   async (token, thunkApi) => {
@@ -99,6 +122,25 @@ const monitorsSlice = createSlice({
         state.msg = action.payload
           ? action.payload.msg
           : "Getting montiors failed";
+      })
+
+      // *****************************************************
+      // Create Monitor
+      // *****************************************************
+      .addCase(createMonitor.pending, (state) => {
+        state.isLoading = true;
+      })
+      .addCase(createMonitor.fulfilled, (state, action) => {
+        state.isLoading = false;
+        state.success = action.payload.success;
+        state.msg = action.payload.msg;
+      })
+      .addCase(createMonitor.rejected, (state, action) => {
+        state.isLoading = false;
+        state.success = false;
+        state.msg = action.payload
+          ? action.payload.msg
+          : "Failed to create monitor";
       });
   },
 });

Client/src/Pages/CreateNewMonitor/index.jsx

@@ -6,11 +6,15 @@ import RadioButton from "../../Components/RadioButton";
 import CustomizableCheckBox from "../../Components/Checkbox/CustomizableCheckbox";
 import Button from "../../Components/Button";
 import { MenuItem, Select, Typography } from "@mui/material";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import { createMonitorValidation } from "../../Validation/validation";
+import { createMonitor } from "../../Features/Monitors/monitorsSlice";
 
 const CreateNewMonitor = () => {
-  const { user } = useSelector((state) => state.auth);
+  const MS_PER_MINUTE = 60000;
+  const { user, authToken } = useSelector((state) => state.auth);
+  const dispatch = useDispatch();
+
   const [errors, setErrors] = useState({});
 
   //General Settings Form
@@ -29,7 +33,7 @@ const CreateNewMonitor = () => {
   // });
   //Advanced Settings Form
   const [advancedSettings, setAdvancedSettings] = useState({
-    frequency: "",
+    frequency: 1,
     // retries: "",
     // codes: "",
     // redirects: "",
@@ -75,10 +79,8 @@ const CreateNewMonitor = () => {
   const handleCreateNewMonitor = (event) => {
     event.preventDefault();
     //obj to submit
-    const monitor = {
+    let monitor = {
       ...generalSettings,
-      ...advancedSettings,
-      userId: user._id,
       ...checks,
     };
 
@@ -93,12 +95,17 @@ const CreateNewMonitor = () => {
       });
       setErrors(newErrors);
     } else {
-      //TODO - submit logic
+      monitor = {
+        ...monitor,
+        description: monitor.name,
+        userId: user._id,
+        // ...advancedSettings, // TODO frequency should be interval, then we can use spread
+        interval: advancedSettings.frequency * MS_PER_MINUTE,
+      };
+      dispatch(createMonitor({ authToken, monitor }));
     }
   };
 
-  console.log(errors);
-
   //select values
   // const ports = ["Port 1", "Port 2", "Port 3"];
   const frequencies = [1, 2, 3, 4, 5];