SockId - sockId from path param & navigate to next sock

.gitignore

@@ -1,2 +1,3 @@
 ~$*.pptx
 node_modules
+.idea

itenium-socks/angular.json

@@ -100,5 +100,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

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">

itenium-socks/src/app/socks/sock.component.ts

@@ -1,34 +1,43 @@
-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, Router } from "@angular/router";
 
 @Component({
   selector: 'app-sock',
   standalone: true,
   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) {}
+  constructor(private socksService: SocksService,
+              private route: ActivatedRoute,
+              private router: Router) {
+  }
 
   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.route.url.subscribe(url => {
+      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();
+  }
+
+  goToNextSock() {
+    let nextSockId = +this.sockId + 1;
+    this.router.navigate(["/socks", nextSockId]);
   }
 }

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;