hamid zarghami
113 lines
4.1 KiB
TypeScript
113 lines
4.1 KiB
TypeScript
import { Edit } from 'iconsax-react'
|
|
import { FC, useEffect, useState } from 'react'
|
|
import { useGetBlogCategoryDetail, useUpdateBlogCategory } from '../hooks/useBlogData'
|
|
import DefaulModal from '../../../components/DefaulModal'
|
|
import { useFormik } from 'formik'
|
|
import { CreateBlogCategoryType } from '../types/BlogTypes'
|
|
import Input from '../../../components/Input'
|
|
import Textarea from '../../../components/Textarea'
|
|
import UploadBox from '../../../components/UploadBox'
|
|
import { useSingleUpload } from '../../service/hooks/useServiceData'
|
|
import SwitchComponent from '../../../components/Switch'
|
|
import Button from '../../../components/Button'
|
|
import { toast } from 'react-toastify'
|
|
import { ErrorType } from '../../../helpers/types'
|
|
interface Props {
|
|
id: string
|
|
}
|
|
|
|
const UpdateCategory: FC<Props> = ({ id }) => {
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
const [file, setFile] = useState<File>()
|
|
const { data } = useGetBlogCategoryDetail(id, isOpen)
|
|
const singleUpload = useSingleUpload()
|
|
const updateBlogCategory = useUpdateBlogCategory()
|
|
|
|
const formik = useFormik<CreateBlogCategoryType>({
|
|
initialValues: {
|
|
title: '',
|
|
description: '',
|
|
iconUrl: '',
|
|
isActive: true
|
|
},
|
|
onSubmit: async (values) => {
|
|
if (file) {
|
|
const formData = new FormData()
|
|
formData.append('file', file)
|
|
await singleUpload.mutateAsync(formData, {
|
|
onSuccess: (data) => {
|
|
values.iconUrl = data.data.url
|
|
}
|
|
})
|
|
}
|
|
updateBlogCategory.mutateAsync({ id: id, params: values }, {
|
|
onSuccess: () => {
|
|
toast.success('دسته بندی با موفقیت ویرایش شد')
|
|
setIsOpen(false)
|
|
window.location.reload()
|
|
},
|
|
onError: (error: ErrorType) => {
|
|
toast.error(error.response?.data?.error.message[0])
|
|
}
|
|
})
|
|
}
|
|
})
|
|
|
|
useEffect(() => {
|
|
if (data?.data?.category) {
|
|
formik.setValues(data?.data?.category)
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [data])
|
|
|
|
return (
|
|
<div>
|
|
<Edit onClick={() => setIsOpen(true)} size={20} color='#888' />
|
|
|
|
<DefaulModal
|
|
open={isOpen}
|
|
close={() => setIsOpen(false)}
|
|
isHeader
|
|
title_header='ویرایش دسته بندی'
|
|
>
|
|
<div className='mt-8'>
|
|
<UploadBox
|
|
label='آپلود آیکون'
|
|
onChange={(file) => setFile(file[0])}
|
|
/>
|
|
<div className='mt-6'>
|
|
<Input
|
|
label='عنوان'
|
|
{...formik.getFieldProps('title')}
|
|
className='bg-white bg-opacity-25 w-full'
|
|
/>
|
|
</div>
|
|
<div className='mt-6'>
|
|
<Textarea
|
|
label='توضیحات'
|
|
{...formik.getFieldProps('description')}
|
|
className='bg-white bg-opacity-25 w-full'
|
|
/>
|
|
</div>
|
|
<div className='mt-6'>
|
|
<SwitchComponent
|
|
active={formik.values.isActive}
|
|
onChange={(value) => formik.setFieldValue('isActive', value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className='mt-10 flex justify-end'>
|
|
<Button
|
|
onClick={() => formik.handleSubmit()}
|
|
className='w-fit px-7'
|
|
label='ذخیره'
|
|
isLoading={updateBlogCategory.isPending}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</DefaulModal>
|
|
</div >
|
|
)
|
|
}
|
|
|
|
export default UpdateCategory |