Added individual product views and fixed login session checker

src/App.tsx

@@ -9,6 +9,7 @@ import Store from "./Plugins/Redux/Store/Store";
 import { Provider } from "react-redux";
 import Inventory from "./Routes/Inventory/Inventory";
 import Login from "./Routes/Login/Login";
+import Product from "./Routes/Product/Product";
 
 const router = createBrowserRouter([
   {
@@ -56,6 +57,14 @@ const router = createBrowserRouter([
       </Container>
     ),
   },
+  {
+    path: "/Product/:id",
+    element: (
+      <Container>
+        <Product />
+      </Container>
+    ),
+  },
 ]);
 
 export default function App() {

src/Components/Container/Container.tsx

@@ -5,7 +5,8 @@ import styles from "../../styles";
 import { CheckSavedSession, UserInfo } from "../Api/Api";
 import { toggle_login } from "../../Features/Redux/Slices/Login/LoginSlice";
 import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
+import { LoginState } from "../../Interfaces/Interfaces";
 
 export interface props {
   children: React.ReactNode;
@@ -13,13 +14,16 @@ export interface props {
 
 export default function Container(props: props) {
   const dispatch = useDispatch();
+  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();
   }, []);

src/Components/Login/Login.tsx

@@ -4,14 +4,10 @@ import { Button } from "@mui/material";
 import styles from "../../styles";
 import { useNavigate } from "react-router-dom";
 import { LoggedInUserState } from "../../Interfaces/Interfaces";
+import { LoginState } from "../../Interfaces/Interfaces";
 
-export interface state {
-  logged_in: {
-    value: boolean;
-  };
-}
 export default function Login() {
-  const logged_in = useSelector((state: state) => state.logged_in.value);
+  const logged_in = useSelector((state: LoginState) => state.logged_in.value);
   const logged_in_user = useSelector(
     (state: LoggedInUserState) => state.logged_in_user.value
   );

src/Components/ProductsPage/BlobView/BlobView.tsx

@@ -3,32 +3,49 @@ import * as React from "react";
 import styles from "../../../styles";
 import { ProductList } from "../../../Interfaces/Interfaces";
 import ProductIcon from "../../Icons/ProductIcon/ProductIcon";
+import { Button } from "@mui/material";
+import { useNavigate } from "react-router-dom";
 
 export default function BlobView({ Products }: ProductList) {
+  const navigate = useNavigate();
   return (
     <div>
       {Products.map((row) => (
         <div
           key={row.id}
           style={{
-            display: "flex",
-            flexDirection: "column",
             borderRadius: 16,
             backgroundColor: "#1d3b33",
             margin: 32,
             lineHeight: 0,
             padding: 16,
           }}
+        >
+          <Button
+            style={{
+              lineHeight: 0,
+              display: "flex",
+              flexDirection: "column",
+              justifySelf: "flex-start",
+              alignItems: "flex-start",
+              width: "100%",
+            }}
+            onClick={() => navigate("/Product/" + row.id)}
           >
             <div style={styles.content_row}>
               <ProductIcon size={4} color="white" />{" "}
-            <p style={{ ...styles.text_white, ...styles.text_L }}>{row.name}</p>
+              <p style={{ ...styles.text_white, ...styles.text_L }}>
+                {row.name}
+              </p>
             </div>
 
-          <p style={{ ...styles.text_white, ...styles.text_M }}>ID: {row.id}</p>
+            <p style={{ ...styles.text_white, ...styles.text_M }}>
-          <p style={{ ...styles.text_white, ...styles.text_S }}>
+              ID: {row.id}
-            Last Modified: {row.last_modified}
             </p>
+            <p style={{ ...styles.text_white, ...styles.text_S }}>
+              Date Added: {row.date_added}
+            </p>
+          </Button>
         </div>
       ))}
     </div>

src/Components/ProductsPage/TableView/TableView.tsx

@@ -9,8 +9,10 @@ import {
 } from "@mui/material";
 import styles from "../../../styles";
 import { ProductList } from "../../../Interfaces/Interfaces";
+import { useNavigate } from "react-router-dom";
 
 export default function TableView({ Products }: ProductList) {
+  const navigate = useNavigate();
   return (
     <TableContainer
       style={{
@@ -28,7 +30,7 @@ export default function TableView({ Products }: ProductList) {
               Product
             </TableCell>
             <TableCell style={{ ...styles.text_white, ...styles.text_M }}>
-              Last Modified
+              Date Added
             </TableCell>
           </TableRow>
         </TableHead>
@@ -36,7 +38,10 @@ export default function TableView({ Products }: ProductList) {
           {Products.map((row) => (
             <TableRow
               key={row.id}
-              sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+              sx={{
+                "&:last-child td, &:last-child th": { border: 0 },
+              }}
+              onClick={() => navigate("/Product/" + row.id)}
             >
               <TableCell style={{ ...styles.text_white, ...styles.text_S }}>
                 {row.id}
@@ -45,7 +50,7 @@ export default function TableView({ Products }: ProductList) {
                 {row.name}
               </TableCell>
               <TableCell style={{ ...styles.text_white, ...styles.text_S }}>
-                {row.last_modified}
+                {row.date_added}
               </TableCell>
             </TableRow>
           ))}

src/Components/SampleData/SampleData.tsx

@@ -2,12 +2,12 @@ export const SampleProducts = [
   {
     id: 1,
     name: "Zidane's Water",
-    last_modified: "2/24/2023 10:05AM",
+    date_added: "2/24/2023 10:05AM",
   },
   {
     id: 2,
     name: "Dan's Beefed Corn",
-    last_modified: "2/25/2023 4:05PM",
+    date_added: "2/25/2023 4:05PM",
   },
 ];
 

src/Interfaces/Interfaces.tsx

@@ -5,12 +5,14 @@ export interface ProductList {
 export interface Product {
   id: number;
   name: string;
-  last_modified: string;
+  date_added: string;
 }
 
 // Redux Interfaces
 export interface LoginState {
-  Login: { logged_in: boolean };
+  logged_in: {
+    value: boolean;
+  };
 }
 
 export interface LoggedInUserState {

src/Routes/Product/Product.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import styles from "../../styles";
+import { Button } from "@mui/material";
+import { useParams } from "react-router-dom";
+
+export default function Product() {
+  let { id } = useParams();
+  return (
+    <div style={{ margin: 32, height: "100%" }}>
+      <h1 style={{ ...styles.text_white, ...styles.text_XL }}>
+        Individual Product View for id {id}
+      </h1>
+      <Button
+        style={{
+          ...styles.button_baseline,
+          ...{ backgroundColor: "#80b38b" },
+        }}
+        variant="contained"
+      >
+        Login
+      </Button>
+    </div>
+  );
+}