From eaf5412149da3fe39739f0def10b0c4f8adeb730 Mon Sep 17 00:00:00 2001
From: RouxAntoine <antoinroux@hotmail.fr>
Date: Mon, 24 Jul 2023 19:21:09 +0200
Subject: [PATCH] feature: create debounce input

---
 src/main/resources/application-dev.properties |  1 +
 src/main/resources/public/index.html          |  1 +
 .../resources/public/src/InputWithDebounce.js | 20 +++++++++++++++++++
 .../resources/public/src/NodesComponent.js    |  4 ++++
 src/main/resources/public/src/RootBody.js     | 11 ++--------
 5 files changed, 28 insertions(+), 9 deletions(-)
 create mode 100644 src/main/resources/public/src/InputWithDebounce.js

diff --git a/src/main/resources/application-dev.properties b/src/main/resources/application-dev.properties
index a916e60..2533f2f 100644
--- a/src/main/resources/application-dev.properties
+++ b/src/main/resources/application-dev.properties
@@ -1,4 +1,5 @@
 backoffice.configuration.kubernetes.api.kubeconfig=/Users/antoine/.kube/config.kubeconfig
+backoffice.configuration.kubernetes.api.context=admin@kubernetes
 
 #backoffice.configuration.kubernetes.api.url=https://kubernetes.localdomain:6443
 #backoffice.configuration.kubernetes.api.ca-cert=/Users/antoine/Documents/virtualization/kubeadm/ca.crt
diff --git a/src/main/resources/public/index.html b/src/main/resources/public/index.html
index 6905ae6..ad05682 100644
--- a/src/main/resources/public/index.html
+++ b/src/main/resources/public/index.html
@@ -18,6 +18,7 @@
         <!-- Load our React component. -->
         <script src="http://localhost:35729/livereload.js"></script>
         <script type="text/babel" src="src/RootHeader.js" data-presets="es2015,react"></script>
+        <script type="text/babel" src="src/InputWithDebounce.js" data-presets="es2015,react"></script>
         <script type="text/babel" src="src/ListData.js" data-presets="es2015,react"></script>
         <script type="text/babel" src="src/NodesComponent.js" data-presets="es2015,react"></script>
         <script type="text/babel" src="src/RootBody.js" data-presets="es2015,react"></script>
diff --git a/src/main/resources/public/src/InputWithDebounce.js b/src/main/resources/public/src/InputWithDebounce.js
new file mode 100644
index 0000000..e0dd172
--- /dev/null
+++ b/src/main/resources/public/src/InputWithDebounce.js
@@ -0,0 +1,20 @@
+function InputWithDebounce({value, setValue, debounce = 500}) {
+    const [directValue, setDirectValue] = React.useState(value);
+
+    React.useEffect(() => {
+        const timeoutId = setTimeout(() => {
+            setValue(directValue)
+        }, debounce);
+        return () => clearTimeout(timeoutId);
+    }, [directValue, debounce]);
+
+    return (
+        <MaterialUI.TextField
+            label="filter criteria"
+            value={directValue}
+            onChange={event => {
+                setDirectValue(event.target.value);
+            }}
+        />
+    )
+}
diff --git a/src/main/resources/public/src/NodesComponent.js b/src/main/resources/public/src/NodesComponent.js
index 38450cb..2db022b 100644
--- a/src/main/resources/public/src/NodesComponent.js
+++ b/src/main/resources/public/src/NodesComponent.js
@@ -9,6 +9,10 @@ function Nodes({criteria}) {
             .then(value => setNodes(value));
     }, []);
 
+    React.useEffect(() => {
+        console.log(criteria);
+    }, [criteria]);
+
     return (
         <div>
             <div>nodes</div>
diff --git a/src/main/resources/public/src/RootBody.js b/src/main/resources/public/src/RootBody.js
index 252a1b0..455a1ed 100644
--- a/src/main/resources/public/src/RootBody.js
+++ b/src/main/resources/public/src/RootBody.js
@@ -1,20 +1,13 @@
 'use strict';
 
-function FilterInput({onChange}) {
-    return (
-        <input
-            onChange={onChange}
-        />
-    )
-}
-
 function RootBody() {
     const [criteria, setCriteria] = React.useState("")
 
     return (
         <div>
             <Nodes criteria={criteria}/>
-            <FilterInput onChange={e => setCriteria(e.target.value)}/>
+            <br/>
+            <InputWithDebounce value={criteria} setValue={setCriteria}/>
         </div>
     );
 }