From 1f7e4c34f42a8bc19500829571b7d1e3e65e7e59 Mon Sep 17 00:00:00 2001
From: ymanfroy <yannick.manfroy@telenetgroup.be>
Date: Fri, 31 May 2024 10:16:27 +0200
Subject: [PATCH 1/3] Exercise 1 - Currency

---
 itenium-socks/src/app/app.component.ts          | 12 ++++++++++--
 itenium-socks/src/app/socks/shop.component.html |  2 +-
 itenium-socks/src/app/socks/shop.component.ts   |  6 +++---
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/itenium-socks/src/app/app.component.ts b/itenium-socks/src/app/app.component.ts
index 8ad7283..d440cc3 100644
--- a/itenium-socks/src/app/app.component.ts
+++ b/itenium-socks/src/app/app.component.ts
@@ -1,5 +1,7 @@
-import { Component } from '@angular/core';
+import {Component, LOCALE_ID} from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { registerLocaleData } from '@angular/common';
+import localeNlBe from '@angular/common/locales/nl-BE';
 
 @Component({
   selector: 'app-root',
@@ -7,6 +9,12 @@ import { RouterOutlet } from '@angular/router';
   imports: [
     RouterOutlet,
   ],
+  providers: [{ provide: LOCALE_ID, useValue: 'nl-BE' }],
   templateUrl: './app.component.html',
 })
-export class AppComponent {}
+export class AppComponent {
+
+  constructor() {
+    registerLocaleData(localeNlBe, 'nl-BE');
+  }
+}
diff --git a/itenium-socks/src/app/socks/shop.component.html b/itenium-socks/src/app/socks/shop.component.html
index a0139e2..2e9e5c8 100644
--- a/itenium-socks/src/app/socks/shop.component.html
+++ b/itenium-socks/src/app/socks/shop.component.html
@@ -14,7 +14,7 @@ <h2>
             </div>
             <div class="detail-box">
               <h6>{{ sock.name }}</h6>
-              <h6><span>{{ sock.price }}</span></h6>
+              <h6><span>{{ sock.price | currency: 'EUR':'symbol':'1.2-2'}}</span></h6>
             </div>
             <div class="new">
               <span class="favourite" [style.color]="sock.color"><i class="fa fa-star"></i></span>
diff --git a/itenium-socks/src/app/socks/shop.component.ts b/itenium-socks/src/app/socks/shop.component.ts
index 33c897b..ab8ba17 100644
--- a/itenium-socks/src/app/socks/shop.component.ts
+++ b/itenium-socks/src/app/socks/shop.component.ts
@@ -1,13 +1,13 @@
-import { Component } from '@angular/core';
+import {Component, LOCALE_ID} from '@angular/core';
 import { SocksService } from './socks.service';
 import { Observable } from 'rxjs';
 import { Sock } from './sock.model';
