diff --git a/src/assets/placeholder-music.jpg b/src/assets/placeholder-music.jpg new file mode 100644 index 0000000..a06ab92 Binary files /dev/null and b/src/assets/placeholder-music.jpg differ diff --git a/src/components/Album.tsx b/src/components/Album.tsx index bab3ed6..046a5d2 100644 --- a/src/components/Album.tsx +++ b/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 ( diff --git a/src/components/App.tsx b/src/components/App.tsx index 31aabdb..480397d 100644 --- a/src/components/App.tsx +++ b/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 diff --git a/src/components/Other.tsx b/src/components/Other.tsx index 25bb050..c09835a 100644 --- a/src/components/Other.tsx +++ b/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 ( void; }) => { - const { - name: selectedName, - image: selectedImage, - albums, - } = artists[0]; + const { name: selectedName, image, 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 const uniqueAlbums = new Set();