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";