update category

src/config/Paths.tsx

@@ -8,6 +8,7 @@ export const Paths = {
         category: {
             create: '/product/category/create',
             list: '/product/category/list',
+            update: '/product/category/update/'
         }
     },
     order: {

src/pages/product/category/Create.tsx

@@ -23,6 +23,9 @@ const ProductCategory: FC = () => {
     const [file, setFile] = useState<File>()
 
     const handleSave = (values: CreateCategoryType) => {
+        if (values.parentId) {
+            values.parentId = Number(values.parentId)
+        }
         mutate(values, {
             onSuccess: () => {
                 toast.success('با موفقیت ذخیره شد')

src/pages/product/category/List.tsx

@@ -7,6 +7,8 @@ import { Edit } from 'iconsax-react'
 import TrashWithConfrim from '@/components/TrashWithConfrim'
 import { toast } from 'react-toastify'
 import { extractErrorMessage } from '@/config/func'
+import { Link } from 'react-router-dom'
+import { Paths } from '@/config/Paths'
 
 const CategoryList: FC = () => {
 
@@ -59,11 +61,12 @@ const CategoryList: FC = () => {
             render: (item) => {
                 return (
                     <div className='flex items-center gap-2'>
+                        <Link to={Paths.product.category.update + item.id}>
                             <Edit
                                 size={20}
                                 color='#8C90A3'
                             />
-
+                        </Link>
                         <TrashWithConfrim
                             onDelete={() => handleDelete(item.id)}
                             isloading={isPending}

src/pages/product/category/Update.tsx

@@ -0,0 +1,147 @@
+import Input from '@/components/Input'
+import { useFormik } from 'formik'
+import { useEffect, useState, type FC } from 'react'
+import type { CreateCategoryType } from '../types/Types'
+import * as Yup from 'yup'
+import { useGetCategory, useGetCategoryDetail, useUpdateCategory } from '../hooks/useProductData'
+import Select from '@/components/Select'
+import Button from '@/components/Button'
+import { Edit } from 'iconsax-react'
+import UploadBox from '@/components/UploadBox'
+import SwitchComponent from '@/components/Switch'
+import { useSingleUpload } from '@/pages/uploader/hooks/useUploader'
+import { toast } from 'react-toastify'
+import { extractErrorMessage } from '@/config/func'
+import { useParams } from 'react-router-dom'
+
+const UpdateCategory: FC = () => {
+
+    const { id } = useParams()
+    const { data } = useGetCategory()
+    const { data: dataDetail } = useGetCategoryDetail(id!)
+    const { mutate, isPending } = useUpdateCategory()
+    const { mutate: upload, isPending: isUploading } = useSingleUpload()
+
+
+    const [file, setFile] = useState<File>()
+
+    const handleSave = (values: CreateCategoryType) => {
+        if (values.parentId) {
+            values.parentId = Number(values.parentId)
+        }
+        mutate({ id: id!, params: values }, {
+            onSuccess: () => {
+                toast.success('با موفقیت ذخیره شد')
+            },
+            onError: (error) => {
+                toast.error(extractErrorMessage(error))
+            }
+        })
+    }
+
+    const formik = useFormik<CreateCategoryType>({
+        initialValues: {
+            title: '',
+            parentId: undefined,
+            order: 0,
+            isActive: true,
+            avatarUrl: undefined,
+        },
+        validationSchema: Yup.object({
+            title: Yup.string().required('این فیلد اجباری است.'),
+        }),
+        onSubmit: (values) => {
+            if (file) {
+                upload(file, {
+                    onSuccess: (data) => {
+                        values.avatarUrl = data?.data?.url
+                        handleSave(values)
+                    }
+                })
+            } else {
+                handleSave(values)
+            }
+        }
+    })
+
+    useEffect(() => {
+
+        if (dataDetail?.data) {
+            formik.setValues({
+                title: dataDetail?.data?.title,
+                parentId: Number(dataDetail?.data?.parent?.id) || undefined,
+                isActive: dataDetail?.data?.isActive,
+                order: Number(dataDetail?.data?.order),
+                avatarUrl: dataDetail?.data?.avatarUrl || undefined
+            })
+        }
+
+    }, [dataDetail])
+
+
+    return (
+        <div className='mt-5'>
+            <div className='flex justify-between items-center'>
+
+                <h1 className='text-lg font-light'>ویرایش دسته</h1>
+                <Button
+                    className='w-fit px-6'
+                    isLoading={isPending || isUploading}
+                    onClick={() => formik.handleSubmit()}
+                >
+                    <div className='flex gap-1.5'>
+                        <Edit size={18} color='black' />
+                        <div className='text-[13px] font-light'>ویرایش دسته</div>
+                    </div>
+                </Button>
+            </div>
+            <div className='mt-8 bg-white p-6 rounded-3xl '>
+
+                <div>
+                    <UploadBox
+                        label='تصویر دسته (اختیاری)'
+                        onChange={(files) => setFile(files[0])}
+                    />
+                </div>
+
+                <div className='rowTwoInput mt-6'>
+                    <Input
+                        label='عنوان'
+                        {...formik.getFieldProps('title')}
+                        error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
+                    />
+
+                    <Select
+                        label='انتخاب والد درسته'
+                        placeholder='اختیاری'
+                        items={data?.data?.map((item) => {
+                            return {
+                                label: item.title,
+                                value: item.id
+                            }
+                        }) || []}
+                        onChange={formik.handleChange}
+                        name='parentId'
+                    />
+                </div>
+
+                <div className='mt-6'>
+                    <Input
+                        label='ترتیب اولویت'
+                        {...formik.getFieldProps('order')}
+                        type='number'
+                    />
+                </div>
+
+                <div className='mt-6'>
+                    <SwitchComponent
+                        active={formik.values.isActive}
+                        onChange={(value) => formik.setFieldValue('isActive', value)}
+                    />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default UpdateCategory

src/pages/product/hooks/useProductData.ts

@@ -1,5 +1,6 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import * as api from "../service/ProductService";
+import type { CreateCategoryType } from "../types/Types";
 
 export const useGetCategory = () => {
   return useQuery({
@@ -19,3 +20,18 @@ export const useDeleteCategory = () => {
     mutationFn: (id: string) => api.deleteCategory(id),
   });
 };
+
+export const useUpdateCategory = () => {
+  return useMutation({
+    mutationFn: ({ id, params }: { id: string; params: CreateCategoryType }) =>
+      api.updateCategory(id, params),
+  });
+};
+
+export const useGetCategoryDetail = (id: string) => {
+  return useQuery({
+    queryKey: ["category", id],
+    queryFn: () => api.getCategoryDetail(id),
+    enabled: !!id,
+  });
+};

src/pages/product/service/ProductService.ts

@@ -1,5 +1,5 @@
 import axios from "@/config/axios";
-import { type CategoriesResponse, type CreateCategoryType } from "../types/Types";
+import { type CategoriesResponse, type CategoryResponse, type CreateCategoryType } from "../types/Types";
 
 export const getCategory = async () => {
   const { data } = await axios.get<CategoriesResponse>("/admin/category");
@@ -11,7 +11,17 @@ export const createCategory = async (params:CreateCategoryType) => {
   return data;
 };
 
+export const updateCategory = async (id:string, params:CreateCategoryType) => {
+  const { data } = await axios.patch(`/admin/category/${id}`, params);
+  return data;
+};
+
 export const deleteCategory = async(id:string) => {
   const { data } = await axios.delete(`/admin/category/${id}`)
   return data
 }
+
+export const getCategoryDetail = async(id:string) => {
+  const { data } = await axios.get<CategoryResponse>(`/admin/category/${id}`)
+  return data
+}

src/pages/product/types/Types.ts

@@ -14,10 +14,11 @@ export interface CategoryType extends RowDataType {
 }
 
 export type CategoriesResponse = BaseResponse<CategoryType[]>;
+export type CategoryResponse = BaseResponse<CategoryType>;
 
 export type CreateCategoryType = {
     title: string,
-    parentId?: string,
+    parentId?: number,
     isActive: boolean,
     avatarUrl?: string,
     order: number,

src/router/MainRouter.tsx

@@ -27,6 +27,7 @@ import LearningCreate from '@/pages/learning/Create'
 import LearningCategory from '@/pages/learning/Category'
 import CategoryList from '@/pages/product/category/List'
 import CreateCategory from '@/pages/product/category/Create'
+import UpdateCategory from '@/pages/product/category/Update'
 
 const MainRouter: FC = () => {
     return (
@@ -48,6 +49,7 @@ const MainRouter: FC = () => {
                             <Route path={Paths.product.create} element={<CreateProduct />} />
                             <Route path={Paths.product.category.list} element={<CategoryList />} />
                             <Route path={Paths.product.category.create} element={<CreateCategory />} />
+                            <Route path={Paths.product.category.update + ':id'} element={<UpdateCategory />} />
 
                             <Route path={Paths.order.list} element={<OrdersList />} />
                             <Route path={Paths.features.list} element={<FeaturesList />} />