faq crud

2025-09-30 11:22:15 +03:30
parent 2395890e6c
commit 3a5d38fe33
10 changed files with 538 additions and 4 deletions
@@ -0,0 +1,132 @@
+import { type FC } from 'react'
+import { useParams } from 'react-router-dom'
+import { useGetFaqDetail, useUpdateFaq } from './hooks/useSettingData'
+import { useFormik } from 'formik'
+import { type CreateFaqType } from './types/Types'
+import { FaqPageEnum } from './enum/Enum'
+import * as Yup from 'yup'
+import { useNavigate } from 'react-router-dom'
+import Input from '../../components/Input'
+import Textarea from '../../components/Textarea'
+import Select from '../../components/Select'
+import Button from '../../components/Button'
+import { TickCircle } from 'iconsax-react'
+import { toast } from 'react-toastify'
+import { extractErrorMessage } from '@/helpers/utils'
+import { Pages } from '@/config/Pages'
+import PageLoading from '../../components/PageLoading'
+import Error from '../../components/Error'
+
+const FaqUpdate: FC = () => {
+    const navigate = useNavigate()
+    const { id } = useParams<{ id: string }>()
+    const { data: faqDetail, isLoading: faqDetailLoading, error: faqDetailError } = useGetFaqDetail(id!)
+    const updateFaq = useUpdateFaq()
+
+    const formik = useFormik<CreateFaqType>({
+        initialValues: {
+            question: faqDetail?.results?.faq?.question || '',
+            answer: faqDetail?.results?.faq?.answer || '',
+            page: faqDetail?.results?.faq?.page as FaqPageEnum || FaqPageEnum.Faq,
+        },
+        enableReinitialize: true,
+        validationSchema: Yup.object({
+            question: Yup.string().required('سوال الزامی است'),
+            answer: Yup.string().required('جواب الزامی است'),
+            page: Yup.string().required('صفحه الزامی است'),
+        }),
+        onSubmit: (values) => {
+            updateFaq.mutate({ id: id!, params: values }, {
+                onSuccess: () => {
+                    toast.success('سوال متداول با موفقیت به‌روزرسانی شد')
+                    navigate(Pages.pages.faq)
+                },
+                onError: (error) => {
+                    toast.error(extractErrorMessage(error))
+                }
+            })
+        }
+    })
+
+    if (faqDetailLoading) {
+        return (
+            <div className="flex justify-center items-center min-h-[400px]">
+                <PageLoading />
+            </div>
+        )
+    }
+
+    if (faqDetailError) {
+        return (
+            <div className="flex justify-center items-center min-h-[400px]">
+                <Error errorText="خطا در بارگذاری اطلاعات سوال متداول" />
+            </div>
+        )
+    }
+
+    const pageOptions = [
+        { value: FaqPageEnum.Faq, label: 'سوالات متداول' },
+        { value: FaqPageEnum.Seller, label: 'فروشندگان' },
+        { value: FaqPageEnum.ProductTag, label: 'برچسب محصول' },
+        { value: FaqPageEnum.ProductDescription, label: 'توضیحات محصول' },
+        { value: FaqPageEnum.ProductBenefit, label: 'مزایای محصول' },
+        { value: FaqPageEnum.ShipmentProcess, label: 'فرآیند ارسال' },
+        { value: FaqPageEnum.Policy, label: 'سیاست‌ها' },
+    ]
+
+    return (
+        <div className='mt-4'>
+            <div className='flex justify-between items-center'>
+                <div className='flex items-center gap-3'>
+                    <h1>ویرایش سوال متداول</h1>
+                </div>
+                <div>
+                    <Button
+                        className='px-6'
+                        onClick={() => formik.handleSubmit()}
+                        isLoading={updateFaq.isPending}
+                        disabled={!formik.isValid || updateFaq.isPending}
+                    >
+                        <div className='flex gap-2 items-center'>
+                            <TickCircle size={16} color='#fff' />
+                            <div>به‌روزرسانی سوال متداول</div>
+                        </div>
+                    </Button>
+                </div>
+            </div>
+
+            <div className='flex gap-6 xl:mt-8 mt-6'>
+                {/* اطلاعات اصلی */}
+                <div className='flex-1 text-sm bg-white py-8 xl:px-10 px-6 rounded-3xl'>
+                    <h2 className='text-lg font-medium mb-6'>اطلاعات اصلی</h2>
+
+                    <div className='space-y-6'>
+                        <Input
+                            label='سوال'
+                            placeholder='سوال متداول را وارد کنید...'
+                            {...formik.getFieldProps('question')}
+                            error_text={formik.touched.question && formik.errors.question ? formik.errors.question : ''}
+                        />
+
+                        <Textarea
+                            label='جواب'
+                            placeholder='جواب سوال را وارد کنید...'
+                            {...formik.getFieldProps('answer')}
+                            error_text={formik.touched.answer && formik.errors.answer ? formik.errors.answer : ''}
+                        />
+
+                        <Select
+                            label='صفحه مربوطه'
+                            placeholder='انتخاب صفحه'
+                            items={pageOptions}
+                            {...formik.getFieldProps('page')}
+                            error_text={formik.touched.page && formik.errors.page ? formik.errors.page : ''}
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default FaqUpdate