feature: create debounce input

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

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>

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);
+            }}
+        />
+    )
+}

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>

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>
     );
 }