From c9a0a898aaccff3ed1ccb093f6a9ee184cac7212 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Baylac-Jacqu=C3=A9?= <felix@alternativebit.fr>
Date: Sat, 12 Feb 2022 23:32:32 +0100
Subject: [PATCH] frontend: implement fetchwithBackoff

We're fetching too soon and too often stuff from the backend. Making
the search input behaviour a bit flaky.

Implementing a backoff fetching strategy. We'll trigger the query only
after 500ms of inactivity and will cancel the previous requests before
triggering a new one.
---
 templates/landing_form.html | 32 ++++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/templates/landing_form.html b/templates/landing_form.html
index b12da24..49cf39d 100644
--- a/templates/landing_form.html
+++ b/templates/landing_form.html
@@ -167,7 +167,7 @@
       }
 
       // Function to update list of voies (calls backend API)
-      function updateVoies(codeInsee, search = '') {
+      function updateVoies(search = '') {
         var api = "addresses/fantoirvoies/" + codeInsee + '?limit=15';
         if (search != '') {
           api += "&s=" + search;
@@ -201,6 +201,21 @@
             console.error("Error fetching communes:", err)
           })
       }
+
+      function fetchWithBackoff (fetchFn, timeout, input) {
+        if(timeout !== null) {
+            clearTimeout(timeout);
+        }
+        if (input.length < 3) {
+            return null;
+        }
+        timeout = setTimeout(() => {
+            const cleanInput = sanitizeInputStr(input);
+            fetchFn(cleanInput);
+        }, 100);
+        return timeout;
+      }
+
       $('#methodAddress').on('show.bs.collapse', function () {
         $('#communeInput').trigger('input')
         $('#communeInput').trigger('keyup')
@@ -216,10 +231,10 @@
         $('#numeroVoieInput').focus();
       });
 
-      $('#communeInput').on('keyup', function () {
+      let timeoutCommune = null;
+      $('#communeInput').on('input', function () {
         controllerCommunes.abort();
-        inputStr = sanitizeInputStr($(this).val());
-        updateCommunes(inputStr);
+        timeoutCommune = fetchWithBackoff(updateCommunes, timeoutCommune, $(this).val());
       });
 
       $('#communeInput').on('input', function () {
@@ -227,10 +242,11 @@
           $('#voieForm').collapse('hide');
         }
       });
-      $('#voieInput').on('keyup', function () {
+
+      let timeoutVoie = null;
+      $('#voieInput').on('input', function () {
         controllerVoies.abort();
-        inputStr = sanitizeInputStr($(this).val());
-        updateVoies(codeInsee, inputStr);
+        timeoutVoie = fetchWithBackoff(updateVoies, timeoutVoie, $(this).val());
       });
       $('#voieInput').on('input', function () {
         if ($(this).val() === '') {
@@ -246,4 +262,4 @@
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>