feat: refactor Contact Form

martapanc · Feb 18, 2024 · 7060584 · 7060584
1 parent 911344c
commit 7060584
Showing 1 changed file with 50 additions and 50 deletions.
diff --git a/src/components/molecules/ContactForm/ContactForm.tsx b/src/components/molecules/ContactForm/ContactForm.tsx
@@ -18,11 +18,37 @@ import { TextArea } from './TextArea';
 
 const ContactForm = () => {
   const recaptchaRef = useRef<ReCAPTCHA>(null);
-  const [isVerified, setIsVerified] = useState<boolean>(false);
-
   const reCaptchaSiteKey = '6LcSyzAoAAAAAC7JTJ6gtOWW3cjTK_vKRm2WjEtC';
+  const [isVerified, setIsVerified] = useState<boolean>(false);
 
   const { theme } = useTheme();
+  const { t } = useTranslation();
+
+  useEffect(() => {}, [isVerified]);
+
+  const subjects = [
+    { key: 'dev', value: 'contacts.subjects.dev' },
+    { key: 'work', value: 'contacts.subjects.work' },
+    { key: 'recruiter', value: 'contacts.subjects.recruiter' },
+    { key: 'feedback', value: 'contacts.subjects.feedback' },
+    { key: 'problem', value: 'contacts.subjects.problem' },
+    { key: 'general', value: 'contacts.subjects.general' },
+    { key: 'other', value: 'contacts.subjects.other' },
+  ];
+
+  const validationSchema = Yup.object({
+    name: Yup.string().required(t('contacts.fields.name.required')),
+    email: Yup.string()
+      .email(t('contacts.fields.email.invalid'))
+      .required(t('contacts.fields.email.required')),
+    subject: Yup.mixed()
+      .oneOf(
+        subjects.map((subject) => t(subject.value)),
+        t('contacts.fields.subject.select'),
+      )
+      .required(t('contacts.fields.subject.required')),
+    message: Yup.string().required(t('contacts.fields.message.required')),
+  });
 
   async function handleCaptchaSubmission(token: string | null) {
     const res = await fetch('/api/recaptcha', {
@@ -39,7 +65,6 @@ const ContactForm = () => {
       setIsVerified(true);
     } else {
       setIsVerified(false);
-      showError();
       // eslint-disable-next-line no-console
       console.error(error);
     }
@@ -64,65 +89,40 @@ const ContactForm = () => {
         );
       },
       {
-        autoClose: 10000,
+        autoClose: 15000,
         type: 'error',
       },
     );
   }
 
-  useEffect(() => {}, [isVerified]);
-
-  const { t } = useTranslation();
-
-  const subjects = [
-    { key: 'dev', value: 'contacts.subjects.dev' },
-    { key: 'work', value: 'contacts.subjects.work' },
-    { key: 'recruiter', value: 'contacts.subjects.recruiter' },
-    { key: 'feedback', value: 'contacts.subjects.feedback' },
-    { key: 'problem', value: 'contacts.subjects.problem' },
-    { key: 'general', value: 'contacts.subjects.general' },
-    { key: 'other', value: 'contacts.subjects.other' },
-  ];
-
-  const validationSchema = Yup.object({
-    name: Yup.string().required(t('contacts.fields.name.required')),
-    email: Yup.string()
-      .email(t('contacts.fields.email.invalid'))
-      .required(t('contacts.fields.email.required')),
-    subject: Yup.mixed()
-      .oneOf(
-        subjects.map((subject) => t(subject.value)),
-        t('contacts.fields.subject.select'),
-      )
-      .required(t('contacts.fields.subject.required')),
-    message: Yup.string().required(t('contacts.fields.message.required')),
-  });
-
   const handleSubmit = async (
     formValues: Record<string, string>,
     setSubmitting: (arg: boolean) => void,
     resetForm: () => void,
   ) => {
-    const json = JSON.stringify(formValues, null, 2);
-
-    const res = await fetch('/api/contacts/send', {
-      body: json,
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      method: 'POST',
-    });
-
-    const { error } = await res.json();
-
-    if (error) {
+    if (isVerified) {
+      const json = JSON.stringify(formValues, null, 2);
+
+      const res = await fetch('/api/contacts/send', {
+        body: json,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        method: 'POST',
+      });
+
+      const { error } = await res.json();
+
+      if (error) {
+        showError();
+      } else {
+        showSuccess();
+      }
+    } else {
       showError();
-      setSubmitting(false);
-      return;
     }
 
     setSubmitting(false);
-    showSuccess();
     resetForm();
     recaptchaRef.current?.reset();
   };
@@ -141,7 +141,7 @@ const ContactForm = () => {
         handleSubmit(values, setSubmitting, resetForm);
       }}
     >
-      {({ isSubmitting }) => {
+      {({ isSubmitting, isValid }) => {
         return (
           <Form role='form' className='mt-4'>
             <Input
@@ -185,7 +185,7 @@ const ContactForm = () => {
             <div className='mt-2 flex justify-end'>
               <Button
                 type='submit'
-                disabled={!isVerified || isSubmitting}
+                disabled={!isValid || isSubmitting}
                 className='group'
               >
                 {isSubmitting