From 84e86f170e9aa30bd2363d9539e2c8a436193aa1 Mon Sep 17 00:00:00 2001
From: rui hildt <ruihildt@protonmail.com>
Date: Thu, 23 Jul 2020 14:07:29 +0200
Subject: [PATCH] Add Results component with basic structure

---
 src/components/App.tsx     | 17 +++++++++--------
 src/components/Results.tsx | 38 ++++++++++++++++++++++++++++----------
 src/interfaces/index.ts    |  2 +-
 3 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 9b0ca38..273f106 100644
--- a/src/components/App.tsx
+++ b/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>
 	);
 }
diff --git a/src/components/Results.tsx b/src/components/Results.tsx
index 909d5db..6517669 100644
--- a/src/components/Results.tsx
+++ b/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>
+	) : (
+		<></>
 	);
 };
diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts
index 061214a..d199c5f 100644
--- a/src/interfaces/index.ts
+++ b/src/interfaces/index.ts
@@ -11,4 +11,4 @@ export interface Artist {
 	albums: Album[];
 }
 
-export type Artists = Artist[];
\ No newline at end of file
+export type Artists = Artist[] | undefined;
\ No newline at end of file