Add Results component with basic structure

src/components/App.tsx

@@ -26,31 +26,32 @@ const QUERY_ARTIST_ALBUMS = gql`
 export default function App() {
 	const [inputValue, setInputValue] = useState('');
 	const [getArtists, { data }] = useLazyQuery(QUERY_ARTIST_ALBUMS);
-	const [artists, setArtists] = useState<Artists | undefined>(undefined);
+	const [artists, setArtists] = useState<Artists>(undefined);
 	const [suggestions, setSuggestions] = useState<string[] | undefined>(
 		undefined,
 	);
 
 	// Debounce the database query
-	// See: https://archive.is/wip/6JDqb
+	// 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]);
-
-	// TODO: Maybe merge the two use effects?
+	
 	useEffect(() => {
+		// TODO optimize 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);
@@ -74,7 +75,7 @@ export default function App() {
 				handleChange={handleChange}
 				suggestions={suggestions}
 			/>
-			<Results />
+			<Results artists={artists}/>
 		</Grommet>
 	);
 }

src/components/Results.tsx

@@ -1,14 +1,32 @@
-import React, { PropsWithChildren } from 'react';
-import { Box } from 'grommet';
+import React from 'react';
+import { Box, Grid } from 'grommet';
 
-export const Results = (props: PropsWithChildren<{}>) => {
-	return (
-		<Box
-			as='section'
-			direction='row'
-			justify='center'
-			margin={{ vertical: 'large' }}
+import { Artists } from '../interfaces';
+
+export const Results = ({ artists }: { artists: Artists }) => {
+	console.log('artists', artists);
+
+	return artists ? (
+		<Grid
+			rows={['small', 'small']}
+			columns={['1/4', '3/4']}
+			gap='small'
+			areas={[
+				['artist', 'similar'],
+				['discography', 'discography'],
+			]}
 		>
-		</Box>
+			<Box gridArea='artist' background='light-5'>
+				Artist
+			</Box>
+			<Box gridArea='similar' background='light-2'>
+				Similar
+			</Box>
+			<Box gridArea='discography' background='brand'>
+				discography
+			</Box>
+		</Grid>
+	) : (
+		<></>
 	);
 };

src/interfaces/index.ts

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