ruihildt/spoti-search
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improve input value names

Browse Source
This commit is contained in:
rui hildt 2020-07-23 10:56:03 +02:00
parent 09396427b2
commit 035eb2e548
1 changed files with 7 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/SearchBox.tsx
View File

@ -22,7 +22,7 @@ const QUERY_ARTIST_ALBUMS = gql`
`; `;
export const SearchBox = () => { export const SearchBox = () => {
const [value, setValue] = useState(''); const [inputValue, setInputValue] = useState('');
const [getArtists, { data }] = useLazyQuery(QUERY_ARTIST_ALBUMS); const [getArtists, { data }] = useLazyQuery(QUERY_ARTIST_ALBUMS);
const [artists, setArtists] = useState<Artists | undefined>(undefined); const [artists, setArtists] = useState<Artists | undefined>(undefined);
const [suggestions, setSuggestions] = useState<string[] | undefined>( const [suggestions, setSuggestions] = useState<string[] | undefined>(
@ -32,23 +32,22 @@ export const SearchBox = () => {
// Debounce the database query, based on the following article: // Debounce the database query, based on the following article:
// https://dev.to/reflexgravity/use-lodash-debouce-inside-a-functional-component-in-react-4g5j // https://dev.to/reflexgravity/use-lodash-debouce-inside-a-functional-component-in-react-4g5j
const updateQuery = () => { const updateQuery = () => {
getArtists({ variables: { byName: value } }); getArtists({ variables: { byName: inputValue } });
}; };
const delayedQuery = useCallback(debounce(updateQuery, 500), [value]); const delayedQuery = useCallback(debounce(updateQuery, 500), [inputValue]);
const handleChange = (e: any) => { const handleChange = (e: any) => {
setValue(e.target.value); setInputValue(e.target.value);
}; };
// TODO: Maybe merge the two use effects?
useEffect(() => { useEffect(() => {
delayedQuery(); delayedQuery();
// Cancel previous debounce calls during useEffect cleanup. // Cancel previous debounce calls during useEffect cleanup.
return delayedQuery.cancel; return delayedQuery.cancel;
}, [value, delayedQuery]); }, [inputValue, delayedQuery]);
// TODO: Maybe merge the two use effects?
useEffect(() => { useEffect(() => {
if (data && data.queryArtists !== []) { if (data && data.queryArtists !== []) {
// Limit artists to 5 // Limit artists to 5
@ -71,7 +70,7 @@ export const SearchBox = () => {
margin={{ vertical: 'large' }} margin={{ vertical: 'large' }}
> >
<TextInput <TextInput
value={value} value={inputValue}
onChange={handleChange} onChange={handleChange}
placeholder='Type an artist name' placeholder='Type an artist name'
icon={<FormSearch color='plain' />} icon={<FormSearch color='plain' />}