Fix Results conditional render on artist selection

src/components/App.tsx

@@ -30,27 +30,32 @@ export default function App() {
 	const [suggestions, setSuggestions] = useState<string[] | undefined>(
 		undefined,
 	);
+	const [selected, setSelected] = useState(false);
 
 	// Debounce the database query
 	// Based on: https://archive.is/wip/6JDqb
 	const updateQuery = () => {
 		getArtists({ variables: { byName: inputValue } });
 	};
-	
+
 	const delayedQuery = useCallback(debounce(updateQuery, 500), [inputValue]);
-	
+
 	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		setInputValue(e.target.value);
 	};
-	
+
 	useEffect(() => {
 		delayedQuery();
 		// Cancel previous debounce calls during useEffect cleanup.
 		return delayedQuery.cancel;
 	}, [inputValue, delayedQuery]);
-	
+
+	const handleSelect = () => {
+		setSelected(true);
+	};
+
 	useEffect(() => {
-		// TODO optimize rendering, probably by using onCompleted instead of this useEffect
+		// TODO optimize re-rendering, probably by using onCompleted instead of this useEffect
 		// See https://github.com/apollographql/apollo-client/issues/5268#issuecomment-596950174
 		if (data && data.queryArtists !== []) {
 			// Limit artists to 5
@@ -74,8 +79,9 @@ export default function App() {
 				inputValue={inputValue}
 				handleChange={handleChange}
 				suggestions={suggestions}
+				handleSelect={handleSelect}
 			/>
-			<Results artists={artists}/>
+			<Results artists={artists} selected={selected} />
 		</Grommet>
 	);
 }

src/components/Results.tsx

@@ -3,10 +3,10 @@ import { Box, Grid } from 'grommet';
 
 import { Artists } from '../interfaces';
 
-export const Results = ({ artists }: { artists: Artists }) => {
+export const Results = ({ artists, selected }: { artists: Artists, selected: boolean }) => {
 	console.log('artists', artists);
 
-	return artists ? (
+	return selected ? (
 		<Grid
 			rows={['small', 'small']}
 			columns={['1/4', '3/4']}

src/components/Search.tsx

@@ -6,10 +6,12 @@ export const Search = ({
 	inputValue,
 	handleChange,
 	suggestions,
+	handleSelect
 }: {
 	inputValue: string;
 	handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 	suggestions: string[] | undefined;
+	handleSelect : () => void
 }) => (
 	<Box
 		as='section'
@@ -20,6 +22,7 @@ export const Search = ({
 		<TextInput
 			value={inputValue}
 			onChange={handleChange}
+			onSelect={handleSelect}
 			placeholder='Type an artist name'
 			icon={<FormSearch color='plain' />}
 			dropHeight='large'