From 4fa4ba708e840e3c7d0174ad271dd6bbb49fd4dc Mon Sep 17 00:00:00 2001
From: stickyPiston <job@jobbel.nl>
Date: Sat, 21 Sep 2019 16:48:15 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Created=20draft=20for=20ArtistCompo?=
 =?UTF-8?q?nent.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/app-routing.module.ts                 |  4 +--
 .../components/artists/artists.component.html | 34 ++++++++++++++++++-
 .../components/artists/artists.component.ts   | 28 ++++++++++++++-
 3 files changed, 62 insertions(+), 4 deletions(-)

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 2b4ee75..d65b5cd 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -7,9 +7,9 @@ import { AlbumsComponent } from './components/albums/albums.component';
 const routes: Routes = [
   { path: '', component: HomeComponent },
   { path: 'artists/:id', component: ArtistsComponent },
-  { path: 'artists/', component: ArtistsComponent },
+  { path: 'artists', component: ArtistsComponent },
   { path: 'albums/:id', component: AlbumsComponent },
-  { path: 'albums/', component: AlbumsComponent }
+  { path: 'albums', component: AlbumsComponent }
 ];
 
 @NgModule({
diff --git a/src/app/components/artists/artists.component.html b/src/app/components/artists/artists.component.html
index e1b29e9..3283436 100644
--- a/src/app/components/artists/artists.component.html
+++ b/src/app/components/artists/artists.component.html
@@ -1 +1,33 @@
-<p>artists works!</p>
+<ng-container *ngIf="( artists | async ) as artists; else artistInfo">
+
+  <ul>
+    <li *ngFor="let artist of artists.result">
+      <a [routerLink]="'/artists/' + artist.id">{{ artist.name }}</a>
+    </li>
+  </ul>
+
+</ng-container>
+
+<ng-template #artistInfo>
+
+  <div *ngIf="( artistData | async ) as data">
+
+    <h1>{{ data.result[0].name }}'s profile</h1>
+
+    <h4>{{ data.result[0].name }}'s albums</h4>
+    <ul>
+      <li *ngFor="let album of data.result[0].albums">
+        {{ album.name }}
+      </li>
+    </ul>
+
+    <h4>{{ data.result[0].name }}'s songs</h4>
+    <ul>
+      <li *ngFor="let song of data.result[0].songs">
+        {{ song.name }}
+      </li>
+    </ul>
+
+  </div>
+
+</ng-template>
diff --git a/src/app/components/artists/artists.component.ts b/src/app/components/artists/artists.component.ts
index 038905a..8b04530 100644
--- a/src/app/components/artists/artists.component.ts
+++ b/src/app/components/artists/artists.component.ts
@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { DataService } from 'src/app/services/data.service';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-artists',
@@ -7,9 +9,33 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ArtistsComponent implements OnInit {
 
-  constructor() { }
+  artistData;
+  artists;
+
+  constructor(
+    private data: DataService,
+    private route: ActivatedRoute
+  ) { }
 
   ngOnInit() {
+
+    this.route.paramMap.subscribe(params => {
+
+      // If the id argument is given...
+      if (params.has('id')) {
+
+        // ... then get artist data ...
+        this.artistData = this.data.getArtist(params.get('id'));
+
+      } else {
+
+        // Otherwise, get all artists and list them out.
+        this.artists = this.data.getAllArtists();
+
+      }
+
+    });
+
   }
 
 }