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";
@@ -10,8 +10,7 @@ import layer5_img from "../../assets/images/layer5/layer5-only/svg/layer5-white-
 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 +20,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 +35,27 @@ 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);
+          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 +68,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,20 @@ const CommonForm = ({ form, title, submit_title, submit_body, submit_button_titl
         role: role,
         form: form,
       }}
-      onSubmit={values => {
+      onSubmit={async (values, { setStatus }) => {
         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) {
+            setStatus(null);
+            setMemberFormOne(values);
+            setStepNumber(1);
+            setSubmit(true);
+            // window.scrollTo(0,window.scrollY - 800);
+            // confirmationMessageRef.current.scrollIntoView({ behavior: 'smooth' })
+            scrollElementIntoView(confirmationMessageRef.current, navBarOffset);
+          } else {
+            setStatus({ submitError: "Submission failed. Please try again." });
+          }
         } else {
           // if (!(values.google || values.github || values.twitter || values.linkedin)) {
           //   setValidateAccounts(true);
@@ -130,7 +129,11 @@ const CommonForm = ({ form, title, submit_title, submit_body, submit_button_titl
         }
       }}
     >
-      <Form className="form" method="post">
+      {({ status }) => (
+        <Form className="form" method="post" aria-describedby="common-form-status">
+          <div id="common-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="^[\p{L}]+('[\p{L}]*)?(?:-[\p{L}]+)*([\s][\p{L}]+('[\p{L}]*)?(?:-[\p{L}]+)*){0,31}$" required />
         <label htmlFor="lastname" className="form-name">Last Name <span className="required-sign">*</span></label>
@@ -290,6 +293,7 @@ const CommonForm = ({ form, title, submit_title, submit_body, submit_button_titl
 
         <Button $secondary className="btn" title={submit_button_title || "Submit"} />
       </Form>
+      )}
     </Formik>
   </div>
       }

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,12 +36,23 @@ const ContactForm = () => {
             scope: "",
             form: "contact",
           }}
-          onSubmit={(values) => {
-            setmemberFormOne(values);
-            setSubmit(true);
+          onSubmit={async (values, { setStatus }) => {
+            const { success } = await submitForm({ memberFormOne: values });
+            if (success) {
+              setStatus(null);
+              setmemberFormOne(values);
+              setSubmit(true);
+              window.scrollTo(0, 700);
+            } else {
+              setStatus({ submitError: "Submission failed. Please try again." });
+            }
           }}
         >
-          <Form className="form" method="post">
+          {({ status }) => (
+            <Form className="form" method="post" aria-describedby="contact-form-status">
+              <div id="contact-form-status" className="form-error" role="alert" aria-live="assertive">
+                {status?.submitError || ""}
+              </div>
             <div className="title">
               <img className="layer5-logo" src={logo} alt="Layer5 Logo" />
             </div>
@@ -212,7 +214,8 @@ const ContactForm = () => {
                 />
               </div>
             </div>
-          </Form>
+            </Form>
+          )}
         </Formik>
       </div>
     </ContactFormWrapper>

src/utils/hooks/useWebhookSubmit.js

@@ -0,0 +1,60 @@
+import { useEffect, useRef, useState } from 'react';
+import axios from 'axios';
+
+export const useWebhookSubmit = () => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState(null);
+  const isMountedRef = useRef(true);
+  const requestControllerRef = useRef(null);
+
+  useEffect(() => {
+    return () => {
+      isMountedRef.current = false;
+      if (requestControllerRef.current) {
+        requestControllerRef.current.abort();
+      }
+    };
+  }, []);
+
+  const submitForm = async (payload) => {
+    const controller = new AbortController();
+    requestControllerRef.current = controller;
+
+    if (isMountedRef.current) {
+      setIsSubmitting(true);
+      setError(null);
+    }
+
+    try {
+      const response = await axios.post(
+        "https://hook.us1.make.com/nficb3d7swqkclkl467st4hp4cg65u8o",
+        payload,
+        { signal: controller.signal },
+      );
+      return { success: true, data: response.data };
+    } catch (err) {
+      const isAborted = controller.signal.aborted || err?.name === "CanceledError";
+      if (isAborted) {
+        return { success: false, error: null, errorMessage: "Request was cancelled." };
+      }
+
+      const errorMessage = (err && err.message) || 'An error occurred during submission.';
+      const errorObject = err instanceof Error ? err : new Error(errorMessage);
+      if (isMountedRef.current) {
+        setError(errorObject);
+      }
+      return { success: false, error: errorObject, errorMessage };
+    } finally {
+      if (requestControllerRef.current === controller) {
+        requestControllerRef.current = null;
+      }
+      if (isMountedRef.current) {
+        setIsSubmitting(false);
+      }
+    }
+  };
+
+  const errorMessage = error ? (error.message || 'An error occurred during submission.') : null;
+
+  return { submitForm, isSubmitting, error, errorMessage };
+};