From cfc628fa5951a851a999867521d037888d35752d Mon Sep 17 00:00:00 2001
From: rui hildt <ruihildt@protonmail.com>
Date: Fri, 24 Jul 2020 14:14:16 +0200
Subject: [PATCH] Add basic album duplicate filtering

---
 src/components/Results.tsx | 18 +++++++++++++++---
 src/interfaces/index.ts    |  1 +
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/Results.tsx b/src/components/Results.tsx
index 52f9c6d..5e4cbff 100644
--- a/src/components/Results.tsx
+++ b/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}
diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts
index eb35373..e2ea8ee 100644
--- a/src/interfaces/index.ts
+++ b/src/interfaces/index.ts
@@ -12,3 +12,4 @@ export interface Artist {
 }
 
 export type Artists = Artist[];
+export type Albums = Album[];