From 344671b2f2dcca389717e1937ff74e523ad074ec Mon Sep 17 00:00:00 2001
From: James Nuanez <james@jamesnuanez.com>
Date: Fri, 24 Apr 2020 17:20:01 -0700
Subject: [PATCH] Show loader on form submissions

---
 src/components/forms/AccountForm.js     | 9 +++++++++
 src/components/forms/ApplicationForm.js | 9 +++++++++
 src/components/forms/PhoneNumberForm.js | 7 +++++++
 src/components/forms/SipTrunkForm.js    | 9 +++++++++
 4 files changed, 34 insertions(+)

diff --git a/src/components/forms/AccountForm.js b/src/components/forms/AccountForm.js
index df7343e..0842d4c 100644
--- a/src/components/forms/AccountForm.js
+++ b/src/components/forms/AccountForm.js
@@ -190,7 +190,9 @@ const AccountForm = props => {
   }, []);
 
   const handleSumit = async (e) => {
+    let isMounted = true;
     try {
+      setShowLoader(true);
       e.preventDefault();
       setErrorMessage('');
       setInvalidName(false);
@@ -296,8 +298,10 @@ const AccountForm = props => {
       });
 
       if (props.type === 'setup') {
+        isMounted = false;
         history.push('/create-application');
       } else {
+        isMounted = false;
         history.push('/internal/accounts');
         const dispatchMessage = props.type === 'add'
           ? 'Account created successfully'
@@ -314,6 +318,7 @@ const AccountForm = props => {
       if (err.response && err.response.status === 401) {
         localStorage.removeItem('token');
         sessionStorage.clear();
+        isMounted = false;
         history.push('/');
         dispatch({
           type: 'ADD',
@@ -324,6 +329,10 @@ const AccountForm = props => {
         setErrorMessage((err.response && err.response.data && err.response.data.msg) || 'Something went wrong, please try again.');
         console.log(err.response || err);
       }
+    } finally {
+      if (isMounted) {
+        setShowLoader(false);
+      }
     }
   };
 
diff --git a/src/components/forms/ApplicationForm.js b/src/components/forms/ApplicationForm.js
index 40f8633..5cf31f0 100644
--- a/src/components/forms/ApplicationForm.js
+++ b/src/components/forms/ApplicationForm.js
@@ -216,7 +216,9 @@ const ApplicationForm = props => {
 
 
   const handleSumit = async (e) => {
+    let isMounted = true;
     try {
+      setShowLoader(true);
       e.preventDefault();
       setErrorMessage('');
       setInvalidName(false);
@@ -350,8 +352,10 @@ const ApplicationForm = props => {
       });
 
       if (props.type === 'setup') {
+        isMounted = false;
         history.push('/configure-sip-trunk');
       } else {
+        isMounted = false;
         history.push('/internal/applications');
         const dispatchMessage = props.type === 'add'
           ? 'Application created successfully'
@@ -367,6 +371,7 @@ const ApplicationForm = props => {
       if (err.response && err.response.status === 401) {
         localStorage.removeItem('token');
         sessionStorage.clear();
+        isMounted = false;
         history.push('/');
         dispatch({
           type: 'ADD',
@@ -377,6 +382,10 @@ const ApplicationForm = props => {
         setErrorMessage((err.response && err.response.data && err.response.data.msg) || 'Something went wrong, please try again.');
         console.log(err.response || err);
       }
+    } finally {
+      if (isMounted) {
+        setShowLoader(false);
+      }
     }
   };
 
diff --git a/src/components/forms/PhoneNumberForm.js b/src/components/forms/PhoneNumberForm.js
index be08b25..3d3d067 100644
--- a/src/components/forms/PhoneNumberForm.js
+++ b/src/components/forms/PhoneNumberForm.js
@@ -184,7 +184,9 @@ const PhoneNumberForm = props => {
   }, []);
 
   const handleSubmit = async e => {
+    let isMounted = true;
     try {
+      setShowLoader(true);
       e.preventDefault();
       setErrorMessage('');
       setInvalidPhoneNumber(false);
@@ -287,6 +289,7 @@ const PhoneNumberForm = props => {
         message: dispatchMessage
       });
 
+      isMounted = false;
       history.push('/internal/phone-numbers');
     } catch (err) {
       setErrorMessage(
@@ -294,6 +297,10 @@ const PhoneNumberForm = props => {
         'Something went wrong, please try again.'
       );
       console.log(err.response || err);
+    } finally {
+      if (isMounted) {
+        setShowLoader(false);
+      }
     }
   };
 
diff --git a/src/components/forms/SipTrunkForm.js b/src/components/forms/SipTrunkForm.js
index 4b3b0e7..b997370 100644
--- a/src/components/forms/SipTrunkForm.js
+++ b/src/components/forms/SipTrunkForm.js
@@ -210,7 +210,9 @@ const SipTrunkForm = props => {
   };
 
   const handleSumit = async e => {
+    let isMounted = true;
     try {
+      setShowLoader(true);
       e.preventDefault();
       setErrorMessage('');
       resetInvalidFields();
@@ -492,8 +494,10 @@ const SipTrunkForm = props => {
       }
 
       if (props.type === 'setup') {
+        isMounted = false;
         history.push('/setup-complete');
       } else {
+        isMounted = false;
         history.push('/internal/sip-trunks');
         const dispatchMessage = props.type === 'add'
           ? 'SIP trunk created successfully'
@@ -509,6 +513,7 @@ const SipTrunkForm = props => {
       if (err.response && err.response.status === 401) {
         localStorage.removeItem('token');
         sessionStorage.clear();
+        isMounted = false;
         history.push('/');
         dispatch({
           type: 'ADD',
@@ -519,6 +524,10 @@ const SipTrunkForm = props => {
         setErrorMessage((err.response && err.response.data && err.response.data.msg) || 'Something went wrong, please try again.');
         console.log(err.response || err);
       }
+    } finally {
+      if (isMounted) {
+        setShowLoader(false);
+      }
     }
   };