delete catalog

src/pages/catalogue/List.tsx

@@ -5,7 +5,7 @@ import CatalogueItem from './components/CatalogueItem'
 
 const CatalogueList: FC = () => {
 
-    const { data } = useGetCatalog()
+    const { data, refetch } = useGetCatalog()
 
     return (
         <div className='w-full mt-5'>
@@ -13,7 +13,7 @@ const CatalogueList: FC = () => {
                 {
                     data?.data?.map((item) => {
                         return (
-                            <CatalogueItem key={item.id} item={item} />
+                            <CatalogueItem refetch={refetch} key={item.id} item={item} />
                         )
                     })
                 }

src/pages/catalogue/components/CatalogueItem.tsx

@@ -1,16 +1,36 @@
 import { type FC } from 'react'
-import { Edit, Eye, Share, Trash } from 'iconsax-react'
+import { Edit, Eye, Share } from 'iconsax-react'
 import type { CatalogItemType } from '../types/Types'
 import moment from 'moment-jalaali'
 import { Link } from 'react-router-dom'
 import { Paths } from '@/config/Paths'
 import CatalogPreview from './CatalogPreview'
+import TrashWithConfrim from '@/components/TrashWithConfrim'
+import { useDleteCatalog } from '@/pages/home/hooks/useHomeData'
+import { toast } from '@/components/Toast'
+import { extractErrorMessage } from '@/helpers/utils'
 
 type Props = {
-    item: CatalogItemType
+    item: CatalogItemType,
+    refetch: () => void,
 }
 
-const CatalogueItem: FC<Props> = ({ item }) => {
+const CatalogueItem: FC<Props> = ({ item, refetch }) => {
+
+    const deleteCatalog = useDleteCatalog()
+
+    const handleDelete = () => {
+        deleteCatalog.mutate(item.id, {
+            onSuccess: () => {
+                toast('با موفقیت حذف شد', 'success')
+                refetch()
+            },
+            onError: (error) => {
+                toast(extractErrorMessage(error, 'error'))
+            }
+        })
+    }
+
     return (
         <div className='bg-white p-6 rounded-3xl w-full'>
             <div className='flex gap-4 items-center'>
@@ -39,7 +59,11 @@ const CatalogueItem: FC<Props> = ({ item }) => {
                     <Share size={18} color='#000' />
                 </div>
                 <div className='size-6 bg-[#EAECF4] rounded-md flex justify-center items-center'>
-                    <Trash size={18} color='#E12800' />
+                    <TrashWithConfrim
+                        onDelete={handleDelete}
+                        colorIcon='red'
+                        isloading={deleteCatalog.isPending}
+                    />
                 </div>
             </div>
         </div>

src/pages/home/hooks/useHomeData.ts

@@ -8,6 +8,12 @@ export const useCreateCatalog = () => {
   });
 };
 
+export const useDleteCatalog = () => {
+  return useMutation({
+    mutationFn: (id: string) => api.deleteCatalogById(id),
+  });
+};
+
 export const useGetCatalog = () => {
   return useQuery({
     queryKey: ["catalogs"],

src/pages/home/service/HomeService.ts

@@ -31,3 +31,8 @@ export const updateCatalog = async (params: UpdateCatalogParamsType) => {
   });
   return data;
 };
+
+export const deleteCatalogById = async (id: string) => {
+  const { data } = await axios.delete(`/admin/catalogue/${id}`);
+  return data;
+};