blog category crud

2025-04-15 14:58:17 +03:30
parent 63aecce426
commit d3031e5557
11 changed files with 350 additions and 87 deletions
@@ -0,0 +1,113 @@
+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