quik access

src/pages/service/Category.tsx

@@ -6,10 +6,11 @@ import Td from '../../components/Td'
 import CreateCategory from './components/CreateCategory'
 import PageLoading from '../../components/PageLoading'
 import { ServiceCategoryType } from './types/ServiceTypes'
-import { useGetAllCategory } from './hooks/useServiceData'
+import { useDeleteCategory, useGetAllCategory } from './hooks/useServiceData'
 import StatusCategory from './components/StatusCategory'
 import Pagination from '../../components/Pagination'
 import UpdateCategory from './components/UpdateCategory'
+import { Trash } from 'iconsax-react'
 
 
 const Category: FC = () => {
@@ -19,6 +20,15 @@ const Category: FC = () => {
     const [page, setPage] = useState<number>(1)
     const [isActive, setIsActive] = useState<'active' | 'deactive' | ''>('')
     const getCategory = useGetAllCategory(page, search, isActive)
+    const deleteCategory = useDeleteCategory()
+
+    const handleDelete = (id: string) => {
+        deleteCategory.mutate(id, {
+            onSuccess: () => {
+                getCategory.refetch()
+            }
+        })
+    }
 
     return (
         <div className='mt-4'>
@@ -89,7 +99,14 @@ const Category: FC = () => {
                                                                 />
                                                             </Td>
                                                             <Td text={''}>
-                                                                <UpdateCategory refetch={() => getCategory.refetch()} id={item.id} />
+                                                                <div className='flex gap-2'>
+                                                                    <UpdateCategory refetch={() => getCategory.refetch()} id={item.id} />
+                                                                    <Trash
+                                                                        size={20}
+                                                                        color='#888888'
+                                                                        onClick={() => handleDelete(item.id)}
+                                                                    />
+                                                                </div>
                                                             </Td>
                                                         </tr>
                                                     )

src/pages/service/components/UpdateCategory.tsx

@@ -84,7 +84,7 @@ const UpdateCategory: FC<Props> = (props) => {
         }
 
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [getCategoryDetail.data])
+    }, [getCategoryDetail.data, showModal])
 
 
     return (

src/pages/service/hooks/useServiceData.ts

@@ -176,3 +176,9 @@ export const useUpdateCategory = (id: string) => {
       api.updateCategory(id, variables),
   });
 };
+
+export const useDeleteCategory = () => {
+  return useMutation({
+    mutationFn: (variables: string) => api.deleteCategory(variables),
+  });
+};

src/pages/service/service/ServiceService.ts

@@ -156,3 +156,8 @@ export const updateCategory = async (
   );
   return data;
 };
+
+export const deleteCategory = async (id: string) => {
+  const { data } = await axios.delete(`/danak-services/categories/${id}`);
+  return data;
+};