Add basic album duplicate filtering

src/components/Results.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Box, Grid, ResponsiveContext, Heading } from 'grommet';
 
 import { Album } from './Album';
-import { Artists } from '../interfaces';
+import { Artists, Albums } from '../interfaces';
 import { Other } from './Other';
 
 export const Results = ({
@@ -15,8 +15,20 @@ export const Results = ({
 	const {
 		name: selectedName,
 		image: selectedImage,
-		albums: selectedAlbums,
+		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
@@ -62,7 +74,7 @@ export const Results = ({
 			<ResponsiveContext.Consumer>
 				{(size) => (
 					<Box gridArea='other' direction='row' wrap>
-						{artists.slice(1, artists.length).map((artist) => (
+						{otherArtists.map((artist) => (
 							<Other
 								key={artist.id}
 								image={artist.image}

src/interfaces/index.ts

@@ -12,3 +12,4 @@ export interface Artist {
 }
 
 export type Artists = Artist[];
+export type Albums = Album[];