spoti-search/src/components/Results.tsx

115 lines
2.5 KiB
TypeScript
Raw Normal View History

import React from 'react';
import { Box, Grid, ResponsiveContext, Heading } from 'grommet';
2020-07-23 09:43:12 +00:00
import { Album } from './Album';
2020-07-24 12:14:16 +00:00
import { Artists, Albums } from '../interfaces';
import { Other } from './Other';
2020-07-24 12:46:17 +00:00
import placeholder from '../assets/placeholder-music.jpg';
export const Results = ({
artists,
handleClick,
}: {
artists: Artists;
handleClick: (name: string) => void;
}) => {
2020-07-24 12:46:17 +00:00
const { name: selectedName, image, albums } = artists[0];
2020-07-24 12:14:16 +00:00
const otherArtists = artists.slice(1, artists.length);
let selectedAlbums: Albums = [];
2020-07-24 12:46:17 +00:00
let selectedImage: string = image;
// Load placeholder image if none provided
if (!image) {
selectedImage = placeholder;
}
2020-07-24 12:14:16 +00:00
// Remove duplicate albums based on `name`
// Might need to refine this according to the data quality
const uniqueAlbums = new Set();
albums.forEach((album) => {
if (!uniqueAlbums.has(album.name)) {
uniqueAlbums.add(album.name);
selectedAlbums.push(album);
}
});
return (
<Grid
as='section'
rows={['fit', 'fit']}
columns={['fit', '2/3']}
gap='small'
areas={[
['artist-title', 'other-title'],
2020-07-23 19:17:31 +00:00
['artist', 'other'],
['disco-title', 'disco-title'],
['discography', 'discography'],
]}
2020-07-23 09:43:12 +00:00
>
<Heading
level='1'
gridArea='artist-title'
margin={{ vertical: 'none' }}
>
{selectedName}
</Heading>
<Grid gridArea='artist' margin={{ bottom: 'medium' }}>
<Box
round='full'
background={{
repeat: 'no-repeat',
size: 'cover',
image: `url(${selectedImage})`,
}}
height='300px'
width='300px'
/>
</Grid>
<Heading
level='2'
gridArea='other-title'
margin={{ vertical: 'none' }}
alignSelf='end'
size='small'
>
Other results
</Heading>
<ResponsiveContext.Consumer>
{(size) => (
<Box gridArea='other' direction='row' wrap>
2020-07-24 12:14:16 +00:00
{otherArtists.map((artist) => (
<Other
key={artist.id}
image={artist.image}
name={artist.name}
handleClick={handleClick}
/>
))}
</Box>
)}
</ResponsiveContext.Consumer>
<Heading level='2' gridArea='disco-title' size='large'>
Discography
</Heading>
2020-07-23 19:17:31 +00:00
<ResponsiveContext.Consumer>
{(size) => (
<Grid
gridArea='discography'
align='start'
columns={{ count: 'fill', size: '300px' }}
gap='large'
2020-07-23 19:17:31 +00:00
>
{selectedAlbums.map((album) => (
<Album
key={album.id}
image={album.image}
name={album.name}
/>
))}
</Grid>
)}
</ResponsiveContext.Consumer>
</Grid>
2020-07-23 09:43:12 +00:00
);
};