cat

src/pages/product/category/Create.tsx

@@ -27,10 +27,12 @@ const ProductCategory: FC = () => {
     const [file, setFile] = useState<File>()
 
     const handleSave = (values: CreateCategoryType) => {
-        if (values.parentId) {
+        const payload: CreateCategoryType = {
-            values.parentId = Number(values.parentId)
+            ...values,
+            parentId: values.parentId || undefined,
         }
-        mutate(values, {
+
+        mutate(payload, {
             onSuccess: () => {
                 toast.success('با موفقیت ذخیره شد')
                 navigate(Paths.product.category.list)
@@ -111,6 +113,7 @@ const ProductCategory: FC = () => {
                         }) || []}
                         onChange={formik.handleChange}
                         name='parentId'
+                        value={formik.values.parentId || ''}
                     />
                 </div>
 

src/pages/product/category/List.tsx

@@ -1,4 +1,4 @@
-import { type FC } from 'react'
+import { type FC, useMemo } from 'react'
 import { useDeleteCategory, useGetCategory } from '../hooks/useProductData'
 import Table from '@/components/Table'
 import type { ColumnType, RowDataType } from '@/components/types/TableTypes'
@@ -16,6 +16,7 @@ const CategoryList: FC = () => {
 
     const { data, refetch } = useGetCategory()
     const { mutate, isPending } = useDeleteCategory()
+    const categories = (data?.data ?? []) as (CategoryType & RowDataType)[]
 
     const handleDelete = (id: string) => {
         mutate(id, {
@@ -28,40 +29,35 @@ const CategoryList: FC = () => {
         })
     }
 
-    const column: ColumnType<CategoryType>[] = [
+    const columns = useMemo<ColumnType<CategoryType>[]>(() => [
         {
             title: 'تصویر',
             key: 'avatarUrl',
-            render: (item) => {
+            render: (item) => item.avatarUrl ? <img src={item.avatarUrl} className='w-14' alt={item.title} /> : '-'
-                if (item.avatarUrl) {
-                    return (
-                        <img src={item.avatarUrl} className='w-14' />
-                    )
-                }
-            }
         },
         {
             title: 'عنوان',
             key: 'title',
         },
         {
-            title: 'تعداد زیر درسته',
+            title: 'والد',
+            key: 'parent',
+            render: (item) => item.parent?.title || '-',
+        },
+        {
+            title: 'تعداد زیر دسته',
             key: 'children',
-            render: (item) => {
+            render: (item) => <div>{item.children?.length || 0}</div>
-                return (
-                    <div>{item.children?.length}</div>
-                )
-            }
         },
         {
             title: 'اولویت',
-            key: 'order'
+            key: 'order',
+            render: (item) => item.order ?? '-',
         },
         {
             title: '',
             key: 'action',
-            render: (item) => {
+            render: (item) => (
-                return (
                 <div className='flex items-center gap-2'>
                     <Link to={Paths.product.category.update + item.id}>
                         <Edit
@@ -73,12 +69,10 @@ const CategoryList: FC = () => {
                         onDelete={() => handleDelete(item.id + '')}
                         isloading={isPending}
                     />
-
                 </div>
             )
         }
-        }
+    ], [isPending])
-    ]
 
     return (
         <div className='mt-5'>
@@ -100,8 +94,8 @@ const CategoryList: FC = () => {
 
             <div className='mt-8'>
             <Table<CategoryType & RowDataType>
-                columns={column}
+                columns={columns}
-                data={data?.data || [] as (CategoryType & RowDataType)[]}
+                data={categories}
             />
             </div>
 

src/pages/product/category/Update.tsx

@@ -12,10 +12,13 @@ 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'
+import { useNavigate, useParams } from 'react-router-dom'
+import { Paths } from '@/config/Paths'
+import BackButton from '@/components/BackButton'
 
 const UpdateCategory: FC = () => {
 
+    const navigate = useNavigate()
     const { id } = useParams()
     const { data } = useGetCategory()
     const { data: dataDetail } = useGetCategoryDetail(id!)
@@ -26,12 +29,15 @@ const UpdateCategory: FC = () => {
     const [file, setFile] = useState<File>()
 
     const handleSave = (values: CreateCategoryType) => {
-        if (values.parentId) {
+        const payload: CreateCategoryType = {
-            values.parentId = Number(values.parentId)
+            ...values,
+            parentId: values.parentId || undefined,
         }
-        mutate({ id: id!, params: values }, {
+
+        mutate({ id: id!, params: payload }, {
             onSuccess: () => {
                 toast.success('با موفقیت ذخیره شد')
+                navigate(Paths.product.category.list)
             },
             onError: (error) => {
                 toast.error(extractErrorMessage(error))
@@ -69,7 +75,7 @@ const UpdateCategory: FC = () => {
         if (dataDetail?.data) {
             formik.setValues({
                 title: dataDetail?.data?.title,
-                parentId: Number(dataDetail?.data?.parent?.id) || undefined,
+                parentId: dataDetail?.data?.parent?.id || undefined,
                 isActive: dataDetail?.data?.isActive,
                 order: Number(dataDetail?.data?.order),
                 avatarUrl: dataDetail?.data?.avatarUrl || undefined
@@ -83,8 +89,10 @@ const UpdateCategory: FC = () => {
     return (
         <div className='mt-5'>
             <div className='flex justify-between items-center'>
-
+                <div className='flex items-center gap-4'>
+                    <BackButton to={Paths.product.category.list} />
                     <h1 className='text-lg font-light'>ویرایش دسته</h1>
+                </div>
                 <Button
                     className='w-fit px-6'
                     isLoading={isPending || isUploading}
@@ -123,6 +131,7 @@ const UpdateCategory: FC = () => {
                         }) || []}
                         onChange={formik.handleChange}
                         name='parentId'
+                        value={formik.values.parentId || ''}
                     />
                 </div>
 

src/pages/product/types/Types.ts

@@ -20,7 +20,7 @@ export type CategoryResponse = BaseResponse<CategoryType>;
 
 export type CreateCategoryType = {
     title: string,
-    parentId?: number,
+    parentId?: string,
     isActive: boolean,
     avatarUrl?: string,
     order: number,