From 035eb2e548794906f09226cb83ed0fc0c935ebfd Mon Sep 17 00:00:00 2001
From: rui hildt <ruihildt@protonmail.com>
Date: Thu, 23 Jul 2020 10:56:03 +0200
Subject: [PATCH] Improve input value names

---
 src/components/SearchBox.tsx | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

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