update section

src/pages/print/List.tsx

@@ -3,7 +3,7 @@ import { useGetSections } from './hooks/usePrintData'
 import { Link } from 'react-router-dom'
 import { Paths } from '@/config/Paths'
 import Button from '@/components/Button'
-import { AddSquare, More2 } from 'iconsax-react'
+import { AddSquare, Edit, More2 } from 'iconsax-react'
 import Table from '@/components/Table'
 
 const SectionList: FC = () => {
@@ -52,6 +52,24 @@ const SectionList: FC = () => {
                             )
                         }
                     },
+                    {
+                        key: 'actions',
+                        title: '',
+                        render: (item) => {
+                            return (
+                                <div className='flex gap-2 items-center'>
+                                    <Link to={Paths.print.update + item.id}>
+                                        <Edit size={20} color='#0037FF' />
+                                    </Link>
+                                    {/* <TrashWithConfrim
+                                        onDelete={() => handleDelete(item.id)}
+                                        isloading={isDeleting}
+                                        colorIcon='red'
+                                    /> */}
+                                </div>
+                            )
+                        }
+                    },
                 ]}
             />
 

src/pages/print/Update.tsx

@@ -0,0 +1,89 @@
+import Button from '@/components/Button'
+import { Edit } from 'iconsax-react'
+import { useEffect, type FC } from 'react'
+import { useGetSectionsDetail, useUpdateSection } from './hooks/usePrintData'
+import { useFormik } from 'formik'
+import type { CreateSectionType } from './types/Types'
+import * as Yup from 'yup'
+import { toast } from '@/shared/toast'
+import { useNavigate, useParams } from 'react-router-dom'
+import { extractErrorMessage } from '@/config/func'
+import Input from '@/components/Input'
+
+const UpdateSection: FC = () => {
+
+    const { id } = useParams()
+    const navigate = useNavigate()
+    const { data } = useGetSectionsDetail(+id!)
+    const { isPending, mutate } = useUpdateSection()
+
+    const formik = useFormik<CreateSectionType>({
+        initialValues: {
+            order: 1,
+            title: ''
+        },
+        validationSchema: Yup.object({
+            title: Yup.string().required('این فیلد اجباری می باشد.')
+        }),
+        onSubmit: (values) => {
+            mutate({ id: +id!, params: values }, {
+                onSuccess: () => {
+                    toast('با موفقیت ثبت شد', 'success')
+                    navigate(-1)
+                },
+                onError: (error) => {
+                    toast(extractErrorMessage(error), 'error')
+                }
+            })
+        }
+    })
+
+    useEffect(() => {
+
+        if (data?.data) {
+            formik.setValues({
+                ...data?.data
+            })
+        }
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [data])
+
+
+    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}
+                    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>
+                    <Input
+                        {...formik.getFieldProps('title')}
+                        label='عنوان'
+                        error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
+                    />
+                </div>
+                <div className='mt-6'>
+                    <Input
+                        {...formik.getFieldProps('order')}
+                        label='ترتیب'
+                    />
+                </div>
+            </div>
+
+        </div>
+    )
+}
+
+export default UpdateSection

src/pages/print/hooks/usePrintData.ts

@@ -1,5 +1,6 @@
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import * as api from "../service/PrintService";
+import type { CreateSectionType } from "../types/Types";
 
 export const useGetSections = () => {
   return useQuery({
@@ -8,8 +9,31 @@ export const useGetSections = () => {
   });
 };
 
+export const useGetSectionsDetail = (id: number) => {
+  return useQuery({
+    queryKey: ["section", id],
+    queryFn: () => api.getSectionDetail(id),
+  });
+};
+
 export const useCreateSection = () => {
   return useMutation({
     mutationFn: api.createSection,
   });
 };
+
+export const useUpdateSection = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, params }: { id: number; params: CreateSectionType }) =>
+      api.updateSection(id, params),
+    onSuccess: (_, params) => {
+      queryClient.refetchQueries({
+        queryKey: ["sections"],
+      });
+      queryClient.refetchQueries({
+        queryKey: ["section", params.id],
+      });
+    },
+  });
+};

src/pages/print/service/PrintService.ts

@@ -1,5 +1,9 @@
 import axios from "@/config/axios";
-import type { CreateSectionType, SectionsResponseType } from "../types/Types";
+import type {
+  CreateSectionType,
+  SectionDetailResponseType,
+  SectionsResponseType,
+} from "../types/Types";
 
 export const getSections = async () => {
   const { data } = await axios.get<SectionsResponseType>(`/admin/section`);
@@ -10,3 +14,15 @@ export const createSection = async (params: CreateSectionType) => {
   const { data } = await axios.post(`/admin/section`, params);
   return data;
 };
+
+export const updateSection = async (id: number, params: CreateSectionType) => {
+  const { data } = await axios.patch(`/admin/section/${id}`, params);
+  return data;
+};
+
+export const getSectionDetail = async (id: number) => {
+  const { data } = await axios.get<SectionDetailResponseType>(
+    `/admin/section/${id}`
+  );
+  return data;
+};

src/pages/print/types/Types.ts

@@ -13,3 +13,4 @@ export type SectionItemType = {
 };
 
 export type SectionsResponseType = BaseResponse<SectionItemType[]>;
+export type SectionDetailResponseType = BaseResponse<SectionItemType>;