From 46ddb257093ce1adc32b6b2daf06260e4cf935ea Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Thu, 9 Mar 2023 17:05:15 +0800
Subject: [PATCH] Cleaned up new delete/new product query refresh and added
 search to products page

---
 src/Components/ProductsPage/ViewManager.tsx | 75 +++++++++++++++++++--
 src/Routes/NewProduct/NewProduct.tsx        |  2 +-
 src/Routes/Products/Products.tsx            |  2 +-
 3 files changed, 73 insertions(+), 6 deletions(-)

diff --git a/src/Components/ProductsPage/ViewManager.tsx b/src/Components/ProductsPage/ViewManager.tsx
index da535a6..fd10bfc 100644
--- a/src/Components/ProductsPage/ViewManager.tsx
+++ b/src/Components/ProductsPage/ViewManager.tsx
@@ -10,6 +10,7 @@ export interface props {}
 
 export default function ViewManager(props: ProductList) {
   const [tableView, toggleTableView] = useState(true);
+  const [searchTerm, setSearchTerm] = useState("");
   if (props.Products.length === 0) {
     return (
       <div style={{ ...styles.content_column, ...{ alignItems: "center" } }}>
@@ -22,15 +23,81 @@ export default function ViewManager(props: ProductList) {
   if (tableView) {
     return (
       <div>
-        <Switch onClick={() => toggleTableView(!tableView)} />
-        <TableView Products={props.Products} />
+        <div style={styles.content_row}>
+          <Switch
+            style={{ flex: 1 }}
+            onClick={() => toggleTableView(!tableView)}
+          />
+          <div style={{ flex: 8 }} />
+          <div
+            style={{
+              ...styles.content_row,
+              ...{ flex: 1, justifyContent: "flex-end" },
+            }}
+          >
+            <p style={{ ...styles.text_white, ...styles.text_S }}>
+              Search&nbsp;
+            </p>
+            <input
+              style={{
+                ...{
+                  flex: 5,
+                  height: "2rem",
+                },
+                ...styles.text_S,
+              }}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                setSearchTerm(e.target.value);
+              }}
+              maxLength={20}
+            />
+          </div>
+        </div>
+        <TableView
+          Products={props.Products.filter((Product) =>
+            Product.name.toLowerCase().includes(searchTerm)
+          )}
+        />
       </div>
     );
   } else {
     return (
       <div>
-        <Switch onClick={() => toggleTableView(!tableView)} />
-        <BlobView Products={props.Products} />
+        <div style={styles.content_row}>
+          <Switch
+            style={{ flex: 1 }}
+            onClick={() => toggleTableView(!tableView)}
+          />
+          <div style={{ flex: 8 }} />
+          <div
+            style={{
+              ...styles.content_row,
+              ...{ flex: 1, justifyContent: "flex-end" },
+            }}
+          >
+            <p style={{ ...styles.text_white, ...styles.text_S }}>
+              Search&nbsp;
+            </p>
+            <input
+              style={{
+                ...{
+                  flex: 5,
+                  height: "2rem",
+                },
+                ...styles.text_S,
+              }}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                setSearchTerm(e.target.value);
+              }}
+              maxLength={20}
+            />
+          </div>
+        </div>
+        <BlobView
+          Products={props.Products.filter((Product) =>
+            Product.name.toLowerCase().includes(searchTerm)
+          )}
+        />
       </div>
     );
   }
diff --git a/src/Routes/NewProduct/NewProduct.tsx b/src/Routes/NewProduct/NewProduct.tsx
index 41a3f92..14d1c18 100644
--- a/src/Routes/NewProduct/NewProduct.tsx
+++ b/src/Routes/NewProduct/NewProduct.tsx
@@ -14,7 +14,7 @@ export default function NewProduct() {
     mutationFn: AddProduct,
     onSuccess: () => {
       queryClient.invalidateQueries("products");
-      queryClient.invalidateQueries("logs");
+      queryClient.invalidateQueries("product");
       queryClient.invalidateQueries("logs");
     },
   });
diff --git a/src/Routes/Products/Products.tsx b/src/Routes/Products/Products.tsx
index f84a96d..a48a69a 100644
--- a/src/Routes/Products/Products.tsx
+++ b/src/Routes/Products/Products.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import styles from "../../styles";
 import { useNavigate } from "react-router-dom";
 import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon";