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 (
@@ -22,15 +23,81 @@ export default function ViewManager(props: ProductList) {
if (tableView) {
return (
-
toggleTableView(!tableView)} />
-
+
+
toggleTableView(!tableView)}
+ />
+
+
+
+ Search
+
+
) => {
+ setSearchTerm(e.target.value);
+ }}
+ maxLength={20}
+ />
+
+
+
+ Product.name.toLowerCase().includes(searchTerm)
+ )}
+ />
);
} else {
return (
-
toggleTableView(!tableView)} />
-
+
+
toggleTableView(!tableView)}
+ />
+
+
+
+ Search
+
+
) => {
+ setSearchTerm(e.target.value);
+ }}
+ maxLength={20}
+ />
+
+
+
+ Product.name.toLowerCase().includes(searchTerm)
+ )}
+ />
);
}
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";