Redirect once done adding new product

src/App.tsx

@@ -11,7 +11,10 @@ import Inventory from "./Routes/Inventory/Inventory";
 import Login from "./Routes/Login/Login";
 import Product from "./Routes/Product/Product";
 import Activation from "./Routes/Activation/Activation";
-import AddProduct from "./Routes/AddProduct/AddProduct";
+import { QueryClient, QueryClientProvider } from "react-query";
+import NewProduct from "./Routes/NewProduct/NewProduct";
+
+const queryClient = new QueryClient();
 
 const router = createBrowserRouter([
   {
@@ -76,10 +79,10 @@ const router = createBrowserRouter([
     ),
   },
   {
-    path: "/AddProduct",
+    path: "/NewProduct",
     element: (
       <Container>
-        <AddProduct />
+        <NewProduct />
       </Container>
     ),
   },
@@ -88,7 +91,9 @@ const router = createBrowserRouter([
 export default function App() {
   return (
     <Provider store={Store}>
-      <RouterProvider router={router} />
+      <QueryClientProvider client={queryClient}>
+        <RouterProvider router={router} />
+      </QueryClientProvider>
     </Provider>
   );
 }

src/Components/Api/Api.tsx

@@ -6,11 +6,7 @@ import {
   LoginParams,
   RegistrationParams,
 } from "../../Interfaces/Interfaces";
-import { useDispatch } from "react-redux";
-import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
-import { toggle_login } from "../../Features/Redux/Slices/Login/LoginSlice";
-
-// Note APIs
+// Product APIs
 
 export function GetProducts() {
   const token = JSON.parse(localStorage.getItem("token") || "{}");
@@ -25,7 +21,7 @@ export function GetProducts() {
     });
 }
 
-export function GetNote(id: number) {
+export function GetProduct(id: number) {
   const token = JSON.parse(localStorage.getItem("token") || "{}");
   return axios
     .get("http://localhost:8000/api/v1/products/" + id + "/", {
@@ -156,7 +152,8 @@ export async function CheckSavedSession() {
       console.log("Previous session found");
       return true;
     } else {
-      console.log("Previous session found but expired");
+      console.log("Previous session found but expired. Clearing token");
+      localStorage.removeItem("token");
       return false;
     }
   }

src/Interfaces/Interfaces.tsx

@@ -52,7 +52,6 @@ export interface ActivationParams {
 
 export interface AddProductParams {
   name: string;
-  quantity: string;
 }
 
 export interface UpdateProductParams {

src/Routes/AddProduct/AddProduct.tsx

@@ -1,44 +0,0 @@
-import React, { useEffect } from "react";
-import styles from "../../styles";
-import { useNavigate } from "react-router-dom";
-import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon";
-import AddIcon from "../../Components/Icons/AddIcon/AddIcon";
-import { Button } from "@mui/material";
-import { Navigate } from "react-router-dom";
-import { LoginState } from "../../Interfaces/Interfaces";
-import { useSelector } from "react-redux";
-
-export default function AddProduct() {
-  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.conter_center}>
-        <div style={{ ...styles.content_row, ...{ flex: 1 } }}>
-          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
-            <AddIcon size={64} color="white" />
-            <h1 style={{ ...styles.text_white, ...styles.text_XL }}>
-              Add Product
-            </h1>
-          </div>
-          <div
-            style={{
-              ...styles.content_row,
-              ...{ justifyContent: "flex-end", flex: 1 },
-            }}
-          ></div>
-        </div>
-      </div>
-      <Button
-        onClick={() => navigate("/Products/AddProduct")}
-        style={styles.button_add_product}
-      >
-        <AddIcon size={32} color="white" />
-        <p style={{ ...styles.text_white, ...styles.text_M }}>Add Product</p>
-      </Button>
-    </div>
-  );
-}

src/Routes/NewProduct/NewProduct.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useState } from "react";
+import styles from "../../styles";
+import { useNavigate } from "react-router-dom";
+import AddIcon from "../../Components/Icons/AddIcon/AddIcon";
+import { Button } from "@mui/material";
+import { Navigate } from "react-router-dom";
+import { LoginState } from "../../Interfaces/Interfaces";
+import { useSelector } from "react-redux";
+import { AddProduct } from "../../Components/Api/Api";
+import { useMutation, useQueryClient } from "react-query";
+
+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({
+    mutationFn: AddProduct,
+    onSuccess: () => {
+      queryClient.invalidateQueries("products");
+    },
+  });
+  if (!logged_in) {
+    return <Navigate to="/Login" replace />;
+  }
+  return (
+    <div>
+      <div style={{ ...styles.content_row, ...{ flex: 1 } }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
+          <AddIcon size={64} color="white" />
+          <h1 style={{ ...styles.text_white, ...styles.text_XL }}>
+            Add Product
+          </h1>
+        </div>
+      </div>
+      <div style={styles.content_center}>
+        <div style={{ ...styles.content_column, ...{ alignItems: "center" } }}>
+          <div style={styles.content_row}>
+            <p
+              style={{
+                ...styles.text_white,
+                ...styles.text_M,
+                ...{ marginRight: 4 },
+              }}
+            >
+              Product Name
+            </p>
+            <input
+              style={{ width: "32rem" }}
+              onChange={(e: { target: { value: any } }) => {
+                setProduct(e.target.value);
+              }}
+              maxLength={20}
+            />
+          </div>
+          <div style={{ padding: 8 }} />
+          <Button
+            onClick={async () => {
+              try {
+                await mutation.mutate({
+                  name: product,
+                });
+                navigate("/Products");
+              } catch (error) {}
+            }}
+            style={styles.button_add_product}
+          >
+            <p style={{ ...styles.text_white, ...styles.text_M }}>
+              Add Product
+            </p>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/Routes/Products/Products.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import styles from "../../styles";
 import { useNavigate } from "react-router-dom";
 import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon";
@@ -9,13 +9,57 @@ 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";
 
 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>
+        <div style={styles.content_row}>
+          <div style={{ ...styles.content_row, ...{ flex: 1 } }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
+              <ProductsIcon size={64} color="white" />
+              <h1 style={{ ...styles.text_white, ...styles.text_XL }}>
+                Products
+              </h1>
+            </div>
+          </div>
+          <h1 style={{ ...styles.text_white, ...styles.text_L }}>
+            Loading Products...
+          </h1>
+        </div>
+      </div>
+    );
+  } else if (error) {
+    return (
+      <div>
+        <div style={styles.content_row}>
+          <div style={{ ...styles.content_row, ...{ flex: 1 } }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
+              <ProductsIcon size={64} color="white" />
+              <h1 style={{ ...styles.text_white, ...styles.text_XL }}>
+                Products
+              </h1>
+            </div>
+          </div>
+          <h1 style={{ ...styles.text_red, ...styles.text_L }}>
+            Error loading products
+          </h1>
+        </div>
+      </div>
+    );
+  }
   return (
     <div>
       <div style={styles.content_row}>
@@ -33,7 +77,7 @@ export default function Products() {
             }}
           >
             <Button
-              onClick={() => navigate("/AddProduct")}
+              onClick={() => navigate("/NewProduct")}
               style={styles.button_add_product}
             >
               <AddIcon size={32} color="white" />
@@ -44,7 +88,7 @@ export default function Products() {
           </div>
         </div>
       </div>
-      <ViewManager Products={SampleProducts} />
+      <ViewManager Products={products} />
     </div>
   );
 }

src/styles.tsx

@@ -152,6 +152,7 @@ const styles: { [key: string]: React.CSSProperties } = {
   },
   content_center: {
     display: "flex",
+    flexDirection: "column",
     justifyContent: "center",
     textAlign: "center",
   },