create section

.env

@@ -1,3 +1,3 @@
-VITE_API_BASE_URL = 'http://192.168.99.220:4000'
+VITE_API_BASE_URL = 'http://10.24.161.1:4000'
 VITE_TOKEN_NAME = 'negareh_at'
 VITE_REFRESH_TOKEN_NAME = 'negareh_art'

src/config/Paths.tsx

@@ -75,6 +75,7 @@ export const Paths = {
         category: "/learning/category",
     },
     print: {
-        list: '/print/list'
+        list: '/print/list',
+        create: '/print/create',
     }
 }

src/pages/print/Create.tsx

@@ -0,0 +1,75 @@
+import Button from '@/components/Button'
+import { AddSquare } from 'iconsax-react'
+import { type FC } from 'react'
+import { useCreateSection } 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 } from 'react-router-dom'
+import { extractErrorMessage } from '@/config/func'
+import Input from '@/components/Input'
+
+const CreateSection: FC = () => {
+
+    const navigate = useNavigate()
+    const { isPending, mutate } = useCreateSection()
+
+    const formik = useFormik<CreateSectionType>({
+        initialValues: {
+            order: 1,
+            title: ''
+        },
+        validationSchema: Yup.object({
+            title: Yup.string().required('این فیلد اجباری می باشد.')
+        }),
+        onSubmit: (values) => {
+            mutate(values, {
+                onSuccess: () => {
+                    toast('با موفقیت ثبت شد', 'success')
+                    navigate(-1)
+                },
+                onError: (error) => {
+                    toast(extractErrorMessage(error), 'error')
+                }
+            })
+        }
+    })
+
+    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'>
+                        <AddSquare 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 CreateSection

src/pages/print/List.tsx

@@ -12,17 +12,17 @@ const SectionList: FC = () => {
     return (
         <div className='mt-5'>
             <div className='flex justify-between items-center'>
-                <h1 className='text-lg font-light'>محصولات</h1>
+                <h1 className='text-lg font-light'>بخش</h1>
 
                 <Link
-                    to={Paths.print.list}
+                    to={Paths.print.create}
                 >
                     <Button
                         className='w-fit px-6'
                     >
                         <div className='flex gap-1.5'>
                             <AddSquare size={18} color='black' />
-                            <div className='text-[13px] font-light'>محصول جدید</div>
+                            <div className='text-[13px] font-light'>بخش جدید</div>
                         </div>
                     </Button>
                 </Link>

src/pages/print/hooks/usePrintData.ts

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import * as api from "../service/PrintService";
 
 export const useGetSections = () => {
@@ -7,3 +7,9 @@ export const useGetSections = () => {
     queryFn: api.getSections,
   });
 };
+
+export const useCreateSection = () => {
+  return useMutation({
+    mutationFn: api.createSection,
+  });
+};

src/pages/print/service/PrintService.ts

@@ -1,6 +1,12 @@
 import axios from "@/config/axios";
+import type { CreateSectionType } from "../types/Types";
 
 export const getSections = async () => {
   const { data } = await axios.get(`/admin/section`);
   return data;
 };
+
+export const createSection = async (params: CreateSectionType) => {
+  const { data } = await axios.post(`/admin/section`, params);
+  return data;
+};

src/pages/print/types/Types.ts

@@ -0,0 +1,4 @@
+export type CreateSectionType = {
+  title: string;
+  order: number;
+};

src/router/MainRouter.tsx

@@ -41,6 +41,7 @@ import OrderDetail from '@/pages/order/OrderDetail'
 import NewOrder from '@/pages/order/NewOrder'
 import EditOrder from '@/pages/order/EditOrder'
 import SectionList from '@/pages/print/List'
+import CreateSection from '@/pages/print/Create'
 
 const MainRouter: FC = () => {
     return (
@@ -80,6 +81,7 @@ const MainRouter: FC = () => {
                             <Route path={Paths.order.edit + ':id'} element={<EditOrder />} />
 
                             <Route path={Paths.print.list} element={<SectionList />} />
+                            <Route path={Paths.print.create} element={<CreateSection />} />
 
                             <Route path={Paths.features.list} element={<FeaturesList />} />
                             <Route path={Paths.features.create} element={<CreateFeature />} />