Vu Nguyen - vu.nguyen4

src/components/Input/index.tsx

@@ -2,6 +2,7 @@ import "./input.scss";
 import { fetchData } from "../../utils/fetch-data";
 import { debounce } from "../../utils/deboucne";
 import Loader from "../Loader";
+import { ChangeEvent, useCallback, useState } from "react";
 
 export interface InputProps {
   /** Placeholder of the input */
@@ -14,8 +15,61 @@ const Input = ({ placeholder, onSelectItem }: InputProps) => {
   // DO NOT remove this log
   console.log('input re-render')
 
+  const [result, setResult] = useState<string[]>([]);
+
+  const [text, setText] = useState<string>('')
+
+  const [state, setState] = useState<string>('success');
+
+  const onFetch = debounce(async (input: string) => {
+    try {
+      if (!input) {
+        setResult([]);
+        return;
+      }
+      setState('loading');
+      const response = await fetchData(input);
+      setResult(response);
+      setState('success');
+    } catch (err) {
+      setState('error');
+      console.log("Err", err);
+    }
+  }, 1000)
+
+  const handleFetchData = useCallback(async (event: ChangeEvent<HTMLInputElement>) => {
+    setText(event.target.value);
+    onFetch(event.target.value);
+  }, [])
+
+  const handleSelectItem = useCallback((item: string) => {
+    setText(item);
+    onSelectItem(item)
+    setResult([]);
+  }, [])
+
   // Your code start here
-  return <input></input>
+  return (
+    <div>
+      <input value={text} onChange={handleFetchData} placeholder={placeholder}></input>
+      {
+        state === 'loading' && (
+          <Loader />
+        )
+      }
+      {
+        state === 'success' &&
+        result && result.length > 0 &&
+        result.map((item, index) => {
+          return (
+            <div key={index} onClick={() => handleSelectItem(item)}>
+              {item}
+            </div>
+          )
+        })
+      }
+    </div>
+  )
   // Your code end here
 };