Fix invalid URL - Closes #3887 (#4052)

* Remove * Create removeTrailingSlash function * Use regex and add documentation * Only setAddress for last input Co-authored-by: Manu <[email protected]>
LiskHQ · Jan 11, 2022 · 3cd82c1 · 3cd82c1
1 parent cf63445
commit 3cd82c1
Showing 1 changed file with 34 additions and 13 deletions.
diff --git a/src/components/screens/login/networkSelector/customNode/editMode.js b/src/components/screens/login/networkSelector/customNode/editMode.js
@@ -22,6 +22,20 @@ const validateNode = async (address) => {
   }
 };
 
+/**
+ * Removes the trailing slash if string is not exactly equal to 'http:/','http://','https:/' or 'https://'
+ *
+ * @param {string} url - A URL that might end in a slash
+ * @returns {string} A URL without a trailing slash
+ */
+const removeTrailingSlash = (url) => {
+  if (url.charAt(url.length - 1) !== '/' || /http(s?):(\/){1,2}$/.test(url)) {
+    return url;
+  }
+
+  return url.substring(0, url.length - 1);
+};
+
 const EditMode = ({
   t, setMode, dropdownRef,
   storedCustomNetwork, networkSelected, customNetworkStored,
@@ -33,29 +47,36 @@ const EditMode = ({
     feedback: '',
   });
   const timeout = useRef();
+  const lastInput = useRef();
 
-  const validate = (value) => {
+  const validate = (input) => {
     clearTimeout(timeout.current);
+    lastInput.current = input;
     // validate the URL with debouncer
     timeout.current = setTimeout(() => {
+      const value = removeTrailingSlash(input);
       const normalized = addHttp(value);
       setLoading(true);
       validateNode(normalized)
         .then(() => {
-          setAddress({
-            value,
-            error: 0,
-            feedback: '',
-          });
-          setLoading(false);
+          if (input === lastInput.current) {
+            setAddress({
+              value,
+              error: 0,
+              feedback: '',
+            });
+            setLoading(false);
+          }
         })
         .catch(() => {
-          setAddress({
-            value,
-            error: 1,
-            feedback: t('Unable to connect to Lisk Service, please check the address and try again'),
-          });
-          setLoading(false);
+          if (input === lastInput.current) {
+            setAddress({
+              value,
+              error: 1,
+              feedback: t('Unable to connect to Lisk Service, please check the address and try again'),
+            });
+            setLoading(false);
+          }
         });
     }, 500);
   };