duy.nguyen homework

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, useEffect, useState } from "react";
 
 export interface InputProps {
   /** Placeholder of the input */
@@ -10,14 +11,70 @@ export interface InputProps {
   onSelectItem: (item: string) => void;
 }
 
+const DEBOUNCE_TIME = 300;
+
 const Input = ({ placeholder, onSelectItem }: InputProps) => {
+  const [searchText, setSearchText] = useState('');
+  const [isFetching, setIsFetching] = useState(false);
+  const [searchItems, setSearchItems] = useState<string[]>([]);
+  const [errorMsg, setErrorMsg] = useState('');
+
   // DO NOT remove this log
-  console.log('input re-render')
+  console.log("input re-render");
+
+  useEffect(() => {
+    let ignore = false;
+    setIsFetching(true);
+    setErrorMsg('');
+    fetchData(searchText).then((response) => {
+      if (!ignore) {
+        setSearchItems(response || []);
+      }
+    }).catch((error) => {
+      if (!ignore) {
+        setErrorMsg(error);
+      }
+    }).finally(() => {
+      if (!ignore) {
+        setIsFetching(false);
+      }
+    });
+    return () => {
+      ignore = true;
+    }
+  }, [searchText])
 
-  // Your code start here
-  return <input></input>
-  // Your code end here
+  const handleOnChange = debounce((e: ChangeEvent<HTMLInputElement>) => {
+    const searchValue = e.target.value;
+    setSearchText(searchValue);
+  }, DEBOUNCE_TIME);
+
+  const renderSearchResults = () => {
+    if (isFetching) {
+      return <Loader/>;
+    } else if (errorMsg) {
+      return <div className="search__error-msg">{errorMsg}</div>;
+    } else if (!searchItems.length) {
+      return <div className="search__no-result">No result</div>
+    } else {
+      return (
+        <div className="search__items">
+          {searchItems.map((item, index) => (
+            <div className="search__item" key={`${item}-${index}`} onClick={() => onSelectItem(item)}>{item}</div>
+          ))}
+        </div>
+      );
+    }
+  };
+
+  return (
+    <div className="search__wrapper">
+      <input className="search__input" placeholder={placeholder} onChange={handleOnChange}/>
+      {(!searchText.length || searchText.trim() === '') ? "" : (
+        <div className="search__result">{renderSearchResults()}</div>
+      )}
+    </div>
+  );
 };
 
 export default Input;
-

src/components/Input/input.scss

@@ -1,6 +1,49 @@
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
-html{
+html {
+  font-size: 16px;
+}
+.search {
+  &__wrapper {
+    width: 300px;
+  }
+  &__input {
+    padding: 12px 16px;
     font-size: 16px;
+    border-radius: 4px;
+    width: 100%;
+  }
+  &__result {
+    width: 100%;
+    position: relative;
+    border: solid 1px #ddd;
+    border-radius: 4px;
+    margin-top: 4px;
+    min-height: 100px;
+    max-height: 300px;
+    overflow: auto;
+  }
+  &__items {
+    display: flex;
+    flex-direction: column;
+  }
+  &__item {
+    padding: 16px;
+    cursor: pointer;
+    &:hover {
+      background-color: #eee;
+    }
+  }
+  &__no-result {
+    padding: 12px 16px;
+    text-align: center;
+    font-style: italic;
+    color: #333;
+  }
+  &__error-msg {
+    padding: 12px 16px;
+    font-style: italic;
+    color: red;
+  }
 }