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 />;
+}

src/Routes/Dashboard/Dashboard.tsx

@@ -8,18 +8,12 @@ import styles from "../../styles";
 import HomeIcon from "../../Components/Icons/HomeIcon/HomeIcon";
 import ColoredCube from "../../Components/ColoredCube/ColoredCube";
 import RecentlyAddedIcon from "../../Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon";
-import { Navigate } from "react-router-dom";
+import LoginChecker from "../../Components/LoginChecker/LoginChecker";
-import { LoginState } from "../../Interfaces/Interfaces";
-import { useSelector } from "react-redux";
 
 export default function Dashboard() {
-  const logged_in = useSelector((state: LoginState) => state.logged_in.value);
-  if (!logged_in) {
-    return <Navigate to="/Login" replace />;
-  }
-
   return (
     <div>
+      <LoginChecker />
       <div style={styles.flex_row}>
         <HomeIcon size={64} color="white" />
         <h1 style={{ ...styles.text_white, ...styles.text_XL }}>Dashboard</h1>

src/Routes/Logs/Logs.tsx

@@ -10,17 +10,12 @@ import {
   TableRow,
 } from "@mui/material";
 import { SampleLogData } from "../../Components/SampleData/SampleData";
-import { Navigate } from "react-router-dom";
+import LoginChecker from "../../Components/LoginChecker/LoginChecker";
-import { LoginState } from "../../Interfaces/Interfaces";
-import { useSelector } from "react-redux";
 
 export default function Logs() {
-  const logged_in = useSelector((state: LoginState) => state.logged_in.value);
-  if (!logged_in) {
-    return <Navigate to="/Login" replace />;
-  }
   return (
     <div>
+      <LoginChecker />
       <div style={styles.flex_row}>
         <LogsIcon size={64} color="white" />
         <h1 style={{ ...styles.text_white, ...styles.text_XL }}>Logs</h1>

src/Routes/NewProduct/NewProduct.tsx

@@ -8,10 +8,9 @@ import { LoginState } from "../../Interfaces/Interfaces";
 import { useSelector } from "react-redux";
 import { AddProduct } from "../../Components/Api/Api";
 import { useMutation, useQueryClient } from "react-query";
-
+import LoginChecker from "../../Components/LoginChecker/LoginChecker";
 export default function NewProduct() {
   const navigate = useNavigate();
-  const logged_in = useSelector((state: LoginState) => state.logged_in.value);
   const [product, setProduct] = useState("");
   const queryClient = useQueryClient();
   const mutation = useMutation({
@@ -20,11 +19,9 @@ export default function NewProduct() {
       queryClient.invalidateQueries("products");
     },
   });
-  if (!logged_in) {
-    return <Navigate to="/Login" replace />;
-  }
   return (
     <div>
+      <LoginChecker />
       <div style={{ ...styles.content_row, ...{ flex: 1 } }}>
         <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
           <AddIcon size={64} color="white" />

src/Routes/Product/Product.tsx

@@ -2,30 +2,58 @@ import * as React from "react";
 import styles from "../../styles";
 import { Button } from "@mui/material";
 import { useParams } from "react-router-dom";
-import { Navigate } from "react-router-dom";
+import LoginChecker from "../../Components/LoginChecker/LoginChecker";
-import { LoginState } from "../../Interfaces/Interfaces";
+import { GetProduct } from "../../Components/Api/Api";
-import { useSelector } from "react-redux";
+import { useQuery } from "react-query";
 
 export default function Product() {
   let { id } = useParams();
-  const logged_in = useSelector((state: LoginState) => state.logged_in.value);
+  const {
-  if (!logged_in) {
+    data: product,
-    return <Navigate to="/Login" replace />;
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["product", Number(id)],
+    queryFn: () => GetProduct(Number(id)),
+  });
+  if (isLoading) {
+    return (
+      <div>
+        <LoginChecker />
+        <h1 style={{ ...styles.text_white, ...styles.text_XL }}>
+          Individual Product View for id {id}
+        </h1>
+        <div style={styles.content_center}>
+          <h1 style={{ ...styles.text_white, ...styles.text_L }}>
+            Loading product...
+          </h1>
+        </div>
+      </div>
+    );
   }
   return (
     <div>
+      <LoginChecker />
       <h1 style={{ ...styles.text_white, ...styles.text_XL }}>
         Individual Product View for id {id}
       </h1>
-      <Button
+      <div style={styles.content_center}>
-        style={{
+        <h1 style={{ ...styles.text_white, ...styles.text_L }}>
-          ...styles.button_baseline,
+          Product Name: {product.name}
-          ...{ backgroundColor: "#80b38b" },
+        </h1>
-        }}
+        <h1 style={{ ...styles.text_white, ...styles.text_L }}>
-        variant="contained"
+          Date Added: {product.date_added}
-      >
+        </h1>
-        Login
+        <Button
-      </Button>
+          style={{
+            ...styles.button_baseline,
+            ...{ backgroundColor: "#80b38b", justifySelf: "center" },
+          }}
+          variant="contained"
+        >
+          Login
+        </Button>
+      </div>
     </div>
   );
 }

src/Routes/Products/Products.tsx

@@ -6,26 +6,21 @@ import AddIcon from "../../Components/Icons/AddIcon/AddIcon";
 import { Button } from "@mui/material";
 import { SampleProducts } from "../../Components/SampleData/SampleData";
 import ViewManager from "../../Components/ProductsPage/ViewManager";
-import { Navigate } from "react-router-dom";
-import { LoginState } from "../../Interfaces/Interfaces";
-import { useSelector } from "react-redux";
 import { useQuery } from "react-query";
 import { GetProducts } from "../../Components/Api/Api";
+import LoginChecker from "../../Components/LoginChecker/LoginChecker";
 
 export default function Products() {
   const navigate = useNavigate();
-  const logged_in = useSelector((state: LoginState) => state.logged_in.value);
   const {
     data: products,
     isLoading,
     error,
   } = useQuery("products", GetProducts, { retry: 0 });
-  if (!logged_in) {
-    return <Navigate to="/Login" replace />;
-  }
   if (isLoading) {
     return (
       <div>
+        <LoginChecker />
         <div style={styles.content_row}>
           <div style={{ ...styles.content_row, ...{ flex: 1 } }}>
             <div style={{ display: "flex", alignItems: "center", gap: 16 }}>

src/routes/Inventory/Inventory.tsx

@@ -11,17 +11,12 @@ import {
 } from "@mui/material";
 import { SampleInventoryData } from "../../Components/SampleData/SampleData";
 import StockRenderer from "../../Components/InventoryPage/StockRenderer/StockRenderer";
-import { Navigate } from "react-router-dom";
+import LoginChecker from "../../Components/LoginChecker/LoginChecker";
-import { LoginState } from "../../Interfaces/Interfaces";
-import { useSelector } from "react-redux";
 
 export default function Inventory() {
-  const logged_in = useSelector((state: LoginState) => state.logged_in.value);
-  if (!logged_in) {
-    return <Navigate to="/Login" replace />;
-  }
   return (
     <div style={{ height: "100%" }}>
+      <LoginChecker />
       <div style={styles.content_row}>
         <InventoryIcon size={64} color="white" />
         <h1 style={{ ...styles.text_white, ...styles.text_XL }}>Inventory</h1>