fix(forms): remove unused state and add unmount safety to webhook submit hook

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

Author: Manishnemade12

src/components/CommonForm/events.js

@@ -10,8 +10,6 @@ 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
@@ -42,7 +40,6 @@ const EventForm = ({ form, title, submit_title, submit_body }) => {
         if (success) {
           setStatus(null);
           setStepNumber(1);
-          setSubmit(true);
           window.scrollTo(0,window.scrollY - 800);
           setFirstName(values.firstname);
           setEmail(values.email);

src/utils/hooks/useWebhookSubmit.js

@@ -1,23 +1,56 @@
-import { useState } from 'react';
+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) => {
-    setIsSubmitting(true);
-    setError(null);
+    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);
+      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);
-      setError(errorObject);
+      if (isMountedRef.current) {
+        setError(errorObject);
+      }
       return { success: false, error: errorObject, errorMessage };
     } finally {
-      setIsSubmitting(false);
+      if (requestControllerRef.current === controller) {
+        requestControllerRef.current = null;
+      }
+      if (isMountedRef.current) {
+        setIsSubmitting(false);
+      }
     }
   };