auth kinda works now

frontend/app/src/config/store.ts

@@ -1,18 +1,37 @@
-import { configureStore } from '@reduxjs/toolkit'
-import { setupListeners } from '@reduxjs/toolkit/query'
-import { AuthApi } from '../slice/AuthApi'
+import { configureStore, createAction, createReducer } from "@reduxjs/toolkit";
+import { setupListeners } from "@reduxjs/toolkit/query";
+import { AuthApi } from "../slice/AuthApi";
+
+export type authState = {
+  token: string | null;
+};
+
+const initialAuthState: authState = {
+  token: null,
+};
 
 export const store = configureStore({
   reducer: {
     // Add the generated reducer as a specific top-level slice
     [AuthApi.reducerPath]: AuthApi.reducer,
+    auth: createReducer(initialAuthState, (builder) => {
+      builder.addCase(createAction("auth/token"), (state, _) => {
+        const token: string | null = localStorage.getItem("token");
+        if (token) {
+          state.token = token;
+        }
+      });
+    }),
   },
   // Adding the api middleware enables caching, invalidation, polling,
   // and other useful features of `rtk-query`.
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware().concat(AuthApi.middleware),
-})
+});
 
 // optional, but required for refetchOnFocus/refetchOnReconnect behaviors
 // see `setupListeners` docs - takes an optional callback as the 2nd arg for customization
-setupListeners(store.dispatch)
+setupListeners(store.dispatch);
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;

frontend/app/src/config/style.ts

@@ -1,23 +1,26 @@
 export const theme = {
-    components: {
-        Modal: {
-            contentBg: "#001529"
-        },
-        Form: {
-            labelColor: "#77828c"
-        },
-        Input: {
-            activeBg: "#001c36",
-        },
-        Button: {
-            primaryColor: "#001529"
-        }
+  components: {
+    Modal: {
+      contentBg: "#001529",
     },
-    token: {
-        colorText: "#ffffff",
-        colorBgContainer: "#001c36",
-        colorIcon: "#77828c",
-        colorPrimary: "#ffffff",
-        colorPrimaryHover: "#001529",
-    }
-};
+    Form: {
+      labelColor: "#77828c",
+    },
+    Input: {
+      activeBg: "#001c36",
+    },
+    Button: {
+      primaryColor: "#001529",
+    },
+    Message: {
+      contentBg: "#001c36",
+    },
+  },
+  token: {
+    colorText: "#ffffff",
+    colorBgContainer: "#001c36",
+    colorIcon: "#77828c",
+    colorPrimary: "#ffffff",
+    colorPrimaryHover: "#001529",
+  },
+};