Polished margin of all pages and fixed logout not clearing token

package-lock.json

@@ -28,6 +28,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-fast-marquee": "^1.3.5",
+        "react-query": "^3.39.3",
         "react-redux": "^8.0.5",
         "react-router-dom": "^6.8.1",
         "react-scripts": "5.0.1",
@@ -5614,6 +5615,14 @@
         "node": ">= 8.0.0"
       }
     },
+    "node_modules/big-integer": {
+      "version": "1.6.51",
+      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
+      "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
     "node_modules/big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -5726,6 +5735,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/broadcast-channel": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz",
+      "integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.2",
+        "detect-node": "^2.1.0",
+        "js-sha3": "0.8.0",
+        "microseconds": "0.2.0",
+        "nano-time": "1.0.0",
+        "oblivious-set": "1.0.0",
+        "rimraf": "3.0.2",
+        "unload": "2.2.0"
+      }
+    },
     "node_modules/browser-process-hrtime": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
@@ -11848,6 +11872,11 @@
         "url": "https://opencollective.com/js-sdsl"
       }
     },
+    "node_modules/js-sha3": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz",
+      "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -12278,6 +12307,11 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/microseconds": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz",
+      "integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA=="
+    },
     "node_modules/mime": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
@@ -12443,6 +12477,14 @@
         "multicast-dns": "cli.js"
       }
     },
+    "node_modules/nano-time": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz",
+      "integrity": "sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==",
+      "dependencies": {
+        "big-integer": "^1.6.16"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -12704,6 +12746,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/oblivious-set": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz",
+      "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw=="
+    },
     "node_modules/obuf": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
@@ -14681,6 +14728,31 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-query": {
+      "version": "3.39.3",
+      "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",
+      "integrity": "sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "broadcast-channel": "^3.4.1",
+        "match-sorter": "^6.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-redux": {
       "version": "8.0.5",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz",
@@ -16644,6 +16716,15 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/unload": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz",
+      "integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.2",
+        "detect-node": "^2.0.4"
+      }
+    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",

package.json

@@ -23,6 +23,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-fast-marquee": "^1.3.5",
+    "react-query": "^3.39.3",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.8.1",
     "react-scripts": "5.0.1",

src/App.tsx

@@ -10,6 +10,7 @@ import { Provider } from "react-redux";
 import Inventory from "./Routes/Inventory/Inventory";
 import Login from "./Routes/Login/Login";
 import Product from "./Routes/Product/Product";
