Restrict all pages to only logged in users

src/Components/Sidebar/Sidebar.tsx

@@ -45,13 +45,15 @@ export default function Sidebar() {
             >
               <ProductsIcon size={48} color="white" />
             </SidebarButton>
-
             <SidebarButton
               onClick={() => navigate("/Inventory")}
               name="Inventory"
             >
               <InventoryIcon size={48} color="white" />
             </SidebarButton>
+            <SidebarButton onClick={() => navigate("/Logs")} name="Logs">
+              <LogsIcon size={48} color="white" />
+            </SidebarButton>
           </div>
         </div>
       </div>

src/Routes/Dashboard/Dashboard.tsx

@@ -8,8 +8,16 @@ 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 { 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>
       <div style={styles.flex_row}>

src/Routes/Logs/Logs.tsx

@@ -10,8 +10,15 @@ import {
   TableRow,
 } from "@mui/material";
 import { SampleLogData } from "../../Components/SampleData/SampleData";
+import { Navigate } from "react-router-dom";
+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>
       <div style={styles.flex_row}>

src/Routes/Product/Product.tsx

@@ -2,9 +2,16 @@ 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 { LoginState } from "../../Interfaces/Interfaces";
+import { useSelector } from "react-redux";
 
 export default function Product() {
   let { id } = useParams();
+  const logged_in = useSelector((state: LoginState) => state.logged_in.value);
+  if (!logged_in) {
+    return <Navigate to="/Login" replace />;
+  }
   return (
     <div>
       <h1 style={{ ...styles.text_white, ...styles.text_XL }}>

src/Routes/Products/Products.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import styles from "../../styles";
 import { useNavigate } from "react-router-dom";
 import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon";
@@ -6,9 +6,16 @@ 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";
 
 export default function Products() {
   const navigate = useNavigate();
+  const logged_in = useSelector((state: LoginState) => state.logged_in.value);
+  if (!logged_in) {
+    return <Navigate to="/Login" replace />;
+  }
   return (
     <div>
       <div style={styles.content_row}>

src/routes/Inventory/Inventory.tsx

@@ -11,8 +11,15 @@ import {
 } from "@mui/material";
 import { SampleInventoryData } from "../../Components/SampleData/SampleData";
 import StockRenderer from "../../Components/InventoryPage/StockRenderer/StockRenderer";
+import { Navigate } from "react-router-dom";
+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%" }}>
       <div style={styles.content_row}>