From 44529f598d6631487bf4048661045b631a805e83 Mon Sep 17 00:00:00 2001
From: Tim Bogaert <tim.bogaert.92@gmail.com>
Date: Fri, 31 May 2024 11:29:02 +0200
Subject: [PATCH 1/4] gitignore .idea

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index d9eb71a..05644c2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 ~$*.pptx
 node_modules
+.idea

From 31065456274f0ed4f1113b29373064fbdefb3b8b Mon Sep 17 00:00:00 2001
From: Tim Bogaert <tim.bogaert.92@gmail.com>
Date: Fri, 31 May 2024 14:07:12 +0200
Subject: [PATCH 2/4] cli-analytics false

---
 itenium-socks/angular.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/itenium-socks/angular.json b/itenium-socks/angular.json
index e7cfa50..f61caf2 100644
--- a/itenium-socks/angular.json
+++ b/itenium-socks/angular.json
@@ -100,5 +100,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

From a40806e7302e8850fde0afc968dcd2600a0f0e13 Mon Sep 17 00:00:00 2001
From: Tim Bogaert <tim.bogaert.92@gmail.com>
Date: Fri, 31 May 2024 14:26:27 +0200
Subject: [PATCH 3/4] Sock detail page uses ActivatedRoute for pathparam id

---
 itenium-socks/src/app/socks/sock.component.ts | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/itenium-socks/src/app/socks/sock.component.ts b/itenium-socks/src/app/socks/sock.component.ts
index 1618e41..2cb750d 100644
--- a/itenium-socks/src/app/socks/sock.component.ts
+++ b/itenium-socks/src/app/socks/sock.component.ts
@@ -3,6 +3,7 @@ import { Observable } from 'rxjs';
 import { Sock } from './sock.model';
 import { SocksService } from './socks.service';
 import { AsyncPipe, NgIf, TitleCasePipe } from '@angular/common';
+import { ActivatedRoute } from "@angular/router";
 
 @Component({
   selector: 'app-sock',
@@ -11,24 +12,24 @@ import { AsyncPipe, NgIf, TitleCasePipe } from '@angular/common';
   templateUrl: './sock.component.html'
 })
 export class SockComponent {
+  sockId: number = -1;
   sock$!: Observable<Sock>;
 
-  constructor(private socksService: SocksService) {}
+  constructor(private socksService: SocksService,
+              private route: ActivatedRoute) {
+  }
 
   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 = this.route.snapshot.params['id'];
+    this.sock$ = this.socksService.getById(this.sockId);
   }
 
   buy(): void {
-    const sockId = +window.location.pathname.split('/')[2];
-    this.socksService.buySocks(sockId).subscribe();
+    this.socksService.buySocks(this.sockId).subscribe();
   }
 
   addReview(): void {
     // TODO: Bind the form!
-    const sockId = +window.location.pathname.split('/')[2];
-    this.socksService.addReview(sockId, 'my review', 5).subscribe();
+    this.socksService.addReview(this.sockId, 'my review', 5).subscribe();
   }
 }

From 32d67f35b0a9bed0949166a360918b3cf11c0d10 Mon Sep 17 00:00:00 2001
From: Tim Bogaert <tim.bogaert.92@gmail.com>
Date: Fri, 31 May 2024 14:54:31 +0200
Subject: [PATCH 4/4] Sock detail page: navigate to next sock

---
 .../src/app/socks/sock.component.html         |  5 +++++
 itenium-socks/src/app/socks/sock.component.ts | 20 +++++++++++++------
 itenium-socks/src/styles.scss                 | 12 +++++++++++
 3 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/itenium-socks/src/app/socks/sock.component.html b/itenium-socks/src/app/socks/sock.component.html
index b40f9d2..9e7302c 100644
--- a/itenium-socks/src/app/socks/sock.component.html
+++ b/itenium-socks/src/app/socks/sock.component.html
@@ -15,6 +15,11 @@
 
 <section class="shop_section layout_padding" style="padding-top: 14px" *ngIf="sock$ | async as sock">
   <div class="container">
+    <div class="row">
+      <button type="button" class="next-item" (click)="goToNextSock()">
+        Next sock
+      </button>
+    </div>
     <div class="row">
       <div class="col-sm-6 col-md-6 col-lg-6">
         <div class="box">
diff --git a/itenium-socks/src/app/socks/sock.component.ts b/itenium-socks/src/app/socks/sock.component.ts
index 2cb750d..2f14559 100644
--- a/itenium-socks/src/app/socks/sock.component.ts
+++ b/itenium-socks/src/app/socks/sock.component.ts
@@ -1,9 +1,9 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Sock } from './sock.model';
 import { SocksService } from './socks.service';
 import { AsyncPipe, NgIf, TitleCasePipe } from '@angular/common';
-import { ActivatedRoute } from "@angular/router";
+import { ActivatedRoute, Router } from "@angular/router";
 
 @Component({
   selector: 'app-sock',
@@ -11,17 +11,20 @@ import { ActivatedRoute } from "@angular/router";
   imports: [NgIf, AsyncPipe, TitleCasePipe],
   templateUrl: './sock.component.html'
 })
-export class SockComponent {
+export class SockComponent implements OnInit {
   sockId: number = -1;
   sock$!: Observable<Sock>;
 
   constructor(private socksService: SocksService,
-              private route: ActivatedRoute) {
+              private route: ActivatedRoute,
+              private router: Router) {
   }
 
   ngOnInit(): void {
-    this.sockId = this.route.snapshot.params['id'];
-    this.sock$ = this.socksService.getById(this.sockId);
+    this.route.url.subscribe(url => {
+      this.sockId = this.route.snapshot.params['id'];
+      this.sock$ = this.socksService.getById(this.sockId);
+    })
   }
 
   buy(): void {
@@ -32,4 +35,9 @@ export class SockComponent {
     // TODO: Bind the form!
     this.socksService.addReview(this.sockId, 'my review', 5).subscribe();
   }
+
+  goToNextSock() {
+    let nextSockId = +this.sockId + 1;
+    this.router.navigate(["/socks", nextSockId]);
+  }
 }
diff --git a/itenium-socks/src/styles.scss b/itenium-socks/src/styles.scss
index 3cc7a27..e98adaf 100644
--- a/itenium-socks/src/styles.scss
+++ b/itenium-socks/src/styles.scss
@@ -407,6 +407,18 @@ a:focus {
 }
 
 
+.next-item {
+  display: inline-block;
+  padding: 10px 40px;
+  background-color: #f000ff;
+  color: #f5ca1e;
+  border: 1px solid #f000ff;
+  border-radius: 5px;
+  -webkit-transition: all .3s;
+  transition: all .3s;
+  margin-top: 25px;
+  text-transform: uppercase;
+}
 
 .buy-socks {
   display: inline-block;