delete product

src/components/TrashWithConfrim.tsx

@@ -4,17 +4,18 @@ import ModalConfrim from './ModalConfrim'
 
 interface Props {
     onDelete: () => void,
-    isloading?: boolean
+    isloading?: boolean,
+    colorIcon?: string,
 }
 
-const TrashWithConfrim: FC<Props> = ({ onDelete, isloading = false }) => {
+const TrashWithConfrim: FC<Props> = ({ onDelete, isloading = false, colorIcon }) => {
     const [isConfirm, setIsConfirm] = useState(false)
     return (
         <div>
             <Trash
                 onClick={() => setIsConfirm(true)}
                 className='size-5'
-                color='#888'
+                color={colorIcon || '#888'}
             />
 
             <ModalConfrim

src/pages/product/List.tsx

@@ -3,13 +3,29 @@ import Filters from '@/components/Filters'
 import Table from '@/components/Table'
 import { AddSquare, Edit, More2 } from 'iconsax-react'
 import { type FC } from 'react'
-import { useGetProducts } from './hooks/useProductData'
+import { useDeleteProduct, useGetProducts } from './hooks/useProductData'
 import { Link } from 'react-router-dom'
 import { Paths } from '@/config/Paths'
+import TrashWithConfrim from '@/components/TrashWithConfrim'
+import { toast } from 'react-toastify'
+import { extractErrorMessage } from '@/config/func'
 
 const ProductList: FC = () => {
 
-    const { data: products } = useGetProducts()
+    const { data: products, refetch } = useGetProducts()
+    const { mutate: deleteProduct, isPending: isDeleting } = useDeleteProduct()
+
+    const handleDelete = (id: number) => {
+        deleteProduct(id, {
+            onSuccess: () => {
+                refetch()
+                toast.success('با موفقیت حذف شد')
+            },
+            onError: (error) => {
+                toast.error(extractErrorMessage(error))
+            }
+        })
+    }
 
     return (
         <div className='mt-5'>
@@ -80,9 +96,16 @@ const ProductList: FC = () => {
                             title: '',
                             render: (item) => {
                                 return (
-                                    <Link to={Paths.product.update + item.id}>
-                                        <Edit size={20} color='#0037FF' />
-                                    </Link>
+                                    <div className='flex gap-2 items-center'>
+                                        <Link to={Paths.product.update + item.id}>
+                                            <Edit size={20} color='#0037FF' />
+                                        </Link>
+                                        <TrashWithConfrim
+                                            onDelete={() => handleDelete(item.id)}
+                                            isloading={isDeleting}
+                                            colorIcon='red'
+                                        />
+                                    </div>
                                 )
                             }
                         },

src/pages/product/hooks/useProductData.ts

@@ -80,3 +80,9 @@ export const useUpdateProduct = () => {
     },
   });
 };
+
+export const useDeleteProduct = () => {
+  return useMutation({
+    mutationFn: (id: number) => api.deleteProduct(id),
+  });
+};

src/pages/product/service/ProductService.ts

@@ -44,4 +44,9 @@ export const createProduct = async (params:CreateProductType) => {
 export const updateProduct = async (id: number, params:CreateProductType) => {
   const { data } = await axios.patch(`/admin/products/${id}`, params);
   return data;
+};
+
+export const deleteProduct = async (id: number) => {
+  const { data } = await axios.delete(`/admin/products/${id}`);
+  return data;
 };