uploader and create service

src/pages/service/AddService.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useRef } from 'react'
+import { FC, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '../../components/Input'
 import Select from '../../components/Select'
@@ -10,11 +10,23 @@ import { CreateServiceType } from './types/ServiceTypes';
 import DatePickerComponent from '../../components/DatePicker';
 import AddServiceSidebar from './components/AddServiceSidebar';
 import * as Yup from 'yup'
+import { useCreateService, useMultiUpload, useSingleUpload } from './hooks/useServiceData';
+import moment from 'moment-jalaali';
+import { ErrorType } from '../../helpers/types';
+import { toast } from 'react-toastify';
+import { useNavigate } from 'react-router-dom';
+import { Pages } from '../../config/Pages';
 
 const AddService: FC = () => {
 
+    const navigate = useNavigate()
     const { t } = useTranslation('global')
+    const singleUpload = useSingleUpload()
+    const multiUpload = useMultiUpload()
     const editorRef = useRef<HTMLDivElement | null>(null);
+    const createService = useCreateService()
+    const [iconFile, setIconFile] = useState<File>()
+    const [imagesFile, setImagesFile] = useState<File[]>()
 
     useEffect(() => {
         const quill = new Quill('#editor', {
@@ -63,12 +75,55 @@ const AddService: FC = () => {
             metaDescription: Yup.string().required(t('errors.required')),
             link: Yup.string().required(t('errors.required')),
         }),
-        onSubmit(values) {
-            console.log(values);
+        onSubmit: async (values) => {
+            if (iconFile && imagesFile) {
 
+                const formData = new FormData()
+                formData.append('file', iconFile)
+                await singleUpload.mutateAsync(formData, {
+                    onSuccess: (data) => {
+                        values.icon = data?.data?.url
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(error.response?.data?.error?.message[0])
+                    }
+                })
+
+                const images = new FormData()
+                imagesFile.forEach(file => {
+                    images.append('files', file)
+                })
+                await multiUpload.mutateAsync(images, {
+                    onSuccess: async (data) => {
+                        values.images = await data.data.map((item: { url: string }) => item?.url)
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(error.response?.data?.error?.message[0])
+                    }
+                })
+
+                const params = {
+                    ...values,
+                    userCount: +values.userCount,
+                    createDate: moment(values.createDate).format('YYYY-MM-DD'),
+                }
+                createService.mutate(params, {
+                    onSuccess: () => {
+                        formik.resetForm()
+                        toast.success(t('success'))
+                        navigate(Pages.services.list)
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(error.response?.data?.error?.message[0])
+                    }
+                })
+            } else {
+                toast.error(t('errors.upload_image'))
+            }
         },
     })
 
+
     return (
         <div className='w-full mt-4'>
             <div className='flex w-full justify-between items-center'>
@@ -79,6 +134,7 @@ const AddService: FC = () => {
                     <Button
                         className='px-5'
                         onClick={() => formik.handleSubmit()}
+                        isLoading={createService.isPending || singleUpload.isPending || multiUpload.isPending}
                     >
                         <div className='flex gap-2'>
                             <TickCircle
@@ -101,13 +157,21 @@ const AddService: FC = () => {
                             onChange={formik.handleChange}
                             error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
                         />
-                        <div className='mt-8'>
+                        <div className='mt-8 rowTwoInput'>
                             <Input
                                 label={t('service.description_short')}
                                 name='description'
                                 onChange={formik.handleChange}
                                 error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
                             />
+
+                            <Input
+                                label={t('service.software_langauge')}
+                                name='softwareLanguage'
+                                onChange={formik.handleChange}
+                                error_text={formik.touched.softwareLanguage && formik.errors.softwareLanguage ? formik.errors.softwareLanguage : ''}
+                            />
+
                         </div>
 
                         <div className='mt-8 rowTwoInput'>
@@ -139,8 +203,12 @@ const AddService: FC = () => {
                                 items={[
                                     {
                                         label: 'فارسی',
-                                        value: ''
-                                    }
+                                        value: 'fa'
+                                    },
+                                    {
+                                        label: 'انگلیسی',
+                                        value: 'en'
+                                    },
                                 ]}
                                 placeholder={t('select')}
                                 name='serviceLanguage'
@@ -157,6 +225,8 @@ const AddService: FC = () => {
 
                 <AddServiceSidebar
                     formik={formik}
+                    onChangeIconFile={(file: File) => setIconFile(file)}
+                    onChangeImagesFile={(file: File[]) => setImagesFile(file)}
                 />
             </div>
         </div>