From 36f90fb22fec09de6d24acb0d6c17de1cca600e5 Mon Sep 17 00:00:00 2001
From: stickyPiston <job@jobbel.nl>
Date: Sun, 29 Sep 2019 16:13:17 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=99=EF=B8=8F=20Finished=20up=20the=20l?=
 =?UTF-8?q?ogic=20for=20ArtistsComponent.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/artists/artists.component.html | 23 ++++++++++++-------
 .../components/artists/artists.component.ts   |  8 +++++--
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/app/components/artists/artists.component.html b/src/app/components/artists/artists.component.html
index 1990e0a..1691988 100644
--- a/src/app/components/artists/artists.component.html
+++ b/src/app/components/artists/artists.component.html
@@ -10,16 +10,23 @@
 
 <ng-template #artistInfo>
 
-  <h2>{{ artistData.name }}'s profile</h2>
+  <div *ngIf="artistData" class="container">
 
-  <hr>
+    <h2>{{ artistData.name }}'s profile</h2>
 
-  <h4>{{ artistData.name }}'s songs</h4>
+    <hr>
 
-  <ul>
-    <li *ngFor="let song of songs">
-      {{ song.name }}
-    </li>
-  </ul>
+    <h4>{{ artistData.name }}'s albums</h4>
+    <ul>
+      <li *ngFor="let album of albums">
+        <a [routerLink]="'/albums/' + album.id">{{ album.name }}</a>
+      </li>
+    </ul>
+
+    <h4>{{ artistData.name }}'s songs</h4>
+
+    <app-songlist *ngIf="songs" [songs]="songs"></app-songlist>
+
+  </div>
 
 </ng-template>
diff --git a/src/app/components/artists/artists.component.ts b/src/app/components/artists/artists.component.ts
index 0ac572e..8136ad8 100644
--- a/src/app/components/artists/artists.component.ts
+++ b/src/app/components/artists/artists.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { ApiService } from 'src/app/services/api.service';
-import { Artist, Song } from '../../classes/entities';
+import { Artist, Song, Album } from '../../classes/entities';
 
 @Component({
   selector: 'app-artists',
@@ -13,6 +13,7 @@ export class ArtistsComponent implements OnInit {
   artistData: Artist;
   artists: Promise<Array<Artist>>;
   songs: Array<Song>;
+  albums: Array<Album>;
 
   constructor(
     private api: ApiService,
@@ -29,7 +30,10 @@ export class ArtistsComponent implements OnInit {
         // ... then get artist data ...
         this.api.getArtist(Number(params.get('id'))).then(async res => {
           this.artistData = res;
-          this.songs = await this.api.getSong(res.songs.join());
+          const songs = await this.api.getSong(res.songs.join());
+          this.songs = songs.length ? songs : [songs];
+          const albums = await this.api.getAlbum(res.albums.join());
+          this.albums = albums.length ? albums : [albums];
         });
 
       } else {