spoti-search/src/components/Results.tsx

import React from 'react';
import { Box, Grid, ResponsiveContext, Heading } from 'grommet';

import { Album } from './Album';
import { Artists, Albums } from '../interfaces';
import { Other } from './Other';

export const Results = ({
	artists,
	handleClick,
}: {
	artists: Artists;
	handleClick: (name: string) => void;
}) => {
	const {
		name: selectedName,
		image: selectedImage,
		albums,
	} = artists[0];
	const otherArtists = artists.slice(1, artists.length);
	let selectedAlbums: Albums = [];
	
	// 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'],
				['artist', 'other'],
				['disco-title', 'disco-title'],
				['discography', 'discography'],
			]}
		>
			<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>
						{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>
			<ResponsiveContext.Consumer>
				{(size) => (
					<Grid
						gridArea='discography'
						align='start'
						columns={{ count: 'fill', size: '300px' }}
						gap='large'
					>
						{selectedAlbums.map((album) => (
							<Album
								key={album.id}
								image={album.image}
								name={album.name}
							/>
						))}
					</Grid>
				)}
			</ResponsiveContext.Consumer>
		</Grid>
	);
};