Add placeholder image where needed

src/components/Album.tsx

@@ -1,7 +1,14 @@
 import React from 'react';
 import { Box, Heading, Image } from 'grommet';
 
+import placeholder from '../assets/placeholder-music.jpg';
+
 export const Album = ({ image, name }: { image: string; name: string }) => {
+	// Load placeholder image if none provided
+	if (!image) {
+		image = placeholder;
+	}
+
 	return (
 		<Box round='xxsmall' elevation='small' overflow='hidden'>
 			<Box height='300px'>

src/components/App.tsx

@@ -8,6 +8,7 @@ import { Search } from './Search';
 import { Results } from './Results';
 import { Artists, Artist } from '../interfaces';
 
+
 const QUERY_ARTISTS = gql`
 	query Artist($byName: String!) {
 		queryArtists(byName: $byName) {
@@ -50,7 +51,6 @@ export default function App() {
 
 	const handleSelect = (suggestion: string) => {
 		let updatedArtists: Artists = [];
-
 		let suggestedArtists: Artists = data.queryArtists.slice(0, 5);
 
 		// Find the selected artist and move it to index 0

src/components/Other.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Box, Heading } from 'grommet';
 
+import placeholder from '../assets/placeholder-music.jpg';
+
 export const Other = ({
 	image,
 	name,
@@ -10,6 +12,11 @@ export const Other = ({
 	name: string;
 	handleClick: (name: string) => void;
 }) => {
+	// Load placeholder image if none provided
+	if (!image) {
+		image = placeholder;
+	}
+
 	return (
 		<Box
 			round='xxsmall'

src/components/Results.tsx

@@ -4,6 +4,7 @@ import { Box, Grid, ResponsiveContext, Heading } from 'grommet';
 import { Album } from './Album';
 import { Artists, Albums } from '../interfaces';
 import { Other } from './Other';
+import placeholder from '../assets/placeholder-music.jpg';
 
 export const Results = ({
 	artists,
@@ -12,13 +13,15 @@ export const Results = ({
 	artists: Artists;
 	handleClick: (name: string) => void;
 }) => {
-	const {
+	const { name: selectedName, image, albums } = artists[0];
-		name: selectedName,
-		image: selectedImage,
-		albums,
-	} = artists[0];
 	const otherArtists = artists.slice(1, artists.length);
 	let selectedAlbums: Albums = [];
+	let selectedImage: string = image;
+
+	// Load placeholder image if none provided
+	if (!image) {
+		selectedImage = placeholder;
+	}
 
 	// Remove duplicate albums based on `name`
 	// Might need to refine this according to the data quality