category learning

src/pages/learning/Category.tsx

@@ -0,0 +1,74 @@
+import { FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Td from '../../components/Td'
+import PageLoading from '../../components/PageLoading'
+import Pagination from '../../components/Pagination'
+import { useGetCategory } from './hooks/useLearningData'
+import { CategoryLearningType } from './types/LearningTypes'
+import CreateCategory from './components/CreateCategory'
+
+
+const LearningCategory: FC = () => {
+
+    const { t } = useTranslation('global')
+    const [page, setPage] = useState<number>(1)
+    const getCategory = useGetCategory()
+
+    return (
+        <div className='mt-4'>
+            <div>
+                {t('service.cateory_services')}
+            </div>
+
+            <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'>
+                                    <PageLoading />
+                                </div>
+                                :
+                                <div className='relative overflow-x-auto rounded-3xl w-full'>
+                                    <table className='w-full text-sm '>
+                                        <thead className='thead'>
+                                            <tr>
+                                                <Td text={t('service.title')} />
+                                                <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}
+                                        />
+                                    </div>
+                                </div>
+                        }
+
+
+                    </div>
+                </div>
+
+                <CreateCategory />
+            </div>
+        </div>
+    )
+}
+
+export default LearningCategory

src/pages/learning/components/CreateCategory.tsx

@@ -0,0 +1,81 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Input from '../../../components/Input'
+import Button from '../../../components/Button'
+import { TickCircle } from 'iconsax-react'
+import * as Yup from 'yup'
+import { useFormik } from 'formik'
+import { toast } from 'react-toastify'
+import { ErrorType } from '../../../helpers/types'
+import { CreateCategoryLearningType } from '../types/LearningTypes'
+import { useCreateCategory, useGetCategory } from '../hooks/useLearningData'
+
+const CreateCategory: FC = () => {
+
+    const { t } = useTranslation('global')
+    const createCategory = useCreateCategory()
+    const getCategory = useGetCategory()
+
+    const formik = useFormik<CreateCategoryLearningType>({
+        initialValues: {
+            name: ''
+        },
+        validationSchema: Yup.object({
+            name: Yup.string().required(t('errors.required')),
+        }),
+        onSubmit: (values) => {
+
+            createCategory.mutate(values, {
+                onSuccess: () => {
+                    formik.resetForm()
+                    getCategory.refetch()
+                    toast.success(t('success'))
+                },
+                onError: (error: ErrorType) => {
+                    toast.error(error?.response?.data?.error?.message[0])
+                }
+            })
+        }
+    })
+
+    return (
+        <div className='bg-white p-8 w-sidebar hidden xl:block rounded-3xl overflow-hidden relative'>
+            <div>
+                {t('service.add_category')}
+            </div>
+
+
+            <div className='mt-8'>
+                <Input
+                    label={t('service.title_category')}
+                    value={formik.values.name}
+                    name='name'
+                    onChange={formik.handleChange}
+                    error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
+                />
+            </div>
+
+
+
+
+
+            <div className='flex flex-1 justify-end items-end mt-8'>
+                <Button
+                    className='w-fit px-5'
+                    onClick={() => formik.handleSubmit()}
+                    isLoading={createCategory.isPending}
+                >
+                    <div className='flex items-center gap-2'>
+                        <TickCircle
+                            className='size-5'
+                            color='white'
+                        />
+                        <div>{t('save')}</div>
+                    </div>
+                </Button>
+            </div>
+        </div>
+    )
+}
+
+export default CreateCategory

src/pages/learning/hooks/useLearningData.ts

@@ -0,0 +1,17 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import * as api from "../service/LearningService";
+import { CreateCategoryLearningType } from "../types/LearningTypes";
+
+export const useGetCategory = () => {
+  return useQuery({
+    queryKey: ["learning-category"],
+    queryFn: api.getCategory,
+  });
+};
+
+export const useCreateCategory = () => {
+  return useMutation({
+    mutationFn: (variables: CreateCategoryLearningType) =>
+      api.createCategory(variables),
+  });
+};

src/pages/learning/service/LearningService.ts

@@ -0,0 +1,12 @@
+import axios from "../../../config/axios";
+import { CreateCategoryLearningType } from "../types/LearningTypes";
+
+export const getCategory = async () => {
+  const { data } = await axios.get(`/learnings/category`);
+  return data;
+};
+
+export const createCategory = async (params: CreateCategoryLearningType) => {
+  const { data } = await axios.post(`/learnings/category`, params);
+  return data;
+};

src/pages/learning/types/LearningTypes.ts

@@ -0,0 +1,8 @@
+export type CreateCategoryLearningType = {
+  name: string;
+};
+
+export type CategoryLearningType = {
+  id: number;
+  name: string;
+};