Fix handleSelect and render basic result page

src/components/App.tsx

@@ -26,21 +26,22 @@ const QUERY_ARTISTS = gql`
 export default function App() {
 	const [inputValue, setInputValue] = useState('');
 	const [getArtists, { data }] = useLazyQuery(QUERY_ARTISTS);
-	const [artists, setArtists] = useState<Artists>(undefined);
+	const [artists, setArtists] = useState<Artists>([]);
-	const [suggestions, setSuggestions] = useState<string[] | undefined>(
+	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);
 	};
+
+	const updateQuery = () => {
+		getArtists({ variables: { byName: inputValue } });
+	};
+
+	const delayedQuery = useCallback(debounce(updateQuery, 500), [inputValue]);
+
 	useEffect(() => {
 		delayedQuery();
 		// Cancel previous debounce calls during useEffect cleanup.
@@ -49,15 +50,19 @@ export default function App() {
 
 	const handleSelect = (suggestion: any) => {
 		const selectedName: string = suggestion.suggestion;
-		const suggestedArtists = data.queryArtists.slice(0, 5);
+		let updatedArtists: Artists = [];
-		let updatedArtists: Artists;
+
+		// Use map to create a copy of the array
+		let suggestedArtists: Artists = data.queryArtists
+			.slice(0, 5)
+			.map((item: Artist) => item);
 
 		// Find the selected artist and move it to index 0
-		for (let i = 0; i < suggestedArtists.length; i++) {
+		for (let i = 0; i < suggestedArtists!.length; i++) {
-			if (suggestedArtists[i].name === selectedName) {
+			if (suggestedArtists![i].name === selectedName) {
-				const selectedArtist: Artists = suggestedArtists?.splice(i, 1);
+				let selectedArtist: Artists = suggestedArtists?.splice(i, 1);
-				const otherArtists: Artists = suggestedArtists;
+				let otherArtists: Artists = suggestedArtists;
-				updatedArtists = [...selectedArtist!, ...otherArtists!]
+				updatedArtists = [...selectedArtist, ...otherArtists];
 				break;
 			}
 		}
@@ -78,7 +83,6 @@ export default function App() {
 				},
 			);
 			setSuggestions(updatedSuggestions);
-			// setArtists(updatedArtists);
 		}
 	}, [data]);
 

src/components/Results.tsx

@@ -1,16 +1,18 @@
 import React from 'react';
-import { Box, Grid } from 'grommet';
+import { Box, Grid, Avatar } from 'grommet';
 
 import { Artists } from '../interfaces';
 
 export const Results = ({ artists }: { artists: Artists }) => {
-	// Selected artist is always the first of the array
+	const {
-	const selectedArtist: Artists = artists?.splice(0, 1);
+		name: selectedName,
-	const otherArtists = artists;
+		image: selectedImage,
+		albums: selectedAlbums,
+	} = artists[0];
 
 	return (
 		<Grid
-			rows={['small', 'small']}
+			rows={['fit', 'fit']}
 			columns={['1/4', '3/4']}
 			gap='small'
 			areas={[
@@ -19,13 +21,26 @@ export const Results = ({ artists }: { artists: Artists }) => {
 			]}
 		>
 			<Box gridArea='artist' background='light-5'>
-				Artist
+				<Avatar src={selectedImage} />
+				<h1>{selectedName}</h1>
 			</Box>
 			<Box gridArea='similar' background='light-2'>
-				Similar
+				<h3>Similar results</h3>
+				{artists.map((artist) => (
+					<Box gridArea='artist' background='light-5' key={artist.id}>
+						<Avatar src={artist.image} />
+						<h4>{artist.name}</h4>
+					</Box>
+				))}
 			</Box>
 			<Box gridArea='discography' background='brand'>
-				discography
+				<h2>discography</h2>
+				{selectedAlbums.map((albums) => (
+					<Box gridArea='albums' background='light-5' key={albums.id}>
+						<Avatar src={albums.image} />
+						<h4>{albums.name}</h4>
+					</Box>
+				))}
 			</Box>
 		</Grid>
 	);

src/interfaces/index.ts

@@ -11,4 +11,4 @@ export interface Artist {
 	albums: Album[];
 }
 
-export type Artists = Artist[] | undefined;
+export type Artists = Artist[];

tsconfig.json

@@ -17,7 +17,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react",
+    "downlevelIteration": true
   },
   "include": [
     "src"