Separated session checker and page login verifier into components

src/Components/Api/Api.tsx

@@ -6,6 +6,7 @@ import {
   LoginParams,
   RegistrationParams,
 } from "../../Interfaces/Interfaces";
+
 // Product APIs
 
 export function GetProducts() {

src/Components/Container/Container.tsx

@@ -8,30 +8,16 @@ import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInU
 import { useDispatch, useSelector } from "react-redux";
 import { LoginState } from "../../Interfaces/Interfaces";
 import { useNavigate } from "react-router-dom";
+import PreviousSessionChecker from "../PreviousSessionChecker/PreviousSessionChecker";
 
 export interface props {
   children: React.ReactNode;
 }
 
 export default function Container(props: props) {
-  const dispatch = useDispatch();
-  const navigate = useNavigate();
-  const logged_in = useSelector((state: LoginState) => state.logged_in.value);
-  // Function to check for previous login session
-  async function CheckPreviousSession() {
-    if (await CheckSavedSession()) {
-      if (logged_in !== true) {
-        await dispatch(toggle_login());
-        await dispatch(SetUser(await UserInfo()));
-      }
-    }
-  }
-  useEffect(() => {
-    CheckPreviousSession();
-  }, []);
-
   return (
     <div>
+      <PreviousSessionChecker />
       <Header />
       <div style={{ width: "15%", position: "fixed" }}>
         <Sidebar />

src/Components/LoginChecker/LoginChecker.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { Navigate } from "react-router-dom";
+
+import { useDispatch, useSelector } from "react-redux";
+import { LoginState } from "../../Interfaces/Interfaces";
+
+export interface props {}
+
+export default function LoginChecker() {
+  const logged_in = useSelector((state: LoginState) => state.logged_in.value);
+  if (!logged_in) {
+    console.log("Not logged in. Redirecting to login page");
+    return <Navigate to="/Login" replace />;
+  }
+  return <div />;
+}

src/Components/PreviousSessionChecker/PreviousSessionChecker.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { CheckSavedSession, UserInfo } from "../Api/Api";
+import { toggle_login } from "../../Features/Redux/Slices/Login/LoginSlice";
+import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
+import { LoginState } from "../../Interfaces/Interfaces";
+export default function PreviousSessionChecker() {
+  const dispatch = useDispatch();
+  const logged_in = useSelector((state: LoginState) => state.logged_in.value);
+  // Function to check for previous login session
+  useEffect(() => {
+    async function check() {
+      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");
+      }
+    }
+    check();
+  }, []);
+  return <div />;
+}