Reverted some changes and only kept the previous session checker since each page checks for login state invidually

src/Components/Header/Header.tsx

@@ -5,10 +5,11 @@ import AppIcon from "../AppIcon/AppIcon";
 import Login from "../LoginButton/LoginButton";
 import HomeIcon from "../HomeIcon/HomeIcon";
 import UserIcon from "../UserIcon/UserIcon";
-
+import PreviousSessionChecker from "../PreviousSessionChecker/PreviousSessionChecker";
 export default function Header() {
   return (
     <div style={styles.header}>
+      <PreviousSessionChecker />
       <div style={styles.flex_row}>
         <div
           style={{

src/Components/LoginButton/LoginButton.tsx

@@ -3,18 +3,16 @@ import { Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import styles from "../../styles";
 import { useDispatch, useSelector } from "react-redux";
-import { SetLoggedOut } from "../../Features/Redux/Slices/LoginSlice/LoginSlice";
+import { Toggle_Login } from "../../Features/Redux/Slices/LoginSlice/LoginSlice";
 import { UnsetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
 import { RootState } from "../../Features/Redux/Store/Store";
 
 export default function LoginButton() {
   const dispatch = useDispatch();
-  const logged_in = useSelector(
+  const logged_in = useSelector((state: RootState) => state.logged_in.value);
-    (state: RootState) => state.logged_in.value
-    );
   const logged_in_user = useSelector(
     (state: RootState) => state.logged_in_user.value
-    );
+  );
   const navigate = useNavigate();
   if (!logged_in) {
     return (
@@ -42,7 +40,7 @@ export default function LoginButton() {
         variant="contained"
         onClick={() => {
           console.log("Logged out...");
-          dispatch(SetLoggedOut());
+          dispatch(Toggle_Login());
           dispatch(UnsetUser());
           localStorage.setItem("token", "");
         }}

src/Components/PreviousSessionChecker/PreviousSessionChecker.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { useEffect, useCallback } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { UserInfo } from "../Api/Api";
+import { Toggle_Login } from "../../Features/Redux/Slices/LoginSlice/LoginSlice";
+import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
+import { set_checked } from "../../Features/Redux/Slices/OldSession/OldSessionSlice";
+import { RootState } from "../../Features/Redux/Store/Store";
+export default function PreviousSessionChecker() {
+  const dispatch = useDispatch();
+  const logged_in = useSelector((state: RootState) => state.logged_in.value);
+  // Function to check for previous login session
+  const check = useCallback(async () => {
+    if (await UserInfo()) {
+      if (logged_in !== true) {
+        console.log("Previous session found. Restoring");
+        await dispatch(Toggle_Login());
+        await dispatch(SetUser(await UserInfo()));
+      }
+    } else {
+      console.log("No old session found");
+      localStorage.removeItem("token");
+    }
+    await dispatch(set_checked());
+  }, [dispatch, logged_in]);
+  useEffect(() => {
+    if (!logged_in) {
+      check();
+    }
+  }, [check, logged_in]);
+  return <div />;
+}

src/Features/Redux/Slices/LoginSlice/LoginSlice.tsx

@@ -6,16 +6,13 @@ export const LoginSlice = createSlice({
     value: false,
   },
   reducers: {
-    SetLoggedIn: (state) => {
+    Toggle_Login: (state) => {
-      state.value = !state.value;
-    },
-    SetLoggedOut: (state) => {
       state.value = !state.value;
     },
   },
 });
 
 // Action creators are generated for each case reducer function
-export const { SetLoggedIn, SetLoggedOut } = LoginSlice.actions;
+export const { Toggle_Login } = LoginSlice.actions;
 
 export default LoginSlice.reducer;

src/Features/Redux/Slices/OldSession/OldSessionSlice.tsx

@@ -0,0 +1,17 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+export const OldSessionSlice = createSlice({
+  name: "old_session_checked",
+  initialState: {
+    value: false,
+  },
+  reducers: {
+    set_checked: (state) => {
+      state.value = !state.value;
+    },
+  },
+});
+
+export const { set_checked } = OldSessionSlice.actions;
+
+export default OldSessionSlice.reducer;

src/Features/Redux/Store/Store.tsx

@@ -1,11 +1,13 @@
 import { configureStore } from "@reduxjs/toolkit";
 import LoginReducer from "../Slices/LoginSlice/LoginSlice";
 import LoggedInUserReucer from "../Slices/LoggedInUserSlice/LoggedInUserSlice";
+import OldSessionReducer from "../Slices/OldSession/OldSessionSlice";
 
 const store = configureStore({
   reducer: {
     logged_in: LoginReducer,
     logged_in_user: LoggedInUserReucer,
+    old_session_checked: OldSessionReducer,
   },
 });
 
@@ -13,4 +15,4 @@ export default store;
 
 // Infer the `RootState` and `AppDispatch` types from the store itself
 export type RootState = ReturnType<typeof store.getState>;
-export type AppDispatch = typeof store.dispatch;
+export type AppDispatch = typeof store.dispatch;

src/Routes/Login/Login.tsx

@@ -9,7 +9,7 @@ import { UserInfo, UserLogin } from "../../Components/Api/Api";
 
 import { useDispatch } from "react-redux";
 import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
-import { SetLoggedIn } from "../../Features/Redux/Slices/LoginSlice/LoginSlice";
+import { Toggle_Login } from "../../Features/Redux/Slices/LoginSlice/LoginSlice";
 
 export default function Login() {
   const navigate = useNavigate();
@@ -56,7 +56,7 @@ export default function Login() {
               password: "",
             });
             if (await UserLogin(user)) {
-              await dispatch(SetLoggedIn());
+              await dispatch(Toggle_Login());
               await dispatch(SetUser(await UserInfo()));
               navigate("/");
             } else {