diff --git a/Client/src/Features/Monitors/monitorsSlice.js b/Client/src/Features/Monitors/monitorsSlice.js index 19d536797..c2a4ad044 100644 --- a/Client/src/Features/Monitors/monitorsSlice.js +++ b/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"; }); }, }); diff --git a/Client/src/Pages/CreateNewMonitor/index.jsx b/Client/src/Pages/CreateNewMonitor/index.jsx index 8f59f5225..127ec9766 100644 --- a/Client/src/Pages/CreateNewMonitor/index.jsx +++ b/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];