thanhbuitrung: thanh.bui2

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 */
@@ -12,12 +13,78 @@ export interface InputProps {
 
 const Input = ({ placeholder, onSelectItem }: InputProps) => {
   // DO NOT remove this log
-  console.log('input re-render')
+  console.log("input re-render");
+
+  const [tempValue, setTempValue] = useState<string>("");
+  const [isSearching, setIsSearching] = useState<boolean>(false);
+  const [searchData, setSearchData] = useState<string[]>([]);
+
+  const handleCallAPI = useCallback(async (searchTerm: string) => {
+    if (!searchTerm) return;
+    setIsSearching(true);
+    try {
+      const response = await fetchData(searchTerm);
+      console.log(response);
+      setSearchData(response);
+    } catch (error) {
+      console.log("error when searching", error);
+    } finally {
+      setIsSearching(false);
+    }
+  }, []);
+
+  const renderResultBlock = (searchData: string[]) => {
+    return (
+      <>
+        {searchData?.length ? (
+          <div className={"input-search-component__result-block--has-data"}>
+            {searchData.map((item, index) => {
+              return (
+                <div
+                  key={`search-result-${index}`}
+                  className={"input-search-component__result-item"}
+                  onClick={(
+                    e: React.MouseEvent<HTMLDivElement, MouseEvent>
+                  ) => {
+                    e.stopPropagation();
+                    onSelectItem(item);
+                  }}
+                >
+                  {item}
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <div className={"input-search-component__result-block--no-data"}>
+            No data matching your search. Pleas try again!
+          </div>
+        )}
+      </>
+    );
+  };
 
   // Your code start here
-  return <input></input>
+  return (
+    <div className={"input-search-component"}>
+      <input
+        placeholder={placeholder}
+        onChange={debounce((e: ChangeEvent<HTMLInputElement>) => {
+          e.preventDefault();
+          const searchTerm = e.target?.value;
+          setTempValue(searchTerm);
+          handleCallAPI(searchTerm || "");
+        }, 300)}
+        className={"input-search-component__input-search"}
+      />
+      {!!tempValue && (
+        <div className={"input-search-component__result-block"}>
+          {isSearching ? <Loader /> : renderResultBlock(searchData)}
+        </div>
+      )}
+    </div>
+  );
   // Your code end here
 };
 
 export default Input;
-

src/components/Input/input.scss

@@ -4,3 +4,45 @@
 html{
     font-size: 16px;
 }
+
+.input-search-component {
+  position: relative;
+
+  &__input-search {
+    height: 48px;
+    border: 1px solid #333;
+    border-radius: 5px;
+    font-size: 16px;
+    font-weight: 500;
+    padding-inline: 8px;
+    width: 300px;
+  }
+
+  &__result-block {
+    position: absolute;
+    top: 56px;
+    left: 0;
+    border-radius: 5px;
+    width: 100%;
+    min-height: 80px;
+    max-height: 300px;
+    overflow: auto;
+
+    &--no-data {
+      text-align: center;
+    }
+
+    &--has-data {
+      border: 1px solid #999;
+    }
+  }
+
+  &__result-item {
+    padding: 12px 16px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #ddd;
+    }
+  }
+}

src/components/TodoMVC/TodoFilterOption.tsx

@@ -0,0 +1,30 @@
+import "./todoMVC.scss";
+
+interface ITodoFilterOptionProps {
+  onFilteringTodoTask: (id: string) => void;
+  todoListToShow: string;
+  isActive: boolean;
+}
+
+const TodoFilterOption = ({
+  onFilteringTodoTask,
+  todoListToShow = '',
+  isActive = false,
+}: ITodoFilterOptionProps) => {
+  console.log(todoListToShow);
+
+  return (
+    <div
+    className={`${"todo-mvc-component__filter"} ${
+      isActive ? "active" : ""
+    }`}
+    onClick={() => {
+      onFilteringTodoTask(todoListToShow);
+    }}
+  >
+    {todoListToShow}
+  </div>
+  );
+};
+
+export default TodoFilterOption;

src/components/TodoMVC/TodoItem.tsx

@@ -0,0 +1,108 @@
+import { useState } from "react";
+import { ITodoListProps } from ".";
+import "./todoMVC.scss";
+
+interface ITodoItemProps {
+  todoItem: ITodoListProps;
+  onChangingTodoTaskStatus: (id: number) => void;
+  onRemovingTodoTask: (id: number) => void;
+  onChangingTodoTaskValue: (id: number, value: string) => void;
+}
+
+const TodoItem = ({
+  todoItem,
+  onChangingTodoTaskStatus,
+  onRemovingTodoTask,
+  onChangingTodoTaskValue,
+}: ITodoItemProps) => {
+  const [isDoubleClicked, setIsDoubleClicked] = useState<boolean>(false);
+
+  const handleOnDoubleClickTodoItem = (e: React.UIEvent) => {
+    if (e.detail === 2) {
+      console.log("double click");
+      setIsDoubleClicked(true);
+      setTimeout(() => {
+        document.getElementById(`todo-label-${todoItem.id}`)?.focus();
+      }, 300);
+    }
+  };
+
+  const handleOnBlurTodoItem = () => {
+    setIsDoubleClicked(false);
+  };
+
+  const handleChangeTodoItem = (
+    e:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.KeyboardEvent<HTMLInputElement>
+      | React.BaseSyntheticEvent<HTMLInputElement>
+  ) => {
+    if (e.type === "keydown" && (e as React.KeyboardEvent).key === "Enter") {
+      if (!e?.target?.value) return;
+      if (!onChangingTodoTaskValue) return;
+
+      onChangingTodoTaskValue(todoItem.id, e?.target?.value);
+      setIsDoubleClicked(false);
+    }
+  };
+
+  return (
+    <div
+      className={"todo-mvc-component__todo-item"}
+      onClick={handleOnDoubleClickTodoItem}
+    >
+      {!isDoubleClicked && (
+        <>
+          <button
+            className={"todo-mvc-component__checkbox-btn"}
+            onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onChangingTodoTaskStatus(todoItem.id);
+            }}
+          >
+            {todoItem.isCompleted ? (
+              <span
+                className={
+                  "todo-mvc-component__checkbox-btn__icon todo-mvc-component__checkbox-btn__icon--completed"
+                }
+              ></span>
+            ) : (
+              <span
+                className={
+                  "todo-mvc-component__checkbox-btn__icon todo-mvc-component__checkbox-btn__icon--not-yet"
+                }
+              ></span>
+            )}
+          </button>
+          <label className={"todo-mvc-component__todo-label"}>
+            {todoItem.value}
+          </label>
+          <button
+            className={"todo-mvc-component__remove-btn"}
+            onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onRemovingTodoTask(todoItem.id);
+            }}
+          >
+            &#10060;
+          </button>
+        </>
+      )}
+      {isDoubleClicked && (
+        <div className={"todo-mvc-component__todo-item-input--wrapper"}>
+          <input
+            id={`todo-label-${todoItem.id}`}
+            className={"todo-mvc-component__todo-item-input"}
+            onBlur={handleOnBlurTodoItem}
+            onChange={handleChangeTodoItem}
+            onKeyDown={handleChangeTodoItem}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TodoItem;