Add placeholder image where needed
This commit is contained in:
parent
cfc628fa59
commit
b6a77263c8
BIN
src/assets/placeholder-music.jpg
Normal file
BIN
src/assets/placeholder-music.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 32 KiB |
@ -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'>
|
||||
|
@ -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
|
||||
|
@ -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'
|
||||
|
@ -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 {
|
||||
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
|
||||
|
Loading…
Reference in New Issue
Block a user