refactor: extract webhook submission logic into a useWebhookSubmit

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,19 +37,28 @@ 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, { setStatus }) => {
+        const { success } = await submitForm({ memberFormOne: values });
+        if (success) {
+          setStatus(null);
+          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 {
+          setStatus({ submitError: "Submission failed. Please try again." });
+        }
       }}
     >
-      <Form className="form" method="post">
+      {({ status }) => (
+        <Form className="form" method="post" aria-describedby="event-form-status">
+          <div id="event-form-status" className="form-error" role="alert" aria-live="assertive">
+            {status?.submitError || ""}
+          </div>
         <label htmlFor="firstname" className="form-name">First Name <span className="required-sign">*</span></label>
         <Field type="text" className="text-field" id="firstname" name="firstname" maxLength="32" pattern="[A-Za-z]{1,32}" required />
         <label htmlFor="lastname" className="form-name">Last Name <span className="required-sign">*</span></label>
@@ -69,7 +71,8 @@ const EventForm = ({ form, title, submit_title, submit_body }) => {
         <Field type="text" className="text-field" id="org" name="org" />
 
         <Button $secondary className="btn" title="Submit" />
-      </Form>
+        </Form>
+      )}
     </Formik>
   </div>
       }

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,27 @@
+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) {
+      const errorMessage = (err && err.message) || 'An error occurred during submission.';
+      const errorObject = err instanceof Error ? err : new Error(errorMessage);
+      setError(errorObject);
+      return { success: false, error: errorObject, errorMessage };
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const errorMessage = error ? (error.message || 'An error occurred during submission.') : null;
+
+  return { submitForm, isSubmitting, error, errorMessage };
+};