report problem

src/app/[name]/(Dialogs)/report/hooks/useReportData.ts

@@ -0,0 +1,8 @@
+import { useMutation } from "@tanstack/react-query";
+import * as api from "../service/ReportService";
+
+export const useCreateReport = () => {
+  return useMutation({
+    mutationFn: api.createReport,
+  });
+};

src/app/[name]/(Dialogs)/report/page.tsx

@@ -2,21 +2,51 @@
 
 import Button from '@/components/button/PrimaryButton';
 import InputField from '@/components/input/InputField';
+import { useFormik } from 'formik';
 import { ArrowLeft } from 'iconsax-react';
 import Image from 'next/image'
 import { useRouter } from 'next/navigation';
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import { CreateReportType } from './types/Types';
+import * as Yup from 'yup';
+import { useCreateReport } from './hooks/useReportData';
+import { toast } from '@/components/Toast';
+import { extractErrorMessage } from '@/lib/func';
 
 type Props = object;
 
 function ReportIndex({ }: Props) {
-    const router = useRouter();
 
+    const router = useRouter();
+    const { mutate: createReport, isPending } = useCreateReport();
     const { t } = useTranslation('parallels', {
         keyPrefix: 'Report'
     })
 
+    const formik = useFormik<CreateReportType>({
+        initialValues: {
+            subject: '',
+            content: '',
+        },
+        validationSchema: Yup.object({
+            subject: Yup.string().required('این فیلد اجباری است'),
+            content: Yup.string().required('این فیلد اجباری است'),
+        }),
+        onSubmit: (values) => {
+            createReport(values, {
+                onSuccess: () => {
+                    toast('با موفقیت ثبت شد', 'success');
+                    formik.resetForm()
+                    router.back()
+                },
+                onError: (error) => {
+                    toast(extractErrorMessage(error), 'error');
+                },
+            });
+        },
+    });
+
     return (
         <div className='h-full bg-inherit relative flex flex-col lg:gap-4'>
             <div className='grid grid-cols-3 items-center'>
@@ -31,7 +61,7 @@ function ReportIndex({ }: Props) {
             </div>
             <div className="flex lg:justify-center lg:items-center flex-1 bg-inherit">
                 <div className="w-full lg:w-fit lg:h-fit lg:min-w-3/4 lg:min-h-3/4 flex flex-col-reverse lg:grid lg:gap-8 lg:bg-container lg:grid-cols-2 lg:p-8 lg:rounded-container lg:justify-around lg:items-center bg-inherit">
-                    <form className='flex-1 bg-inherit flex flex-col justify-between items-end'>
+                    <form className='flex-1 bg-inherit flex flex-col justify-between items-end' onSubmit={formik.handleSubmit}>
                         <div className='bg-inherit lg:max-w-4/5 w-full flex flex-col justify-between flex-1'>
                             <div className="bg-inherit flex flex-col h-full">
                                 <div className='w-full px-4 mt-10'>
@@ -43,26 +73,42 @@ function ReportIndex({ }: Props) {
                                     type='text'
                                     placeholder={t('InputTitle.Placeholder')}
                                     labelText={t('InputTitle.Label')}
-                                    htmlFor='report-title'
-                                    onChange={() => { }}
+                                    htmlFor='subject'
+                                    name='subject'
+                                    value={formik.values.subject}
+                                    onChange={formik.handleChange}
+                                    onBlur={formik.handleBlur}
+                                    valid={!(formik.touched.subject && formik.errors.subject)}
+                                    aria-errormessage={formik.touched.subject && formik.errors.subject ? formik.errors.subject : undefined}
                                 />
 
                                 <div className='relative bg-inherit mt-6 flex-1'>
                                     <textarea
-                                        className='w-full px-4 py-2.5 text-sm2 leading-6 outline-0 border border-border rounded-normal h-full max-h-[200px] min-h-[50px] resize-none focus:ring-0'
+                                        className={`w-full px-4 py-2.5 text-sm2 leading-6 outline-0 border rounded-normal h-full max-h-[200px] min-h-[50px] resize-none focus:ring-0 ${formik.touched.content && formik.errors.content
+                                            ? 'border-invalid'
+                                            : 'border-border'
+                                            }`}
                                         placeholder={t('InputDescription.Placeholder')}
-                                        id='report-description'
-                                        name='report-description'
+                                        id='content'
+                                        name='content'
+                                        value={formik.values.content}
+                                        onChange={formik.handleChange}
+                                        onBlur={formik.handleBlur}
                                     ></textarea>
                                     <span className='absolute -top-2 right-2 px-2 bg-inherit text-foreground text-xs'>
                                         {t('InputDescription.Label')}
                                     </span>
+                                    {formik.touched.content && formik.errors.content && (
+                                        <span className='absolute -bottom-5 right-2 px-2 text-xs text-invalid'>
+                                            {formik.errors.content}
+                                        </span>
+                                    )}
                                 </div>
                             </div>
                             <Button
                                 className='w-full px-4 mt-6'
                                 type='submit'
-                                onClick={() => { }}
+                                disabled={isPending || !formik.isValid}
                             >
                                 {t('ButtonSubmit')}
                             </Button>

src/app/[name]/(Dialogs)/report/service/ReportService.ts

@@ -0,0 +1,7 @@
+import { api } from "@/config/axios";
+import { CreateReportType } from "../types/Types";
+
+export const createReport = async (params: CreateReportType) => {
+  const { data } = await api.post("/public/contact", params);
+  return data;
+};

src/app/[name]/(Dialogs)/report/types/Types.ts

@@ -0,0 +1,4 @@
+export type CreateReportType = {
+  subject: string;
+  content: string;
+};