diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Search/index.tsx | 27 |
1 files changed, 8 insertions, 19 deletions
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index 7f9d502..4d1ae83 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -11,30 +11,18 @@ interface Props { } export function Search({ currentTry, setSelectedSong }: Props) { - const [value, setValue] = React.useState<string>(""); + const [value, setValue] = React.useState(""); const [results, setResults] = React.useState<Song[]>([]); React.useEffect(() => { - let cancelled = false; - - async function runSearch() { - if (!value) { - setResults([]); - return; - } - const songs = await searchSong(value); - - if (!cancelled) { - setResults(songs); - } + if (!value.trim()) { + setResults([]); + return; } - runSearch(); - return () => { - cancelled = true; - }; + + setResults(searchSong(value)); }, [value]); - // clear value on selection React.useEffect(() => { setValue(""); }, [currentTry]); @@ -57,13 +45,14 @@ export function Search({ currentTry, setSelectedSong }: Props) { </Styled.Result> ))} </Styled.ResultsContainer> + <Styled.SearchContainer> <Styled.SearchPadding> <IoSearch size={20} /> <Styled.Input + value={value} onChange={(e) => setValue(e.currentTarget.value)} placeholder="Search" - value={value} /> </Styled.SearchPadding> </Styled.SearchContainer> |
