refactor: extract webhook submission logic into a `useWebhookSubmit` by Manishnemade12 · Pull Request #7537 · layer5io/layer5

Manishnemade12 · 2026-03-22T06:40:42Z

Description

This PR fixes #7536

This PR abstracts and centralizes the duplicated webhook submission logic by introducing a custom useWebhookSubmit hook. It integrates this new hook into the CommonForm (index.js and events.js) and ContactForm (index.js) components. Previously, these forms used an unhandled axios.post inside a useEffect triggered by a state flag, which risked silent data loss on network failure. By awaiting the network requests directly inside the Formik onSubmit handlers, we ensure the UI transitions to the "Thank You" screen only upon a confirmed HTTP success.

Notes for Reviewers

The new hook is located at src/utils/hooks/useWebhookSubmit.js.
This change affects /contact, /community/events, and other form pages.
To test locally: Submit a form and verify it proceeds to the success step. If you drop your network connection before submitting, it will correctly alert you of the failure and retain your form state instead of showing a false success.

Signed commits

Yes, I signed my commits.

Copilot

Pull request overview

This PR centralizes webhook submission logic into a new useWebhookSubmit hook and updates existing forms to await submissions in Formik’s onSubmit, preventing false-positive “success” UI transitions when requests fail.

Changes:

Added useWebhookSubmit hook to encapsulate axios submission state + error handling.
Refactored CommonForm, EventForm, and ContactForm to submit via the hook inside onSubmit (removing prior useEffect-triggered posts).
Added basic failure handling (alerts) and kept success scrolling behavior within the submit flow.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 7 comments.

File	Description
src/utils/hooks/useWebhookSubmit.js	Introduces a reusable hook to submit payloads to the Make.com webhook and track submission/error state.
src/components/ContactForm/index.js	Switches to awaiting webhook submission in `onSubmit` and only transitions UI on success.
src/components/CommonForm/index.js	Replaces `useEffect`-based post with awaited submit and gates success step on confirmed submission.
src/components/CommonForm/events.js	Refactors event form submission to use the hook and handle failure explicitly.

src/utils/hooks/useWebhookSubmit.js

src/components/ContactForm/index.js

src/components/CommonForm/index.js

src/components/CommonForm/events.js

…hook and integrate it into CommonForm and ContactForm components. Signed-off-by: Manishnemade12 <mnemade140@gmail.com>

l5io · 2026-03-22T07:00:36Z

🚀 Preview for commit 709d5f4 at: https://69bf9360215bccffd0afcbeb--layer5.netlify.app

l5io · 2026-03-22T08:31:27Z

🚀 Preview for commit c17fb1c at: https://69bfa8b06f2ab006b9de4b89--layer5.netlify.app

l5io · 2026-03-24T02:42:16Z

🚀 Preview for commit aeb3e68 at: https://69c1f9b6c87786311b23e0c6--layer5.netlify.app

Manishnemade12 · 2026-03-24T04:05:17Z

@CodexRaunak can you please review this pr

l5io · 2026-03-24T06:36:11Z

🚀 Preview for commit b1f5d72 at: https://69c230ab39fb22adc0c2d56b--layer5.netlify.app

Manishnemade12 · 2026-03-25T08:56:31Z

@saurabhraghuvanshii can you please review this pr

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: Manish Nemade <166635137+Manishnemade12@users.noreply.github.com>

l5io · 2026-03-25T09:19:42Z

🚀 Preview for commit 9dede11 at: https://69c3a8772f6d231371e28811--layer5.netlify.app

l5io · 2026-03-25T13:00:20Z

🚀 Preview for commit bff7508 at: https://69c3dc33a1de532588f1acdb--layer5.netlify.app

Manishnemade12 · 2026-03-26T05:59:16Z

@saurabhraghuvanshii can you please review this pr

l5io · 2026-03-26T06:15:33Z

🚀 Preview for commit 96f097d at: https://69c4cecb8748eee6140f5f36--layer5.netlify.app

src/components/CommonForm/events.js

l5io · 2026-03-28T14:32:55Z

🚀 Preview for commit f744db5 at: https://69c7e653c5238f112a3bf1aa--layer5.netlify.app

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

Manishnemade12 · 2026-03-28T18:17:26Z

@rishiraj38 i addressed your changes can you please review it now

l5io · 2026-03-28T18:33:13Z

🚀 Preview for commit 185c96e at: https://69c81ea05353dd80e8a52b9b--layer5.netlify.app

Manishnemade12 · 2026-04-03T05:40:41Z

@saurabhraghuvanshii can you please review this pr

l5io · 2026-04-03T05:59:43Z

🚀 Preview for commit 5b5f726 at: https://69cf571d9fc8b8195bffb68c--layer5.netlify.app

rishiraj38

Please take a look on copilot review

src/components/CommonForm/events.js

Manishnemade12 · 2026-04-03T09:18:25Z

@rishiraj38 Replaced the blocking alert() on form submission failure with an inline, accessible error message using Formik status and an aria-live region. This keeps users in context, improves accessibility, and avoids disruptive browser modals.

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

l5io · 2026-04-03T09:37:05Z

🚀 Preview for commit f5f5384 at: https://69cf8a11fa0a08bd41a76430--layer5.netlify.app