+import Activation from "./Routes/Activation/Activation";
 
 const router = createBrowserRouter([
   {
@@ -65,6 +66,14 @@ const router = createBrowserRouter([
       </Container>
     ),
   },
+  {
+    path: "/Activation/:uid/:token",
+    element: (
+      <Container>
+        <Activation />
+      </Container>
+    ),
+  },
 ]);
 
 export default function App() {

src/Components/Container/Container.tsx

@@ -7,6 +7,7 @@ import { toggle_login } from "../../Features/Redux/Slices/Login/LoginSlice";
 import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
 import { useDispatch, useSelector } from "react-redux";
 import { LoginState } from "../../Interfaces/Interfaces";
+import { useNavigate } from "react-router-dom";
 
 export interface props {
   children: React.ReactNode;
@@ -14,6 +15,7 @@ export interface props {
 
 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() {
@@ -35,7 +37,15 @@ export default function Container(props: props) {
         <Sidebar />
       </div>
       <div style={styles.route_wrapper}>
+        <div
+          style={{
+            paddingTop: 16,
+            paddingLeft: 16,
+            paddingRight: 16,
+          }}
+        >
           {props.children}
+        </div>
         <div style={{ padding: 64 }} />
       </div>
     </div>

src/Components/Login/Login.tsx

@@ -1,5 +1,4 @@
-import { useSelector, useDispatch } from "react-redux";
-import { toggle_login } from "../../Features/Redux/Slices/Login/LoginSlice";
+import { useSelector } from "react-redux";
 import { Button } from "@mui/material";
 import styles from "../../styles";
 import { useNavigate } from "react-router-dom";
@@ -12,12 +11,6 @@ export default function Login() {
     (state: LoggedInUserState) => state.logged_in_user.value
   );
   const navigate = useNavigate();
-  const dispatch = useDispatch();
-  async function login() {
-    await dispatch(toggle_login());
-    await console.log("Login State Toggled " + logged_in);
-  }
-
   if (logged_in) {
     return (
       <p style={{ ...styles.text_white, ...styles.text_M }}>

src/Components/Logout/Logout.tsx

@@ -20,6 +20,7 @@ export default function Logout(props: props) {
 
   async function logout() {
     await dispatch(toggle_login());
+    localStorage.removeItem("token");
     navigate("/");
   }
 

src/Routes/Activation/Activation.tsx

@@ -0,0 +1,58 @@
+import styles from "../../styles";
+import { useParams } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { UserActivate } from "../../Components/Api/Api";
+import { ActivationParams } from "../../Interfaces/Interfaces";
+
+export default function Activation() {
+  let { uid, token } = useParams();
+  const [status, setStatus] = useState(0);
+  async function verify(activation: ActivationParams) {
+    let status = await UserActivate(activation);
+    if (status) {
+      setStatus(1);
+    } else {
+      setStatus(2);
+    }
+  }
+  useEffect(() => {
+    if (uid && token) {
+      verify({ uid, token });
+    }
+  }, [uid, token]);
+  if (status === 1) {
+    return (
+      <div style={{ ...styles.content_column, ...{ alignItems: "center" } }}>
+        <p style={{ ...styles.text_white, ...styles.text_S }}>User ID: {uid}</p>
+        <p style={{ ...styles.text_white, ...styles.text_S }}>
+          Activation Token: {token}
+        </p>
+        <p style={{ ...styles.text_green, ...styles.text_S }}>
+          Activation Successful. Please login
+        </p>
+      </div>
+    );
+  }
+  if (status === 2) {
+    return (
+      <div style={{ ...styles.content_column, ...{ alignItems: "center" } }}>
+        <p style={{ ...styles.text_white, ...styles.text_S }}>User ID: {uid}</p>
+        <p style={{ ...styles.text_white, ...styles.text_S }}>
+          Activation Token: {token}
+        </p>
+        <p style={{ ...styles.text_red, ...styles.text_S }}>
+          Invalid Activation Link
+        </p>
+      </div>
+    );
+  }
+  return (
+    <div style={{ ...styles.content_column, ...{ alignItems: "center" } }}>
+      <p style={{ ...styles.text_white, ...styles.text_S }}>User ID: {uid}</p>
+      <p style={{ ...styles.text_white, ...styles.text_S }}>
+        Activation Token: {token}
+      </p>
+      <p style={{ ...styles.text_white, ...styles.text_S }}>Activating...</p>
+    </div>
+  );
+}

src/Routes/Dashboard/Dashboard.tsx

@@ -11,7 +11,7 @@ import RecentlyAddedIcon from "../../Components/Icons/RecentlyAddedIcon/Recently
 
 export default function Dashboard() {
   return (
-    <div style={{ margin: 32, height: "100%" }}>
+    <div>
       <div style={styles.flex_row}>
         <HomeIcon size={64} color="white" />
         <h1 style={{ ...styles.text_white, ...styles.text_XL }}>Dashboard</h1>

src/Routes/Login/Login.tsx

@@ -19,7 +19,7 @@ export default function Login() {
   });
   const [error, setError] = useState("");
   return (
-    <div style={{ margin: 32, height: "100%" }}>
+    <div>
       <div
         style={{
           display: "flex",

src/Routes/Logs/Logs.tsx

@@ -13,7 +13,7 @@ import { SampleLogData } from "../../Components/SampleData/SampleData";
 
 export default function Logs() {
   return (
-    <div style={{ margin: 32, height: "100%" }}>
+    <div>
       <div style={styles.flex_row}>
         <LogsIcon size={64} color="white" />
         <h1 style={{ ...styles.text_white, ...styles.text_XL }}>Logs</h1>

src/Routes/Product/Product.tsx

@@ -6,7 +6,7 @@ import { useParams } from "react-router-dom";
 export default function Product() {
   let { id } = useParams();
   return (
-    <div style={{ margin: 32, height: "100%" }}>
+    <div>
       <h1 style={{ ...styles.text_white, ...styles.text_XL }}>
         Individual Product View for id {id}
       </h1>

src/Routes/Products/Products.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import styles from "../../styles";
 import { useNavigate } from "react-router-dom";
 import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon";
@@ -10,7 +10,7 @@ import ViewManager from "../../Components/ProductsPage/ViewManager";
 export default function Products() {
   const navigate = useNavigate();
   return (
-    <div style={{ margin: 32, height: "100%" }}>
+    <div>
       <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

@@ -14,7 +14,7 @@ import StockRenderer from "../../Components/InventoryPage/StockRenderer/StockRen
 
 export default function Inventory() {
   return (
-    <div style={{ margin: 32, height: "100%" }}>
+    <div style={{ height: "100%" }}>
       <div style={styles.content_row}>
         <InventoryIcon size={64} color="white" />
         <h1 style={{ ...styles.text_white, ...styles.text_XL }}>Inventory</h1>