From 9191111f8c50557f726ab0d49a4ae4b603a9dbe0 Mon Sep 17 00:00:00 2001
From: AurelienFT <aurelien.foucault@epitech.eu>
Date: Thu, 16 May 2024 14:32:53 +0200
Subject: [PATCH] Add debounce on claim input

---
 frontend/package-lock.json                     |  8 ++++++++
 frontend/package.json                          |  2 ++
 frontend/src/components/InputWithRightText.tsx | 18 ++++++++++++++++--
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index c6b98cd..28ce52c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -18,6 +18,7 @@
         "eslint-plugin-html": "^8.1.1",
         "eslint-plugin-import": "^2.29.1",
         "husky": "^9.0.11",
+        "lodash": "^4.17.21",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "tw-colors": "^3.3.1",
@@ -26,6 +27,7 @@
       },
       "devDependencies": {
         "@types/dot-object": "^2.1.6",
+        "@types/lodash": "^4.17.1",
         "@types/react": "^18.2.66",
         "@types/react-dom": "^18.2.22",
         "@typescript-eslint/eslint-plugin": "^7.2.0",
@@ -2476,6 +2478,12 @@
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.1.tgz",
+      "integrity": "sha512-X+2qazGS3jxLAIz5JDXDzglAF3KpijdhFxlf/V1+hEsOUc+HnWi81L/uv/EvGuV90WY+7mPGFCUDGfQC3Gj95Q==",
+      "dev": true
+    },
     "node_modules/@types/node": {
       "version": "20.12.11",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.11.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index a4115b3..08f4eb7 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,6 +26,7 @@
     "eslint-plugin-html": "^8.1.1",
     "eslint-plugin-import": "^2.29.1",
     "husky": "^9.0.11",
+    "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tw-colors": "^3.3.1",
@@ -34,6 +35,7 @@
   },
   "devDependencies": {
     "@types/dot-object": "^2.1.6",
+    "@types/lodash": "^4.17.1",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
diff --git a/frontend/src/components/InputWithRightText.tsx b/frontend/src/components/InputWithRightText.tsx
index fd0f843..c47413f 100644
--- a/frontend/src/components/InputWithRightText.tsx
+++ b/frontend/src/components/InputWithRightText.tsx
@@ -1,12 +1,21 @@
 import { InputMessage, InputProps } from '@massalabs/react-ui-kit';
+import { debounce } from 'lodash';
 
 export interface InputWithRightTextProps extends InputProps {
   rightText: string;
 }
 
 export function InputWithRightText(props: InputWithRightTextProps) {
-  const { error, warning, success, disable, customClass, rightText, ...rest } =
-    props;
+  const {
+    error,
+    warning,
+    success,
+    onChange,
+    disable,
+    customClass,
+    rightText,
+    ...rest
+  } = props;
 
   const disabledClass = disable ? 'border-0' : '';
   const errorClass = error ? 'border-s-error' : '';
@@ -15,6 +24,10 @@ export function InputWithRightText(props: InputWithRightTextProps) {
   const messageClass =
     errorClass || warningClass || successClass || disabledClass;
 
+  let debouncedOnChange = onChange;
+  if (onChange) {
+    debouncedOnChange = debounce(onChange, 350);
+  }
   return (
     <div className="flex-row">
       <div className="grid-cols-2">
@@ -24,6 +37,7 @@ export function InputWithRightText(props: InputWithRightTextProps) {
             className={`w-full default-input h-12 pl-3 pr-10 mb-1 ${messageClass} ${customClass}`}
             type="text"
             disabled={disable}
+            onChange={debouncedOnChange}
             {...rest}
           />
         </div>