refactor: extract webhook submission logic into a useWebhookSubmit hook and integrate it into CommonForm and ContactForm components.

Signed-off-by: Manishnemade12 <mnemade140@gmail.com>

Author: Manishnemade12

src/components/CommonForm/events.js

@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import Button from "../../reusecore/Button";
-import axios from "axios";
+import { useWebhookSubmit } from "../../utils/hooks/useWebhookSubmit";
 import { Field, Form, Formik } from "formik";
 import CommonFormWrapper from "./commonForm.style";
 import { Container } from "../../reusecore/Layout";
@@ -12,6 +12,7 @@ const EventForm = ({ form, title, submit_title, submit_body }) => {
   const [stepNumber, setStepNumber] = useState(0);
   const [memberFormOne, setMemberFormOne] = useState({});
   const [submit, setSubmit] = useState(false);
+  const { submitForm } = useWebhookSubmit();
 
   // Form values
   const [email, setEmail] = useState("");
@@ -21,14 +22,6 @@ const EventForm = ({ form, title, submit_title, submit_body }) => {
   const [occupation, setOccupation] = useState("");
 
 
-  useEffect(() => {
-    if (submit) {
-      axios.post("https://hook.us1.make.com/nficb3d7swqkclkl467st4hp4cg65u8o", {
-        memberFormOne,
-      });
-    }
-  }, [submit]);
-
   return (
     <CommonFormWrapper>
       {
@@ -44,16 +37,21 @@ const EventForm = ({ form, title, submit_title, submit_body }) => {
         org: org,
         form: form,
       }}
-      onSubmit={values => {
-        setMemberFormOne(values);
-        setStepNumber(1);
-        setSubmit(true);
-        window.scrollTo(0,window.scrollY - 800);
-        setFirstName(values.firstname);
-        setEmail(values.email);
-        setLastName(values.lastname);
-        setOccupation(values.occupation);
-        setOrg(values.org);
+      onSubmit={async (values) => {
+        const { success } = await submitForm({ memberFormOne: values });
+        if (success) {
+          setMemberFormOne(values);
+          setStepNumber(1);
+          setSubmit(true);
+          window.scrollTo(0,window.scrollY - 800);
+          setFirstName(values.firstname);
+          setEmail(values.email);
+          setLastName(values.lastname);
+          setOccupation(values.occupation);
+          setOrg(values.org);
+        } else {
+          alert("Submission failed. Please try again.");
+        }
       }}
     >
       <Form className="form" method="post">

src/components/CommonForm/index.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, forwardRef } from "react";
 import Button from "../../reusecore/Button";
-import axios from "axios";
+import { useWebhookSubmit } from "../../utils/hooks/useWebhookSubmit";
 import { Field, Form, Formik } from "formik";
 import CommonFormWrapper from "./commonForm.style";
 import { Container } from "../../reusecore/Layout";
@@ -12,6 +12,7 @@ const CommonForm = ({ form, title, submit_title, submit_body, submit_button_titl
   const [stepNumber, setStepNumber] = useState(0);
   const [memberFormOne, setMemberFormOne] = useState({});
   const [submit, setSubmit] = useState(false);
+  const { submitForm } = useWebhookSubmit();
 
   // Form values
   // const [validateAccounts, setValidateAccounts] = useState(false);
@@ -71,14 +72,6 @@ const CommonForm = ({ form, title, submit_title, submit_body, submit_button_titl
       return true;
     }
   };
-  useEffect(() => {
-    if (submit) {
-      axios.post("https://hook.us1.make.com/nficb3d7swqkclkl467st4hp4cg65u8o", {
-        memberFormOne,
-      });
-    }
-  }, [submit, errorEmail, validateEmail, validateRole]);
-
   return (
     <CommonFormWrapper>
       {
@@ -103,14 +96,19 @@ const CommonForm = ({ form, title, submit_title, submit_body, submit_button_titl
         role: role,
         form: form,
       }}
-      onSubmit={values => {
+      onSubmit={async (values) => {
         if (isValidRole(values.role) && isValidEmail(values.email)) {
-          setMemberFormOne(values);
-          setStepNumber(1);
-          setSubmit(true);
-          // window.scrollTo(0,window.scrollY - 800);
-          // confirmationMessageRef.current.scrollIntoView({ behavior: 'smooth' })
-          scrollElementIntoView(confirmationMessageRef.current, navBarOffset);
+          const { success } = await submitForm({ memberFormOne: values });
+          if (success) {
+            setMemberFormOne(values);
+            setStepNumber(1);
+            setSubmit(true);
+            // window.scrollTo(0,window.scrollY - 800);
+            // confirmationMessageRef.current.scrollIntoView({ behavior: 'smooth' })
+            scrollElementIntoView(confirmationMessageRef.current, navBarOffset);
+          } else {
+            alert("Submission failed. Please try again.");
+          }
         } else {
           // if (!(values.google || values.github || values.twitter || values.linkedin)) {
           //   setValidateAccounts(true);

src/components/ContactForm/index.js

@@ -1,23 +1,14 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import Button from "../../reusecore/Button";
-import axios from "axios";
+import { useWebhookSubmit } from "../../utils/hooks/useWebhookSubmit";
 import { Field, Form, Formik } from "formik";
 import logo from "../../assets/images/app/layer5.svg";
 import ContactFormWrapper from "./contact-form.style";
 
 const ContactForm = () => {
   const [memberFormOne, setmemberFormOne] = useState({});
   const [submit, setSubmit] = useState(false);
-
-  useEffect(() => {
-    if (submit) {
-      // Webhook to handle all event forms and all signup forms, except for the community member form.
-      axios.post("https://hook.us1.make.com/nficb3d7swqkclkl467st4hp4cg65u8o", {
-        memberFormOne,
-      });
-      window.scrollTo(0, 700);
-    }
-  }, [submit]);
+  const { submitForm } = useWebhookSubmit();
 
   if (submit) {
     document.querySelector(".showForm").style.height = "20rem";
@@ -45,9 +36,15 @@ const ContactForm = () => {
             scope: "",
             form: "contact",
           }}
-          onSubmit={(values) => {
-            setmemberFormOne(values);
-            setSubmit(true);
+          onSubmit={async (values) => {
+            const { success } = await submitForm({ memberFormOne: values });
+            if (success) {
+              setmemberFormOne(values);
+              setSubmit(true);
+              window.scrollTo(0, 700);
+            } else {
+              alert("Submission failed. Please try again.");
+            }
           }}
         >
           <Form className="form" method="post">

src/utils/hooks/useWebhookSubmit.js

@@ -0,0 +1,23 @@
+import { useState } from 'react';
+import axios from 'axios';
+
+export const useWebhookSubmit = () => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState(null);
+
+  const submitForm = async (payload) => {
+    setIsSubmitting(true);
+    setError(null);
+    try {
+      const response = await axios.post("https://hook.us1.make.com/nficb3d7swqkclkl467st4hp4cg65u8o", payload);
+      return { success: true, data: response.data };
+    } catch (err) {
+      setError(err.message || 'An error occurred during submission.');
+      return { success: false, error: err };
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return { submitForm, isSubmitting, error };
+};