Implemented reviews in book details. Integrated with review-service

book-bazaar/src/app/app.config.ts

@@ -1,5 +1,5 @@
 import { ApplicationConfig, inject, provideAppInitializer, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
-import { provideRouter, withViewTransitions } from '@angular/router';
+import { provideRouter, withInMemoryScrolling, withViewTransitions } from '@angular/router';
 
 import { routes } from './app.routes';
 import { provideHttpClient, withInterceptors } from '@angular/common/http';
@@ -14,7 +14,13 @@ export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideZonelessChangeDetection(),
-    provideRouter(routes, withViewTransitions()),
+    provideRouter(
+      routes,
+      withViewTransitions(),
+      withInMemoryScrolling({
+        scrollPositionRestoration: 'disabled',
+        anchorScrolling: 'enabled'
+      })),
 
     provideHttpClient(withInterceptors([includeBearerTokenInterceptor])),
 

book-bazaar/src/app/app.routes.ts

@@ -1,7 +1,9 @@
 import { Routes } from '@angular/router';
-import {Home} from './components/home/home';
-import {SearchBooks} from './components/search-books/search-books';
-import {BookDetails} from './components/book-details/book-details';
+import { Home } from './components/home/home';
+import { SearchBooks } from './components/search-books/search-books';
+import { BookDetails } from './components/book-details/book-details';
+import { ReviewForm } from './components/review-form/review-form';
+import { MyReviews } from './components/my-reviews/my-reviews';
 
 export const routes: Routes = [
   {
@@ -12,5 +14,11 @@ export const routes: Routes = [
   },
   {
     path: "book-details/:bookId", component: BookDetails
+  },
+  {
+    path: "book-details/:bookId/review", component: ReviewForm
+  },
+  {
+    path: "my-reviews", component: MyReviews
   }
 ];

book-bazaar/src/app/app.ts

@@ -1,7 +1,9 @@
-import { Component, signal } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { Component, inject, signal } from '@angular/core';
+import { NavigationEnd, Router, RouterOutlet, Scroll } from '@angular/router';
 import {Header} from './components/header/header';
 import {Footer} from './components/footer/footer';
+import { ViewportScroller } from '@angular/common';
+import { filter } from 'rxjs';
 
 @Component({
   selector: 'app-root',
@@ -10,4 +12,39 @@ import {Footer} from './components/footer/footer';
   styleUrl: './app.css'
 })
 export class App {
+  private router = inject(Router);
+  private viewportScroller = inject(ViewportScroller);
+
+  private currentPath = '';
+
+  constructor() {
+    this.router.events.pipe(
+      filter((e): e is Scroll => e instanceof Scroll)
+    ).subscribe(e => {
+
+      if (e.position) {
+        this.viewportScroller.scrollToPosition(e.position);
+      } else if (e.anchor) {
+        this.viewportScroller.scrollToAnchor(e.anchor);
+      } else {
+        const url = (e.routerEvent instanceof NavigationEnd) 
+          ? e.routerEvent.urlAfterRedirects 
+          : e.routerEvent.url;
+
+        const newPath = this.stripParams(url);
+
+        // Скролимо нагору ТІЛЬКИ якщо змінився шлях (наприклад Home -> Search)
+        // Якщо шлях той самий (/search -> /search?genre=Fantasy), скрол не чіпаємо
+        if (newPath !== this.currentPath) {
+          this.viewportScroller.scrollToPosition([0, 0]);
+        }
+
+        this.currentPath = newPath;
+      }
+    });
+  }
+
+  private stripParams(url: string): string {
+    return url.split('?')[0];
+  }
 }

book-bazaar/src/app/components/book-card/book-card.ts

@@ -15,26 +15,34 @@ import { CurrencyPipe } from '@angular/common';
   styleUrl: './book-card.css',
 })
 export class BookCard {
-    book = input.required<Book>();
-
-    private router = inject(Router);
+  book = input.required<Book>();
 
-    searchByGenre(event: Event, genre: Genre) {
-      event.stopPropagation(); // Зупиняємо спливання події, щоб не спрацював клік по картці
-      event.preventDefault();  // Запобігаємо дефолтній поведінці посилання
-
-      if (genre.name) {
-        this.router.navigate(['/search'], { queryParams: { genre: genre.name } });
-      }
+  private router = inject(Router);
+
+  searchByGenre(event: Event, genre: Genre) {
+    event.stopPropagation(); // Зупиняємо спливання події, щоб не спрацював клік по картці
+    event.preventDefault();  // Запобігаємо дефолтній поведінці посилання
+
+    if (genre.name) {
+      this.router.navigate(['/search'], { queryParams: { genre: genre.name } }).then(() => window.scroll({
+        top: 450,
+        left: 0,
+        behavior: 'smooth'
+      }));
     }
+  }
 
-    // Перехід на пошук по категорії
-    searchByCategory(event: Event, category: Category) {
-      event.stopPropagation();
-      event.preventDefault();
+  // Перехід на пошук по категорії
+  searchByCategory(event: Event, category: Category) {
+    event.stopPropagation();
+    event.preventDefault();
 
-      if (category.name) {
-        this.router.navigate(['/search'], { queryParams: { category: category.name } });
-      }
+    if (category.name) {
+      this.router.navigate(['/search'], { queryParams: { category: category.name } }).then(() => window.scroll({
+        top: 450,
+        left: 0,
+        behavior: 'smooth'
+      }));
     }
+  }
 }