delete catalog

src/components/ModalConfrim.tsx

@@ -22,7 +22,7 @@ const ModalConfrim: FC<Props> = (props: Props) => {
         <DefaulModal
             open={props.isOpen}
             close={props.close}
-            title_header={t('confrim.subject')}
+            title_header={'حذف'}
             isHeader
         >
             <div className='mt-6'>
@@ -31,7 +31,7 @@ const ModalConfrim: FC<Props> = (props: Props) => {
                         props.label ?
                             props.label
                             :
-                            t('confrim.content')
+                            'برای حذف این آیتم مطمئن هستید؟'
                     }
 
                     {
@@ -49,13 +49,14 @@ const ModalConfrim: FC<Props> = (props: Props) => {
 
                 <div className='flex gap-4 justify-center mt-10'>
                     <Button
+                        className='w-full'
                         onClick={() => props.onConfrim(props.isHasDescription ? description : undefined)}
                         disabled={props.isloading}
                     >
                         بله
                     </Button>
                     <Button
-                        className='bg-transparent text-black border border-primary'
+                        className='bg-transparent w-full hover:bg-gray-100 text-black border border-primary'
                         onClick={props.close}
                     >
                         لغو

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, colorIcon, isloading = false }) => {
     const [isConfirm, setIsConfirm] = useState(false)
     return (
         <div>
             <Trash
                 onClick={() => setIsConfirm(true)}
-                className='size-5'
+                className='size-[18px]'
-                color='#888'
+                color={colorIcon ? colorIcon : '#888'}
             />
 
             <ModalConfrim

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;
+};