Add update to artists state upon new selection

src/components/App.tsx

@@ -8,7 +8,7 @@ import { Search } from './Search';
 import { Results } from './Results';
 import { Artists, Artist } from '../interfaces';
 
-const QUERY_ARTIST_ALBUMS = gql`
+const QUERY_ARTISTS = gql`
 	query Artist($byName: String!) {
 		queryArtists(byName: $byName) {
 			name
@@ -25,7 +25,7 @@ const QUERY_ARTIST_ALBUMS = gql`
 
 export default function App() {
 	const [inputValue, setInputValue] = useState('');
-	const [getArtists, { data }] = useLazyQuery(QUERY_ARTIST_ALBUMS);
+	const [getArtists, { data }] = useLazyQuery(QUERY_ARTISTS);
 	const [artists, setArtists] = useState<Artists>(undefined);
 	const [suggestions, setSuggestions] = useState<string[] | undefined>(
 		undefined,
@@ -37,20 +37,32 @@ export default function App() {
 	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 = () => {
+	const handleSelect = (suggestion: any) => {
+		const selectedName: string = suggestion.suggestion;
+		const suggestedArtists = data.queryArtists.slice(0, 5);
+		let updatedArtists: Artists;
+
+		// Find the selected artist and move it to index 0
+		for (let i = 0; i < suggestedArtists.length; i++) {
+			if (suggestedArtists[i].name === selectedName) {
+				const selectedArtist: Artists = suggestedArtists?.splice(i, 1);
+				const otherArtists: Artists = suggestedArtists;
+				updatedArtists = [...selectedArtist!, ...otherArtists!]
+				break;
+			}
+		}
+
+		setArtists(updatedArtists);
 		setSelected(true);
 	};
 
@@ -66,7 +78,7 @@ export default function App() {
 				},
 			);
 			setSuggestions(updatedSuggestions);
-			setArtists(updatedArtists);
+			// setArtists(updatedArtists);
 		}
 	}, [data]);
 
@@ -81,7 +93,7 @@ export default function App() {
 				suggestions={suggestions}
 				handleSelect={handleSelect}
 			/>
-			<Results artists={artists} selected={selected} />
+			{selected && <Results artists={artists} />}
 		</Grommet>
 	);
 }

src/components/Results.tsx

@@ -3,10 +3,12 @@ import { Box, Grid } from 'grommet';
 
 import { Artists } from '../interfaces';
 
-export const Results = ({ artists, selected }: { artists: Artists, selected: boolean }) => {
-	console.log('artists', artists);
+export const Results = ({ artists }: { artists: Artists }) => {
+	// Selected artist is always the first of the array
+	const selectedArtist: Artists = artists?.splice(0, 1);
+	const otherArtists = artists;
 
-	return selected ? (
+	return (
 		<Grid
 			rows={['small', 'small']}
 			columns={['1/4', '3/4']}
@@ -26,7 +28,5 @@ export const Results = ({ artists, selected }: { artists: Artists, selected: boo
 				discography
 			</Box>
 		</Grid>
-	) : (
-		<></>
 	);
 };

src/components/Search.tsx

@@ -6,12 +6,12 @@ export const Search = ({
 	inputValue,
 	handleChange,
 	suggestions,
-	handleSelect
+	handleSelect,
 }: {
 	inputValue: string;
 	handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 	suggestions: string[] | undefined;
-	handleSelect : () => void
+	handleSelect: (x: { target: HTMLElement | null; suggestion: any }) => void;
 }) => (
 	<Box
 		as='section'