Add placeholder image where needed

This commit is contained in:
rui hildt 2020-07-24 14:46:17 +02:00
parent cfc628fa59
commit b6a77263c8
5 changed files with 24 additions and 7 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

View File

@ -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'>

View File

@ -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

View File

@ -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'

View File

@ -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