Merge pull request #166 from bluewave-labs/feat/async-thunk-monitors-by-id

Implemented async thunk for getMonitorsByUserId, resolves #161

Client/src/Features/Monitors/monitorsSlice.js

@@ -22,13 +22,28 @@ export const getMonitors = createAsyncThunk(
   }
 );
 
+export const getMonitorsByUserId = createAsyncThunk(
+  "montiors/getMonitorsByUserId",
+  async (token, thunkApi) => {
+    try {
+      // TODO get userId and make request
+      console.log(token);
+    } catch (error) {
+      return thunkApi.rejectWithValue(error.response.data);
+    }
+  }
+);
+
 const monitorsSlice = createSlice({
   name: "monitors",
   initialState,
   reducers: {},
   extraReducers: (builder) => {
     builder
-      .addCase(getMonitors.pending, (state, action) => {
+      // *****************************************************
+      // All Monitors
+      // *****************************************************
+      .addCase(getMonitors.pending, (state) => {
         state.isLoading = true;
       })
       .addCase(getMonitors.fulfilled, (state, action) => {
@@ -42,6 +57,24 @@ const monitorsSlice = createSlice({
         state.isLoading = false;
         state.success = action.payload.success;
         state.msg = action.payload.msg;
+      })
+      // *****************************************************
+      // Monitors by userId
+      // *****************************************************
+
+      .addCase(getMonitorsByUserId.pending, (state) => {
+        state.isLoading = true;
+      })
+      .addCase(getMonitorsByUserId.fulfilled, (state, action) => {
+        state.isLoading = false;
+        state.success = action.payload.msg;
+        console.log(action.payload);
+        state.monitors = action.payload.data;
+      })
+      .addCase(getMonitorsByUserId.rejected, (state, action) => {
+        state.isLoading = false;
+        state.success = action.payload.success;
+        state.msg = action.payload.msg;
       });
   },
 });

Client/src/Pages/Demo/Demo.jsx

@@ -27,13 +27,14 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import AddIcon from "@mui/icons-material/Add";
 import Divider from "@mui/material/Divider";
-import UploadIcon from '@mui/icons-material/Upload';
-import SendIcon from '@mui/icons-material/Send';
+import UploadIcon from "@mui/icons-material/Upload";
+import SendIcon from "@mui/icons-material/Send";
 
 // Redux
 import { useSelector } from "react-redux";
 import { useDispatch } from "react-redux";
 import { getMonitors } from "../../Features/Monitors/monitorsSlice";
+import { getMonitorsByUserId } from "../../Features/Monitors/monitorsSlice";
 
 const cols = [
   {
@@ -226,7 +227,7 @@ const Demo = () => {
           level="primary"
           label="Get Monitors"
           onClick={() => {
-            dispatch(getMonitors());
+            dispatch(getMonitorsByUserId("User ID Here"));
           }}
         />
       </div>
@@ -393,7 +394,7 @@ const Demo = () => {
           level="primary"
           label="Upload"
           position="start"
-          img={<UploadIcon/>}
+          img={<UploadIcon />}
           onClick={handleButtonSpinnerClick}
           isLoading={isLoading}
         />
@@ -401,11 +402,11 @@ const Demo = () => {
           level="secondary"
           label="Send"
           position="end"
-          img={<SendIcon/>}
+          img={<SendIcon />}
           onClick={handleButtonSpinnerClick}
           isLoading={isLoading}
         />
-         <ButtonSpinner
+        <ButtonSpinner
           level="error"
           label="Disabled"
           onClick={handleButtonSpinnerClick}