-import { AsyncPipe, NgFor } from '@angular/common';
+import {AsyncPipe, CurrencyPipe, NgFor} from '@angular/common';
 
 @Component({
   selector: 'app-shop',
   standalone: true,
-  imports: [NgFor, AsyncPipe],
+  imports: [NgFor, AsyncPipe, CurrencyPipe],
   templateUrl: './shop.component.html'
 })
 export class ShopComponent {

From 727bf8e2d3da59ab10537931e17b49f4b90939ce Mon Sep 17 00:00:00 2001
From: ymanfroy <yannick.manfroy@telenetgroup.be>
Date: Fri, 31 May 2024 10:54:51 +0200
Subject: [PATCH 2/3] Revert "Exercise 1 - Currency"

This reverts commit 1f7e4c34f42a8bc19500829571b7d1e3e65e7e59.
---
 itenium-socks/src/app/app.component.ts          | 12 ++----------
 itenium-socks/src/app/socks/shop.component.html |  2 +-
 itenium-socks/src/app/socks/shop.component.ts   |  6 +++---
 3 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/itenium-socks/src/app/app.component.ts b/itenium-socks/src/app/app.component.ts
index d440cc3..8ad7283 100644
--- a/itenium-socks/src/app/app.component.ts
+++ b/itenium-socks/src/app/app.component.ts
@@ -1,7 +1,5 @@
-import {Component, LOCALE_ID} from '@angular/core';
+import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { registerLocaleData } from '@angular/common';
-import localeNlBe from '@angular/common/locales/nl-BE';
 
 @Component({
   selector: 'app-root',
@@ -9,12 +7,6 @@ import localeNlBe from '@angular/common/locales/nl-BE';
   imports: [
     RouterOutlet,
   ],
-  providers: [{ provide: LOCALE_ID, useValue: 'nl-BE' }],
   templateUrl: './app.component.html',
 })
-export class AppComponent {
-
-  constructor() {
-    registerLocaleData(localeNlBe, 'nl-BE');
-  }
-}
+export class AppComponent {}
diff --git a/itenium-socks/src/app/socks/shop.component.html b/itenium-socks/src/app/socks/shop.component.html
index 2e9e5c8..a0139e2 100644
--- a/itenium-socks/src/app/socks/shop.component.html
+++ b/itenium-socks/src/app/socks/shop.component.html
@@ -14,7 +14,7 @@ <h2>
             </div>
             <div class="detail-box">
               <h6>{{ sock.name }}</h6>
-              <h6><span>{{ sock.price | currency: 'EUR':'symbol':'1.2-2'}}</span></h6>
+              <h6><span>{{ sock.price }}</span></h6>
             </div>
             <div class="new">
               <span class="favourite" [style.color]="sock.color"><i class="fa fa-star"></i></span>
diff --git a/itenium-socks/src/app/socks/shop.component.ts b/itenium-socks/src/app/socks/shop.component.ts
index ab8ba17..33c897b 100644
--- a/itenium-socks/src/app/socks/shop.component.ts
+++ b/itenium-socks/src/app/socks/shop.component.ts
@@ -1,13 +1,13 @@
-import {Component, LOCALE_ID} from '@angular/core';
+import { Component } from '@angular/core';
 import { SocksService } from './socks.service';
 import { Observable } from 'rxjs';
 import { Sock } from './sock.model';
-import {AsyncPipe, CurrencyPipe, NgFor} from '@angular/common';
+import { AsyncPipe, NgFor } from '@angular/common';
 
 @Component({
   selector: 'app-shop',
   standalone: true,
-  imports: [NgFor, AsyncPipe, CurrencyPipe],
+  imports: [NgFor, AsyncPipe],
   templateUrl: './shop.component.html'
 })
 export class ShopComponent {

From b0f7d5191ab909fa4b26f89910eba7d1e0c1324a Mon Sep 17 00:00:00 2001
From: ymanfroy <yannick.manfroy@telenetgroup.be>
Date: Fri, 31 May 2024 14:43:19 +0200
Subject: [PATCH 3/3] Templates - sock reviews

---
 .../src/app/socks/sock-reviews.component.html          | 10 ++++++++++
 itenium-socks/src/app/socks/sock-reviews.component.ts  |  9 +++++++--
 itenium-socks/src/app/socks/sock.component.html        |  2 +-
 itenium-socks/src/app/socks/sock.component.ts          |  8 +++++---
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/itenium-socks/src/app/socks/sock-reviews.component.html b/itenium-socks/src/app/socks/sock-reviews.component.html
index 696aab3..40de199 100644
--- a/itenium-socks/src/app/socks/sock-reviews.component.html
+++ b/itenium-socks/src/app/socks/sock-reviews.component.html
@@ -1,3 +1,12 @@
+@if ((reviews$ | async)?.length === 0){
+  <div class="container">
+    <div class="heading_container heading_center">
+      <h3>
+        Be the first to review these fantastic socks!
+      </h3>
+    </div>
+  </div>
+} @else {
 <section class="client_section layout_padding" style="padding-top: 0">
   <div class="container">
     <div class="heading_container heading_center">
@@ -40,3 +49,4 @@ <h6>On {{ review.added }} by {{ review.email }}</h6>
     </div>
   </div>
 </section>
+}
diff --git a/itenium-socks/src/app/socks/sock-reviews.component.ts b/itenium-socks/src/app/socks/sock-reviews.component.ts
index fe89cb9..5380823 100644
--- a/itenium-socks/src/app/socks/sock-reviews.component.ts
+++ b/itenium-socks/src/app/socks/sock-reviews.component.ts
@@ -1,5 +1,5 @@
 import { AsyncPipe, NgFor } from '@angular/common';
-import { Component } from '@angular/core';
+import {Component, Input} from '@angular/core';
 import { Observable } from 'rxjs';
 import { SocksService } from './socks.service';
 import { Review } from './sock.model';
@@ -11,11 +11,16 @@ import { Review } from './sock.model';
   templateUrl: './sock-reviews.component.html'
 })
 export class SockReviewsComponent {
+  @Input() sockId!: number | undefined;
   reviews$!: Observable<Review[]>;
 
   constructor(private socksService: SocksService) {}
 
   ngOnInit(): void {
-    this.reviews$ = this.socksService.getLatestReviews();
+    if(this.sockId){
+      this.reviews$ = this.socksService.getSockReviews(this.sockId);
+    } else {
+      this.reviews$ = this.socksService.getLatestReviews();
+    }
   }
 }
diff --git a/itenium-socks/src/app/socks/sock.component.html b/itenium-socks/src/app/socks/sock.component.html
index b40f9d2..aaf704d 100644
--- a/itenium-socks/src/app/socks/sock.component.html
+++ b/itenium-socks/src/app/socks/sock.component.html
@@ -47,7 +47,7 @@ <h1 style="margin-top: 25px;">{{ sock.name }}</h1>
   </div>
 </section>
 
-
+<app-sock-reviews [sockId]="this.sockId"></app-sock-reviews>
 
 <section class="contact_section" style="margin-bottom: 36px">
   <div class="container px-0">
diff --git a/itenium-socks/src/app/socks/sock.component.ts b/itenium-socks/src/app/socks/sock.component.ts
index 1618e41..5b63714 100644
--- a/itenium-socks/src/app/socks/sock.component.ts
+++ b/itenium-socks/src/app/socks/sock.component.ts
@@ -3,22 +3,24 @@ import { Observable } from 'rxjs';
 import { Sock } from './sock.model';
 import { SocksService } from './socks.service';
 import { AsyncPipe, NgIf, TitleCasePipe } from '@angular/common';
+import { SockReviewsComponent } from "./sock-reviews.component";
 
 @Component({
   selector: 'app-sock',
   standalone: true,
-  imports: [NgIf, AsyncPipe, TitleCasePipe],
+  imports: [NgIf, AsyncPipe, TitleCasePipe, SockReviewsComponent],
   templateUrl: './sock.component.html'
 })
 export class SockComponent {
   sock$!: Observable<Sock>;
+  sockId: number | undefined;
 
   constructor(private socksService: SocksService) {}
 
   ngOnInit(): void {
     // HACK: This is not the way to get the sockId!!
-    const sockId = +window.location.pathname.split('/')[2];
-    this.sock$ = this.socksService.getById(sockId);
+    this.sockId = +window.location.pathname.split('/')[2];
+    this.sock$ = this.socksService.getById(this.sockId);
   }
 
   buy(): void {