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>

src/pages/service/List.tsx

@@ -20,17 +20,19 @@ const ListService: FC = () => {
                     {t('service.list_service')}
                 </div>
                 <div>
-                    <Button
-                        className='px-5'
-                    >
-                        <div className='flex gap-2'>
-                            <Add
-                                className='size-5'
-                                color='#fff'
-                            />
-                            <div>{t('service.submit_service')}</div>
-                        </div>
-                    </Button>
+                    <Link to={Pages.services.add}>
+                        <Button
+                            className='px-5'
+                        >
+                            <div className='flex gap-2'>
+                                <Add
+                                    className='size-5'
+                                    color='#fff'
+                                />
+                                <div>{t('service.submit_service')}</div>
+                            </div>
+                        </Button>
+                    </Link>
                 </div>
             </div>
 

src/pages/service/components/AddServiceSidebar.tsx

@@ -9,7 +9,9 @@ import { CreateServiceType, ServiceCategoryType } from '../types/ServiceTypes'
 import { useGetCategoryParents } from '../hooks/useServiceData'
 
 type Props = {
-    formik: FormikProps<CreateServiceType>
+    formik: FormikProps<CreateServiceType>,
+    onChangeIconFile: (file: File) => void,
+    onChangeImagesFile: (file: File[]) => void
 }
 
 const AddServiceSidebar: FC<Props> = (props: Props) => {
@@ -76,7 +78,7 @@ const AddServiceSidebar: FC<Props> = (props: Props) => {
                 <div className='mt-2'>
                     <UploadBoxDraggble
                         label={t('service.upload_icon_service')}
-                        onChange={() => null}
+                        onChange={(file: File[]) => props.onChangeIconFile(file[0])}
                     />
                 </div>
             </div>
@@ -85,7 +87,8 @@ const AddServiceSidebar: FC<Props> = (props: Props) => {
                 <div className='mt-2'>
                     <UploadBoxDraggble
                         label={t('service.upload_images_service')}
-                        onChange={() => null}
+                        onChange={props.onChangeImagesFile}
+                        isMultiple
                     />
                 </div>
             </div>

src/pages/service/hooks/useServiceData.ts

@@ -2,6 +2,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import * as api from "../service/ServiceService";
 import {
   CreateServiceCategoryType,
+  CreateServiceType,
   ToggleStatusCategoryType,
 } from "../types/ServiceTypes";
 
@@ -42,3 +43,20 @@ export const useChangeStatusCategory = () => {
       api.changeStatusCategory(variables),
   });
 };
+
+export const useCreateService = () => {
+  return useMutation({
+    mutationFn: (variables: CreateServiceType) => api.createService(variables),
+  });
+};
+
+export const useSingleUpload = () => {
+  return useMutation({
+    mutationFn: (variables: FormData) => api.uploadSingle(variables),
+  });
+};
+export const useMultiUpload = () => {
+  return useMutation({
+    mutationFn: (variables: FormData) => api.uploadMultiple(variables),
+  });
+};

src/pages/service/service/ServiceService.ts

@@ -1,6 +1,7 @@
 import axios from "../../../config/axios";
 import {
   CreateServiceCategoryType,
+  CreateServiceType,
   ToggleStatusCategoryType,
 } from "../types/ServiceTypes";
 
@@ -37,3 +38,18 @@ export const changeStatusCategory = async (
   );
   return data;
 };
+
+export const createService = async (params: CreateServiceType) => {
+  const { data } = await axios.post(`/services`, params);
+  return data;
+};
+
+export const uploadSingle = async (params: FormData) => {
+  const { data } = await axios.post(`/uploader/single-file`, params);
+  return data;
+};
+
+export const uploadMultiple = async (params: FormData) => {
+  const { data } = await axios.post(`/uploader/multi-file`, params);
+  return data;
+};