Revize 930b05fd

adding redux for user state management

src/stores/actions/userThunks.ts

@@ +1 @@
+import { createAsyncThunk } from "@reduxjs/toolkit"
+import { axiosInstance } from "../../api/api"
+
+export const login = createAsyncThunk(
+    "user/login",
+    async (payload: { username: string, password: string }, thunkAPI) => {
+        const response = await axiosInstance.post(
+            "/api/login",
+            {
+                username: payload.username,
+                password: payload.password,
+            }
+        )
+        if (response.status === 200) {
+            return response.data
+        } else {
+            return Promise.reject(response.data ? response.data : "Login failed")
+        }
+    }
+)

src/stores/reducers/userSlice.ts

@@ +1 @@
+import { createSlice } from "@reduxjs/toolkit"
+import { login } from "../actions/userThunks"
+
+export interface UserState {
+    username: string
+    loggedIn: boolean
+    role: string
+    lastError?: string
+}
+
+const initialState: UserState = {
+    username: "",
+    loggedIn: false,
+    role: ""
+}
+
+export const userSlice = createSlice({
+    name: "user",
+    initialState: initialState,
+    reducers: {
+        logout: () => initialState,
+    },
+    extraReducers: (builder) => {
+        builder.addCase(login.fulfilled, (state, action) => {
+            state.username = action.payload.username
+            state.loggedIn = true
+            state.role = action.payload.role
+            state.lastError = ""
+        })
+        builder.addCase(login.rejected, (state, action) => {
+            state.lastError = action.error.message
+        })
+    }
+})
+
+export const { logout } = userSlice.actions
+
+export default userSlice.reducer

src/stores/store.ts

@@ +1 @@
+import { configureStore } from "@reduxjs/toolkit"
+import userReducer from "./reducers/userSlice"
+
+export default configureStore({
+    reducer: {
+        user: userReducer,
+    },
+})