Implemented async thunk for getMonitorsByUserId

This commit is contained in:
Alex Holliday
2024-06-20 13:50:31 -07:00
parent 085c036bba
commit 2ce8de5304
2 changed files with 41 additions and 7 deletions

View File

@@ -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;
});
},
});

View File

@@ -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}