Copilot

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

Copilot · 2026-04-03T21:12:48Z

src/utils/hooks/useWebhookSubmit.js

+  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);
+    }
+  };


submitForm sets React state after an awaited request; if a component using this hook unmounts mid-request (route change, conditional render), React can warn about state updates on an unmounted component. Consider guarding state updates with an isMounted ref/cleanup, or use request cancellation (e.g., AbortController via axios signal) to avoid post-unmount updates.

Copilot · 2026-04-03T21:12:49Z

src/components/ContactForm/index.js

+          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.");
+            }
          }}


Using alert() for submission failures is disruptive and not as accessible/consistent as an inline, aria-live error region (as added in events.js). Prefer setting Formik status (or a local error state) and rendering the message in the form with role="alert"/aria-live, so screen readers and keyboard-only users get a predictable experience.

Copilot · 2026-04-03T21:12:49Z

src/components/CommonForm/index.js

+      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 {


Same issue as ContactForm: alert() is a poor UX/accessibility pattern for form errors. Align with the events.js approach by using Formik status (or a dedicated error area) and emitting the message in an aria-live region near the submit button.

Copilot · 2026-04-03T21:12:49Z

src/components/CommonForm/events.js

@@ -12,6 +12,7 @@ const EventForm = ({ form, title, submit_title, submit_body }) => {
  const [stepNumber, setStepNumber] = useState(0);
  const [memberFormOne, setMemberFormOne] = useState({});


In this refactor, memberFormOne is no longer set in onSubmit (the previous setMemberFormOne(values); was removed), so this state may now be dead weight. If the form no longer needs memberFormOne for rendering the success step, remove it; otherwise, set it on successful submission for consistency with the other forms.

Suggested change

const [memberFormOne, setMemberFormOne] = useState({});

Copilot AI review requested due to automatic review settings March 22, 2026 06:40

Copilot AI reviewed Mar 22, 2026

View reviewed changes

refactor: extract webhook submission logic into a useWebhookSubmit …

709d5f4

…hook and integrate it into CommonForm and ContactForm components. Signed-off-by: Manishnemade12 <mnemade140@gmail.com>

Manishnemade12 force-pushed the eliminate branch from a99476c to 709d5f4 Compare March 22, 2026 06:44

Merge branch 'master' into eliminate

c17fb1c

Manishnemade12 closed this Mar 22, 2026

Manishnemade12 reopened this Mar 24, 2026

Merge branch 'master' into eliminate

aeb3e68

Merge branch 'master' into eliminate

b1f5d72

Update src/utils/hooks/useWebhookSubmit.js

9dede11

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: Manish Nemade <166635137+Manishnemade12@users.noreply.github.com>

Merge branch 'master' into eliminate

bff7508

saurabhraghuvanshii requested review from YASHMAHAKAL and rishiraj38 March 25, 2026 12:49

Merge branch 'master' into eliminate

96f097d

rishiraj38 reviewed Mar 26, 2026

View reviewed changes

src/components/CommonForm/events.js Outdated Show resolved Hide resolved

Merge branch 'master' into eliminate

f744db5

Remove unnecessary state update in EventForm on successful submission

185c96e

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

Manishnemade12 requested a review from rishiraj38 March 28, 2026 18:17

Merge branch 'master' into eliminate

5b5f726

rishiraj38 reviewed Apr 3, 2026

View reviewed changes

src/components/CommonForm/events.js Show resolved Hide resolved

Manishnemade12 requested a review from rishiraj38 April 3, 2026 09:18

fix(forms): replace alert with inline error status

f5f5384

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

Manishnemade12 force-pushed the eliminate branch from 9c1088f to f5f5384 Compare April 3, 2026 09:21

saurabhraghuvanshii requested a review from Copilot April 3, 2026 21:11

Copilot AI reviewed Apr 3, 2026

View reviewed changes

		@@ -12,6 +12,7 @@ const EventForm = ({ form, title, submit_title, submit_body }) => {
		const [stepNumber, setStepNumber] = useState(0);
		const [memberFormOne, setMemberFormOne] = useState({});

Conversation

Manishnemade12 commented Mar 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

l5io commented Mar 22, 2026

Uh oh!

l5io commented Mar 22, 2026

Uh oh!

l5io commented Mar 24, 2026

Uh oh!

Manishnemade12 commented Mar 24, 2026

Uh oh!

l5io commented Mar 24, 2026

Uh oh!

Manishnemade12 commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

l5io commented Mar 25, 2026

Uh oh!

l5io commented Mar 25, 2026

Uh oh!

Manishnemade12 commented Mar 26, 2026

Uh oh!

l5io commented Mar 26, 2026

Uh oh!

Uh oh!

l5io commented Mar 28, 2026

Uh oh!

Manishnemade12 commented Mar 28, 2026

Uh oh!

l5io commented Mar 28, 2026

Uh oh!

Manishnemade12 commented Apr 3, 2026

Uh oh!

l5io commented Apr 3, 2026

Uh oh!

rishiraj38 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Manishnemade12 commented Apr 3, 2026

Uh oh!

l5io commented Apr 3, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Manishnemade12 commented Mar 22, 2026 •

edited

Loading

Manishnemade12 commented Mar 25, 2026 •

edited

Loading