diff --git a/src/pages/brand/Update.tsx b/src/pages/brand/Update.tsx new file mode 100644 index 0000000..40ba1bb --- /dev/null +++ b/src/pages/brand/Update.tsx @@ -0,0 +1,188 @@ +import { type FC, useState, useEffect } from 'react' +import { useParams, useNavigate } from 'react-router-dom' +import { useGetCategories, type CategoryTreeNode } from '../category' +import { useFormik } from 'formik' +import { type CreateBrandType } from './types/Types' +import * as Yup from 'yup' +import { useUpdateBrand, useGetBrandById } from './hooks/useBrandData' +import Input from '../../components/Input' +import Select from '../../components/Select' +import Textarea from '../../components/Textarea' +import Button from '../../components/Button' +import { TickCircle } from 'iconsax-react' +import { useUploadMultiple, useUploadSingle } from '../uploader/hooks/useUploaderData' +import UploadBoxDraggble from '@/components/UploadBoxDraggble' +import { toast } from 'react-toastify' +import { extractErrorMessage } from '@/helpers/utils' + +const UpdateBrand: FC = () => { + const navigate = useNavigate() + const { id } = useParams<{ id: string }>() + const { data: categoriesData } = useGetCategories() + const { data: brandDetail, isLoading: brandDetailLoading } = useGetBrandById(id!) + const uploadSingle = useUploadSingle() + const uploadMultiple = useUploadMultiple() + const updateBrandMutation = useUpdateBrand() + + const [logoFile, setLogoFile] = useState([]) + const [imageFiles, setImageFiles] = useState([]) + + const formik = useFormik({ + initialValues: { + title_fa: '', + title_en: '', + category: '', + description: '', + images: [], + logoUrl: '', + }, + validationSchema: Yup.object({ + title_fa: Yup.string().required('عنوان فارسی برند الزامی است'), + title_en: Yup.string().required('عنوان انگلیسی برند الزامی است'), + category: Yup.string().required('دسته بندی برند الزامی است'), + description: Yup.string().required('توضیحات برند الزامی است'), + }), + onSubmit: async (values) => { + let logoUrl = values.logoUrl + let images = values.images + + if (logoFile.length > 0) { + const logoResponse = await uploadSingle.mutateAsync(logoFile[0]) + logoUrl = logoResponse.results?.url?.url || '' + } + + if (imageFiles.length > 0) { + const imagesResponse = await uploadMultiple.mutateAsync(imageFiles) + images = imagesResponse.results?.urls?.map(file => file.url) || [] + } + + const submitData = { + ...values, + logoUrl, + images + } + + updateBrandMutation.mutate({ id: id!, params: submitData }, { + onSuccess: () => { + toast.success('برند با موفقیت ویرایش شد') + navigate('/brands') + }, + onError: (error) => { + toast.error(extractErrorMessage(error)) + } + }) + }, + }) + + useEffect(() => { + if (brandDetail?.results?.data?.brand) { + const brand = brandDetail.results.data.brand + formik.setValues({ + title_fa: brand.title_fa, + title_en: brand.title_en, + category: brand.category?._id || '', + description: brand.description, + images: brand.images, + logoUrl: brand.logoUrl, + }) + } + }, [brandDetail, formik]) + + const categoryOptions = categoriesData?.results?.data?.map((category: CategoryTreeNode) => ({ + value: category._id, + label: category.title_fa + })) || [] + + if (brandDetailLoading) { + return
در حال بارگذاری...
+ } + + return ( +
+
+
+

ویرایش برند

+
+
+ +
+
+ +
+ {/* اطلاعات اصلی */} +
+

اطلاعات اصلی

+ +
+
+ + +
+ +