delete product

src/pages/products/List.tsx

@@ -1,5 +1,5 @@
 import { type FC, useState } from 'react'
-import { useGetProducts } from './hooks/useProductData';
+import { useDeleteProduct, useGetProducts } from './hooks/useProductData';
 import { type ProductListType } from './types/Types';
 import { ProductStatus } from './enum/ProductEnum';
 import PageLoading from '../../components/PageLoading';
@@ -7,19 +7,22 @@ import Error from '../../components/Error';
 import PaginationUi from '../../components/PaginationUi';
 import StatusWithText from '../../components/StatusWithText';
 import Td from '../../components/Td';
+import TrashWithConfrim from '../../components/TrashWithConfrim';
 import PageTitle from '../../components/PageTitle';
 import { Edit } from 'iconsax-react';
 import Button from '@/components/Button';
 import { Link } from 'react-router-dom';
 import { Pages } from '@/config/Pages';
 import { useNavigate } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { extractErrorMessage } from '@/helpers/utils';
 
 const List: FC = () => {
 
     const navigate = useNavigate();
     const [currentPage, setCurrentPage] = useState(1);
-    const { data: productsData, isLoading, error } = useGetProducts(currentPage);
-
+    const { data: productsData, isLoading, error, refetch } = useGetProducts(currentPage);
+    const deleteProductMutation = useDeleteProduct();
     if (isLoading) {
         return (
             <div className="flex justify-center items-center min-h-[400px]">
@@ -143,12 +146,20 @@ const List: FC = () => {
                                                 </Link>
                                             )}
 
-                                            {/* <TrashWithConfrim
+                                            <TrashWithConfrim
+                                                isLoading={deleteProductMutation.isPending}
                                                 onDelete={() => {
-                                                    // TODO: Implement delete product
-                                                    console.log('Delete product:', product._id);
+                                                    deleteProductMutation.mutate(product._id, {
+                                                        onSuccess: () => {
+                                                            toast.success('محصول با موفقیت حذف شد');
+                                                            refetch();
+                                                        },
+                                                        onError: (error) => {
+                                                            toast.error(extractErrorMessage(error));
+                                                        }
+                                                    });
                                                 }}
-                                            /> */}
+                                            />
                                         </div>
                                     </Td>
                                 </tr>

src/pages/products/hooks/useProductData.ts

@@ -97,4 +97,10 @@ export const useSearchProducts = (search: string, enabled: boolean = true) => {
     queryFn: () => api.getProducts(1, 50, search),
     enabled: enabled,
   });
+};
+
+export const useDeleteProduct = () => {
+  return useMutation({
+    mutationFn: (id: number) => api.deleteProduct(id),
+  });
 };

src/pages/products/service/ProductService.ts

@@ -94,3 +94,8 @@ export const updateProduct = async (params: UpdateProductRequestType): Promise<U
   const { data } = await axios.patch(`/admin/products/update/save`, params);
   return data;
 };
+
+export const deleteProduct = async (id: number) => {
+  const { data } = await axios.delete(`/admin/products/${id}/delete`);
+  return data;
+};