From 2f2879eace0aeb97fa15d51d566fdcd04c077d71 Mon Sep 17 00:00:00 2001 From: Anh Vu Date: Sat, 2 Nov 2024 13:13:00 +0700 Subject: [PATCH 1/6] vu.nguyen4 --- src/components/Input/index.tsx | 54 +++++++++++++++++++++++++++++++++- 1 file changed, 53 insertions(+), 1 deletion(-) diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx index 453c742..7d8084f 100644 --- a/src/components/Input/index.tsx +++ b/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,59 @@ const Input = ({ placeholder, onSelectItem }: InputProps) => { // DO NOT remove this log console.log('input re-render') + const [result, setResult] = useState([]); + + const [text, setText] = useState('') + + const [isLoading, setIsLoading] = useState(false); + + const onFetch = debounce(async (input: string) => { + try { + if (!input) { + setResult([]); + return; + } + setIsLoading(true); + const response = await fetchData(input); + setResult(response); + } catch (err) { + console.log("Err", err); + } finally { + setIsLoading(false); + } + }, 1000) + + const handleFetchData = useCallback(async (event: ChangeEvent) => { + setText(event.target.value); + await onFetch(event.target.value); + }, []) + + const handleSelectItem = useCallback((item: string) => { + setText(item); + onSelectItem(item) + }, []) + // Your code start here - return + return ( +
+ + { + isLoading && ( + + ) + } + { + result && + result.map((item, index) => { + return ( +
handleSelectItem(item)}> + {item} +
+ ) + }) + } +
+ ) // Your code end here }; From bafd71c46ef58bf19ed3b3194879a262b7738890 Mon Sep 17 00:00:00 2001 From: Anh Vu Date: Sat, 2 Nov 2024 13:15:05 +0700 Subject: [PATCH 2/6] vu.nguyen4 --- src/components/Input/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx index 7d8084f..c581fb1 100644 --- a/src/components/Input/index.tsx +++ b/src/components/Input/index.tsx @@ -45,6 +45,7 @@ const Input = ({ placeholder, onSelectItem }: InputProps) => { const handleSelectItem = useCallback((item: string) => { setText(item); onSelectItem(item) + setResult([]); }, []) // Your code start here From e1e4317ecd1f291a34a3d1dff1e9d4b14c27437a Mon Sep 17 00:00:00 2001 From: Anh Vu Date: Sat, 2 Nov 2024 13:25:53 +0700 Subject: [PATCH 3/6] vu.nguyen4 --- src/components/Input/index.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx index c581fb1..0b83bc1 100644 --- a/src/components/Input/index.tsx +++ b/src/components/Input/index.tsx @@ -19,7 +19,7 @@ const Input = ({ placeholder, onSelectItem }: InputProps) => { const [text, setText] = useState('') - const [isLoading, setIsLoading] = useState(false); + const [state, setState] = useState('success'); const onFetch = debounce(async (input: string) => { try { @@ -27,13 +27,14 @@ const Input = ({ placeholder, onSelectItem }: InputProps) => { setResult([]); return; } - setIsLoading(true); + setState('loading'); const response = await fetchData(input); setResult(response); + setState('success'); } catch (err) { console.log("Err", err); } finally { - setIsLoading(false); + setState('error'); } }, 1000) @@ -53,12 +54,13 @@ const Input = ({ placeholder, onSelectItem }: InputProps) => {
{ - isLoading && ( + state === 'loading' && ( ) } { - result && + state === 'success' && + result && result.length > 0 && result.map((item, index) => { return (
handleSelectItem(item)}> From fd88b3327a1f31cf06c2b7d683ee880422ddef4c Mon Sep 17 00:00:00 2001 From: Anh Vu Date: Sat, 2 Nov 2024 13:26:50 +0700 Subject: [PATCH 4/6] vu.nguyen4 --- src/components/Input/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx index 0b83bc1..3e31777 100644 --- a/src/components/Input/index.tsx +++ b/src/components/Input/index.tsx @@ -40,7 +40,7 @@ const Input = ({ placeholder, onSelectItem }: InputProps) => { const handleFetchData = useCallback(async (event: ChangeEvent) => { setText(event.target.value); - await onFetch(event.target.value); + onFetch(event.target.value); }, []) const handleSelectItem = useCallback((item: string) => { From 00ceb30a522d4797568021d6908c5774bb3604c9 Mon Sep 17 00:00:00 2001 From: Anh Vu Date: Sat, 2 Nov 2024 13:30:21 +0700 Subject: [PATCH 5/6] vu.nguyen4 --- src/components/Input/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx index 3e31777..0b83bc1 100644 --- a/src/components/Input/index.tsx +++ b/src/components/Input/index.tsx @@ -40,7 +40,7 @@ const Input = ({ placeholder, onSelectItem }: InputProps) => { const handleFetchData = useCallback(async (event: ChangeEvent) => { setText(event.target.value); - onFetch(event.target.value); + await onFetch(event.target.value); }, []) const handleSelectItem = useCallback((item: string) => { From 1c3af4b5ac720f4d514f3a44f5ce7cd127d26267 Mon Sep 17 00:00:00 2001 From: Anh Vu Date: Sat, 2 Nov 2024 13:32:55 +0700 Subject: [PATCH 6/6] vu.nguyen4 --- src/components/Input/index.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx index 0b83bc1..1dc8f74 100644 --- a/src/components/Input/index.tsx +++ b/src/components/Input/index.tsx @@ -32,15 +32,14 @@ const Input = ({ placeholder, onSelectItem }: InputProps) => { setResult(response); setState('success'); } catch (err) { - console.log("Err", err); - } finally { setState('error'); + console.log("Err", err); } }, 1000) const handleFetchData = useCallback(async (event: ChangeEvent) => { setText(event.target.value); - await onFetch(event.target.value); + onFetch(event.target.value); }, []) const handleSelectItem = useCallback((item: string) => {