added throttle debounce library

frontend/package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "GPL-3.0",
       "dependencies": {
+        "@types/throttle-debounce": "2.1.0",
         "axios": "^0.21.2",
         "chart.js": "3.7.1",
         "chartjs-adapter-date-fns": "2.0.0",
@@ -22,7 +23,8 @@
         "html2canvas": "1.4.1",
         "object-hash": "3.0.0",
         "remove-files-webpack-plugin": "1.5.0",
-        "stemmer": "2.0.0"
+        "stemmer": "2.0.0",
+        "throttle-debounce": "3.0.1"
       },
       "devDependencies": {
         "@types/chartjs-plugin-trendline": "1.0.1",
@@ -1173,6 +1175,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/throttle-debounce": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/throttle-debounce/-/throttle-debounce-2.1.0.tgz",
+      "integrity": "sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ=="
+    },
     "node_modules/@types/tinycolor2": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/@types/tinycolor2/-/tinycolor2-1.4.3.tgz",
@@ -12184,6 +12191,14 @@
       "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
       "dev": true
     },
+    "node_modules/throttle-debounce": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
+      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/through2-filter": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/through2-filter/-/through2-filter-3.0.0.tgz",
@@ -14763,6 +14778,11 @@
         "@types/node": "*"
       }
     },
+    "@types/throttle-debounce": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/throttle-debounce/-/throttle-debounce-2.1.0.tgz",
+      "integrity": "sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ=="
+    },
     "@types/tinycolor2": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/@types/tinycolor2/-/tinycolor2-1.4.3.tgz",
@@ -23264,6 +23284,11 @@
       "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
       "dev": true
     },
+    "throttle-debounce": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
+      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg=="
+    },
     "through2-filter": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/through2-filter/-/through2-filter-3.0.0.tgz",

frontend/package.json

@@ -50,6 +50,7 @@
     "webpack-merge": "5.8.0"
   },
   "dependencies": {
+    "@types/throttle-debounce": "2.1.0",
     "axios": "^0.21.2",
     "chart.js": "3.7.1",
     "chartjs-adapter-date-fns": "2.0.0",
@@ -63,6 +64,7 @@
     "html2canvas": "1.4.1",
     "object-hash": "3.0.0",
     "remove-files-webpack-plugin": "1.5.0",
-    "stemmer": "2.0.0"
+    "stemmer": "2.0.0",
+    "throttle-debounce": "3.0.1"
   }
 }

frontend/src/scripts/config.ts

@@ -10,6 +10,7 @@ import * as ConfigEvent from "./observables/config-event";
 import DefaultConfig from "./constants/default-config";
 import { Auth } from "./firebase";
 import * as AnalyticsController from "./controllers/analytics-controller";
+import { debounce } from "throttle-debounce";
 
 export let localStorageConfig: MonkeyTypes.Config;
 export let dbConfigLoaded = false;
@@ -33,6 +34,13 @@ let config = {
   ...DefaultConfig,
 };
 
+let configToSend = {} as MonkeyTypes.Config;
+const saveToDatabase = debounce(1000, () => {
+  delete configToSend.resultFilters;
+  if (Object.keys(configToSend).length > 0) DB.saveConfig(configToSend);
+  configToSend = {} as MonkeyTypes.Config;
+});
+
 async function saveToLocalStorage(
   key: keyof MonkeyTypes.Config,
   nosave = false,
@@ -50,31 +58,12 @@ async function saveToLocalStorage(
   const localToSaveStringified = JSON.stringify(localToSave);
   window.localStorage.setItem("config", localToSaveStringified);
   if (!noDbCheck) {
-    // await DB.saveConfig(dbToSave);
-    await saveToDatabase(key);
+    (configToSend[key] as typeof config[typeof key]) = config[key];
+    await saveToDatabase();
   }
   ConfigEvent.dispatch("saveToLocalStorage", localToSaveStringified);
 }
 
-let configToSend = {} as MonkeyTypes.Config;
-let saveTimeout: NodeJS.Timeout | null = null;
-async function saveToDatabase(key: keyof MonkeyTypes.Config): Promise<void> {
-  (configToSend[key] as typeof config[typeof key]) = config[key];
-
-  if (saveTimeout === null) {
-    saveTimeout = setTimeout(
-      async () => {
-        delete configToSend.resultFilters;
-        if (Object.keys(configToSend).length > 0) DB.saveConfig(configToSend);
-        configToSend = {} as MonkeyTypes.Config;
-        clearTimeout(saveTimeout as NodeJS.Timeout);
-        saveTimeout = null;
-      },
-      window.location.hostname === "localhost" ? 0 : 1000
-    );
-  }
-}
-
 export async function saveFullConfigToLocalStorage(
   noDbCheck = false
 ): Promise<void> {

frontend/src/scripts/popups/quote-search-popup.ts

@@ -11,10 +11,10 @@ import {
   SearchService,
   TextExtractor,
 } from "../utils/search-service";
-import { debounce } from "../utils/debounce";
 import { splitByAndKeep } from "../utils/strings";
 import QuotesController from "../controllers/quotes-controller";
 import { Auth } from "../firebase";
+import { debounce } from "throttle-debounce";
 
 export let selectedId = 1;
 
@@ -258,7 +258,7 @@ export function apply(val: number): boolean {
   return ret;
 }
 
-const searchForQuotes = debounce((): void => {
+const searchForQuotes = debounce(250, (): void => {
   const searchText = (<HTMLInputElement>document.getElementById("searchBox"))
     .value;
   updateResults(searchText);

frontend/src/scripts/utils/debounce.ts

@@ -1,8 +0,0 @@
-export function debounce(fn: any, ms = 250): any {
-  let timeoutId: ReturnType<typeof setTimeout>;
-
-  return function (this: any, ...args: any[]) {
-    clearTimeout(timeoutId);
-    timeoutId = setTimeout(() => fn.apply(this, args), ms);
-  };
-}