Add possibility to load other results on click

src/components/App.tsx

@@ -27,20 +27,20 @@ export default function App() {
 	const [inputValue, setInputValue] = useState('');
 	const [getArtists, { data }] = useLazyQuery(QUERY_ARTISTS);
 	const [artists, setArtists] = useState<Artists>([]);
-	const [suggestions, setSuggestions] = useState<string[] | undefined>();
+	const [suggestions, setSuggestions] = useState<string[]>([]);
 	const [selected, setSelected] = useState(false);
 
 	// Debounce the database query
 	// Based on: https://archive.is/wip/6JDqb
-	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-		setInputValue(e.target.value);
+	const handleChange = (value: string) => {
+		setInputValue(value);
 	};
 
 	const updateQuery = () => {
 		getArtists({ variables: { byName: inputValue } });
 	};
 
-	const delayedQuery = useCallback(debounce(updateQuery, 500), [inputValue]);
+	const delayedQuery = useCallback(debounce(updateQuery, 200), [inputValue]);
 
 	useEffect(() => {
 		delayedQuery();
@@ -48,18 +48,14 @@ export default function App() {
 		return delayedQuery.cancel;
 	}, [inputValue, delayedQuery]);
 
-	const handleSelect = (suggestion: any) => {
-		const selectedName: string = suggestion.suggestion;
+	const handleSelect = (suggestion: string) => {
 		let updatedArtists: Artists = [];
 
-		// Use map to create a copy of the array
-		let suggestedArtists: Artists = data.queryArtists
-			.slice(0, 5)
-			.map((item: Artist) => item);
+		let suggestedArtists: Artists = data.queryArtists.slice(0, 5);
 
 		// Find the selected artist and move it to index 0
 		for (let i = 0; i < suggestedArtists!.length; i++) {
-			if (suggestedArtists![i].name === selectedName) {
+			if (suggestedArtists![i].name === suggestion) {
 				let selectedArtist: Artists = suggestedArtists?.splice(i, 1);
 				let otherArtists: Artists = suggestedArtists;
 				updatedArtists = [...selectedArtist, ...otherArtists];
@@ -71,13 +67,22 @@ export default function App() {
 		setSelected(true);
 	};
 
-	const handleClick = () => {
-		console.log('click')
+	const handleClick = (name: string) => {
+		let updatedArtists: Artists = [];
+
+		for (let i = 0; i < artists.length; i++) {
+			if (artists[i].name === name) {
+				let selectedArtist: Artists = artists.splice(i, 1);
+				let otherArtists: Artists = artists;
+				updatedArtists = [...selectedArtist, ...otherArtists];
+				break;
+			}
 		}
 
+		setArtists(updatedArtists);
+	};
+
 	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
 			const updatedArtists = data.queryArtists.slice(0, 5);
@@ -101,7 +106,9 @@ export default function App() {
 				suggestions={suggestions}
 				handleSelect={handleSelect}
 			/>
-			{selected && <Results artists={artists}  handleClick={handleClick}/>}
+			{selected && (
+				<Results artists={artists} handleClick={handleClick} />
+			)}
 		</Grommet>
 	);
 }

src/components/Other.tsx

@@ -8,7 +8,7 @@ export const Other = ({
 }: {
 	image: string;
 	name: string;
-	handleClick: ((...args: any[]) => any) & ((event: MouseEvent) => void);
+	handleClick: (name: string) => void;
 }) => {
 	return (
 		<Box
@@ -16,7 +16,7 @@ export const Other = ({
 			overflow='hidden'
 			align='center'
 			pad='small'
-			onClick={handleClick}
+			onClick={() => handleClick(name)}
 		>
 			<Heading
 				level='4'

src/components/Results.tsx

@@ -10,7 +10,7 @@ export const Results = ({
 	handleClick,
 }: {
 	artists: Artists;
-	handleClick: ((...args: any[]) => any) & ((event: MouseEvent) => void);
+	handleClick: (name: string) => void;
 }) => {
 	const {
 		name: selectedName,

src/components/Search.tsx

@@ -9,9 +9,9 @@ export const Search = ({
 	handleSelect,
 }: {
 	inputValue: string;
-	handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-	suggestions: string[] | undefined;
-	handleSelect: (x: { target: HTMLElement | null; suggestion: any }) => void;
+	handleChange: (value: string) => void;
+	suggestions: string[];
+	handleSelect: (suggestion: string) => void;
 }) => (
 	<Box
 		as='section'
@@ -21,8 +21,8 @@ export const Search = ({
 	>
 		<TextInput
 			value={inputValue}
-			onChange={handleChange}
-			onSelect={handleSelect}
+			onChange={e => handleChange(e.target.value)}
+			onSelect={(target) => handleSelect(target.suggestion)}
 			placeholder='Type an artist name'
 			icon={<FormSearch color='plain' />}
 			dropHeight='large'