add users and fix modal

frontend/src/pages/Products/index.tsx

@@ -1,6 +1,6 @@
 import { ActionIcon, Group, Loader, ScrollArea, Stack, Table, Title, Tooltip } from "@mantine/core";
 import { t } from "@/config/i18n";
-import { createProduct, editProduct, getProducts } from "@/services/api";
+import { createProduct, editProduct, getProduct, getProducts } from "@/services/api";
 import { IconPlus } from "@tabler/icons-react";
 import ProductRow from "@/components/Products/Row";
 import { useLocation, useNavigate, useSearchParams } from "react-router";
@@ -17,12 +17,20 @@ export default function Products() {
     const isCreate = location.pathname === "/dashboard/products/create";
     const isEdit = location.pathname.includes("/edit");
 
+    const editId = useMemo(() => {
+        if (isEdit) {
+            return location.pathname.split("/")[3]
+        }
+        return null
+    }, [location, isEdit])
+
     const closeModal = () => {
         navigate("/dashboard/products");
     };
 
-    const {data: products, isPending} = getProducts(searchParams);
-    const {data: allProducts } = getProducts();
+    const { data: products, isPending } = getProducts(searchParams);
+    const { data: currentProduct } = getProduct(Number(editId), { enabled: !!editId });
+    const { data: allProducts } = getProducts();
 
     const names = useMemo(() => {
         return allProducts?.map((product: Product) => (product.name))
@@ -60,7 +68,6 @@ export default function Products() {
             values.forEach(value => {
                 params.append(filter, value);
             });
-
             return params;
         });
     }, [searchParams, setSearchParams])
@@ -94,6 +101,12 @@ export default function Products() {
                 filters={searchParams}
                 onFilterChange={onFilterChange}
             />
+            <ProductModal
+                opened={isEdit}
+                onClose={closeModal}
+                currentProduct={currentProduct}
+                handleSubmit={handleEditProduct}
+            />
             <ScrollArea type="auto">
                 <Table striped>
                     <Table.Thead>
@@ -112,10 +125,7 @@ export default function Products() {
                             products.map((product) => (
                                 <ProductRow 
                                     product={product}
-                                    isEdit={isEdit} 
-                                    closeModal={closeModal} 
-                                    handleSubmit={handleEditProduct}
-
+                                    key={product.id}
                                 />
                             ))
                         }