learning category

src/pages/learning/Category.tsx

@@ -1,16 +1,45 @@
 import { type FC, useState } from 'react'
 // import { useTranslation } from 'react-i18next'
-import Td from '../../components/Td'
-import DefaultTableSkeleton from '../../components/DefaultTableSkeleton'
-import Pagination from '../../components/Pagination'
-import { useGetCategory } from './hooks/useLearningData'
+import Table from '../../components/Table'
+import TrashWithConfrim from '../../components/TrashWithConfrim'
+import { type ColumnType } from '../../components/types/TableTypes'
+import { useGetCategory, useDeleteCategory } from './hooks/useLearningData'
 import { type CategoryLearningType } from './hooks/useLearningData'
 import CreateCategory from './components/CreateCategory'
+import { toast } from 'react-toastify'
+import { extractErrorMessage } from '../../config/func'
 
 
 const LearningCategory: FC = () => {
     const [page, setPage] = useState<number>(1)
     const getCategory = useGetCategory()
+    const { mutate, isPending } = useDeleteCategory()
+
+    const handleDelete = (id: string | number) => {
+        mutate(id, {
+            onError: (error) => {
+                toast.error(extractErrorMessage(error))
+            },
+        })
+    }
+
+    const columns: ColumnType<CategoryLearningType>[] = [
+        {
+            title: 'عنوان',
+            key: 'name',
+        },
+        {
+            title: '',
+            key: 'action',
+            render: (item) => (
+                <TrashWithConfrim
+                    onDelete={() => handleDelete(item.id)}
+                    isloading={isPending}
+                    colorIcon='red'
+                />
+            ),
+        },
+    ]
 
     return (
         <div className='mt-4'>
@@ -20,48 +49,20 @@ const LearningCategory: FC = () => {
 
             <div className='flex gap-6 mt-8'>
                 <div className='flex-1'>
-
                     <div className='flex-1 bg-white py-2 xl:px-10 px-5 rounded-3xl'>
-                        {
-                            getCategory.isPending ?
-                                <div className='mt-4'>
-                                    <DefaultTableSkeleton tdCount={2} />
-                                </div>
-                                :
-                                <div className='relative overflow-x-auto rounded-3xl w-full'>
-                                    <table className='w-full text-sm '>
-                                        <thead className='thead'>
-                                            <tr>
-                                                <Td text='عنوان' />
-                                                <Td text={''} />
-                                            </tr>
-                                        </thead>
-                                        <tbody>
-                                            {
-                                                getCategory.data?.data?.categories?.map((item: CategoryLearningType) => {
-                                                    return (
-                                                        <tr key={item.id} className='tr'>
-                                                            <Td text={item.name} />
-                                                            <Td text={''} />
-                                                        </tr>
-                                                    )
-                                                })
-                                            }
-                                        </tbody>
-                                    </table>
-                                    <div className='flex justify-end pb-3'>
-                                        <Pagination
-                                            currentPage={page}
-                                            totalPages={getCategory.data?.data?.pager?.totalPages}
-                                            onPageChange={setPage}
+                        <Table<CategoryLearningType>
+                            columns={columns}
+                            data={getCategory.data?.data?.categories}
+                            isLoading={getCategory.isPending}
+                            pagination={{
+                                currentPage: page,
+                                totalPages: getCategory.data?.data?.pager?.totalPages || 1,
+                                onPageChange: setPage,
+                            }}
+                            noDataMessage="هیچ دسته‌بندی یافت نشد"
                         />
                     </div>
                 </div>
-                        }
-
-
-                    </div>
-                </div>
 
                 <CreateCategory />
             </div>

src/pages/learning/components/CreateCategory.tsx

@@ -13,7 +13,6 @@ import { extractErrorMessage } from '@/config/func'
 const CreateCategory: FC = () => {
 
     // const { t } = useTranslation('global')
-    const t = (key: string) => key; // Mock translation function
     const createCategory = useCreateCategory()
     const getCategory = useGetCategory()
 
@@ -22,7 +21,7 @@ const CreateCategory: FC = () => {
             name: ''
         },
         validationSchema: Yup.object({
-            name: Yup.string().required(t('errors.required')),
+            name: Yup.string().required('این فیلد اجباری است'),
         }),
         onSubmit: (values) => {
 

src/pages/learning/hooks/useLearningData.ts

@@ -1,4 +1,5 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
+import { useQueryClient } from "@tanstack/react-query";
 import * as api from "../service/LearningService";
 import type {
   CreateCategoryLearningType,
@@ -23,6 +24,16 @@ export const useCreateCategory = () => {
   });
 };
 
+export const useDeleteCategory = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string | number) => api.deleteCategory(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["learning-category"] });
+    },
+  });
+};
+
 export const useCreateLearning = () => {
   return useMutation({
     mutationFn: (variables: CreateLearningType) =>

src/pages/learning/service/LearningService.ts

@@ -14,6 +14,11 @@ export const createCategory = async (params: CreateCategoryLearningType) => {
   return data;
 };
 
+export const deleteCategory = async (id: string | number) => {
+  const { data } = await axios.delete(`/admin/learnings/category/${id}`);
+  return data;
+};
+
 export const CreateLearning = async (params: CreateLearningType) => {
   const { data } = await axios.post(`/admin/learnings`, params);
   return data;