error handling

Author: maxime-urbanski

angular.json

@@ -19,6 +19,9 @@
             "polyfills": [
               "zone.js"
             ],
+            "allowedCommonJsDependencies": [
+              "dayjs"
+            ],
             "tsConfig": "tsconfig.app.json",
             "assets": [
               "src/favicon.ico",

src/app/app.component.ts

@@ -1,13 +1,12 @@
 import {Component} from '@angular/core';
 import {RouterOutlet} from '@angular/router';
 import {AsyncPipe} from "@angular/common";
-import {HttpClientModule} from "@angular/common/http";
 import {LayoutComponent} from "@components/common/layout/layout.component";
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, AsyncPipe, HttpClientModule, LayoutComponent],
+  imports: [RouterOutlet, AsyncPipe,  LayoutComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })

src/app/app.config.ts

@@ -1,14 +1,14 @@
-import {ApplicationConfig} from '@angular/core';
+import {ApplicationConfig,provideZoneChangeDetection} from '@angular/core';
 import {provideRouter} from '@angular/router';
 import {routes} from './app.routes';
 import {provideClientHydration} from '@angular/platform-browser';
 import {provideHttpClient, withFetch} from "@angular/common/http";
 
 export const appConfig: ApplicationConfig = {
   providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes),
     provideHttpClient(withFetch()),
     provideClientHydration(),
-
   ]
 };

src/app/components/book/create/create.component.html

@@ -1,14 +1,13 @@
 <div class=" w-full px-4 mt-4">
   <div class="flex items-center justify-between">
-    <a [routerLink]="['/book']"
-       class="text-blue-600 hover:text-blue-800">
-      Back to list
-    </a>
+    <app-back-to-list url="/books" />
   </div>
   @if (isLoading()) {
-  <div class="bg-blue-100 rounded py-4 px-4 text-blue-700 text-sm">Loading ...</div>
-  } @else {
-  <h1 class="text-3xl my-4">Create</h1>
-  <app-form-book [item]="item()" (submit)="onSubmit($event)"/>
+    <app-alert type="loading"/>
+  }
+  @if (error()) {
+  <app-alert type="error" [error]="error"/>
   }
+  <h1 class="text-3xl my-4">Create Book</h1>
+  <app-form-book [item]="item()" (submit)="onSubmit($event)"/>
 </div>

src/app/components/book/create/create.component.ts

@@ -2,15 +2,19 @@ import { Location } from "@angular/common";
 import { Component, inject, signal, WritableSignal } from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { RouterLink } from "@angular/router";
+import { AlertComponent } from "@components/common/alert/alert.component";
+import { BackToListComponent } from "@components/common/back-to-list/back-to-list.component";
 import { DeleteComponent } from "@components/common/delete/delete.component";
 import { FormComponent } from "@components/book/form/form.component";
-import { ApiItem } from "@interface/api";
+import { ApiItem, SubmissionErrors } from "@interface/api";
 import { ApiService } from "@service/api.service";
 
 @Component({
   selector: "app-create-book",
   standalone: true,
   imports: [
+    AlertComponent,
+    BackToListComponent,
     DeleteComponent,
     RouterLink,
     FormsModule,
@@ -24,11 +28,15 @@ export class CreateComponent {
   private location: Location = inject(Location);
   public item: WritableSignal<ApiItem> = signal({} as ApiItem);
   public isLoading: WritableSignal<boolean> = signal(false);
+  public error: WritableSignal<SubmissionErrors | null> = signal(null);
 
   onSubmit(data: any) {
-    return this.apiService.add("/book", this.item()).subscribe((item) => {
-      this.isLoading.set(true);
-      this.location.back();
+    return this.apiService.add("/books", this.item()).subscribe({
+      next: () => {
+        this.isLoading.set(true);
+        this.location.back();
+      },
+      error: (err: SubmissionErrors) => this.error.set(err),
     });
   }
 }

src/app/components/book/edit/edit.component.html

@@ -1,19 +1,20 @@
 <div class="px-4 mt-4">
   <div class="flex items-center justify-end">
-    <a [routerLink]="['/book']"
-       class="text-blue-600 hover:text-blue-800">
-      Back to list
-    </a>
+    <app-back-to-list url="/books"/>
   </div>
   @if (isLoading()) {
-  <div class="bg-blue-100 rounded py-4 px-4 text-blue-700 text-sm">Loading ...</div>
-  } @else if (error()) {
-  <div class="bg-red-100 rounded py-4 px-4 text-blue-700 text-sm">Error ...</div>
-  } @else {
-  <h1 class="text-3xl my-4">Edit {{ item()['name'] }} <span class="text-xl">{{ item()["@id"] }} </span></h1>
-  <app-form-book  [item]="item()"
-                    (submit)="onSubmit($event)"
-                    (delete)="delete()"
-  />
+  <app-alert type="loading"/>
+  }
+  @if (error()) {
+  <app-alert type="error" [error]="error"/>
   }
+  <h1 class="text-3xl my-4">
+    Edit {{ item()['name'] }}
+    <span class="text-xl">{{ item()["@id"] }}</span>
+  </h1>
+  <app-form-book
+    [item]="item()"
+    (submit)="onSubmit($event)"
+    (delete)="delete()"
+  />
 </div>

src/app/components/book/edit/edit.component.ts

@@ -10,15 +10,19 @@ import {
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { Router, RouterLink } from "@angular/router";
+import { AlertComponent } from "@components/common/alert/alert.component";
+import { BackToListComponent } from "@components/common/back-to-list/back-to-list.component";
 import { DeleteComponent } from "@components/common/delete/delete.component";
 import { FormComponent } from "@components/book/form/form.component";
-import { ApiItem } from "@interface/api";
+import { ApiItem, SubmissionErrors } from "@interface/api";
 import { ApiService } from "@service/api.service";
 
 @Component({
   selector: "app-edit-book",
   standalone: true,
   imports: [
+    AlertComponent,
+    BackToListComponent,
     CommonModule,
     DeleteComponent,
     RouterLink,
@@ -31,34 +35,46 @@ import { ApiService } from "@service/api.service";
 export class EditComponent implements OnInit {
   public item: WritableSignal<ApiItem> = signal({} as ApiItem);
   public isLoading: WritableSignal<Boolean> = signal(false);
-  public error: WritableSignal<string> = signal("");
-
+  public error: WritableSignal<SubmissionErrors | null> = signal(null);
   private destroy: DestroyRef = inject(DestroyRef);
   private apiService: ApiService = inject(ApiService);
   private router: Router = inject(Router);
   private location: Location = inject(Location);
 
   ngOnInit() {
+    this.fetchData();
+  }
+
+  public fetchData() {
     const uri = this.router.url.split("/edit")[0];
-    this.isLoading.set(true);
+    this.toggleIsLoading();
     this.apiService
       .fetchData(uri)
       .pipe(takeUntilDestroyed(this.destroy))
-      .subscribe((value) => {
-        this.item.set(value);
-        this.isLoading.set(false);
+      .subscribe({
+        next: (value) => {
+          this.item.set(value);
+        },
+        error: (err) => this.error.set(err),
       });
+    this.toggleIsLoading();
+  }
+
+  public onSubmit(data: any) {
+    return this.apiService.put(this.item()["@id"]!, this.item()).subscribe({
+      next: () => this.location.back(),
+      error: (err) => this.error.set(err),
+    });
   }
 
-  onSubmit(data: any) {
-    return this.apiService
-      .put(this.item()["@id"]!, this.item())
-      .subscribe(() => this.location.back());
+  public delete() {
+    return this.apiService.delete(this.item()["@id"]!).subscribe({
+      next: () => this.location.back(),
+      error: (err) => this.error.set(err),
+    });
   }
 
-  delete() {
-    return this.apiService
-      .delete(this.item()["@id"]!)
-      .subscribe(() => this.location.back());
+  private toggleIsLoading() {
+    return this.isLoading.update((value) => !value);
   }
 }

src/app/components/book/list/list.component.html

@@ -14,18 +14,21 @@ <h1 class="text-3xl mb-2">Book List</h1>
     </div>
   </div>
   @if (isLoading()) {
-  <div class="bg-blue-100 rounded py-4 px-4 text-blue-700 text-sm">Loading ...</div>
-  } @else {
+  <app-alert type="loading"/>
+  }
+  @if (error()) {
+  <app-alert type="error" [error]="error"/>
+  }
+
   <app-table-book [items]="items"
              [bulk]="bulk()"
              (addToBulkList)="addToBulk($event)"
              (selectedAll)="selectedAll()"
   />
-    @if (pagination()) {
-      <app-pagination
-        [pagination]="pagination!"
-        (handleChangePage)="changePage($event)"
-      />
-    }
-  }
+    <app-pagination
+      [pagination]="pagination"
+      (handleChangePage)="changePage($event)"
+    />
+
+  <button (click)="navigateUrl('/bookmarks')">Test</button>
 </div>

src/app/components/book/list/list.component.ts

@@ -1,4 +1,4 @@
-import { AsyncPipe, Location, NgFor, NgIf } from "@angular/common";
+import {NgFor, NgIf} from "@angular/common";
 import {
   Component,
   DestroyRef,
@@ -7,13 +7,17 @@ import {
   signal,
   WritableSignal,
 } from "@angular/core";
-import { Router, RouterLink } from "@angular/router";
-import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
-import { DeleteComponent } from "@components/common/delete/delete.component";
-import { TableComponent } from "@components/book/table/table.component";
-import { ApiItem, Pagination } from "@interface/api";
-import { ApiService } from "@service/api.service";
-import { PaginationComponent } from "@components/common/pagination/pagination.component";
+import {NavigationEnd, Router, RouterLink, Scroll} from "@angular/router";
+import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
+import {AlertComponent} from "@components/common/alert/alert.component";
+import {DeleteComponent} from "@components/common/delete/delete.component";
+import {TableComponent} from "@components/book/table/table.component";
+import {ApiItem, Pagination, SubmissionErrors} from "@interface/api";
+import {ApiService} from "@service/api.service";
+import {PaginationComponent} from "@components/common/pagination/pagination.component";
+import {filter} from "rxjs";
+import * as events from "node:events";
+import {UrlMatcherService} from "@service/url-matcher.service";
 
 @Component({
   selector: "app-list-book",
@@ -25,41 +29,52 @@ import { PaginationComponent } from "@components/common/pagination/pagination.co
     NgIf,
     DeleteComponent,
     PaginationComponent,
+    AlertComponent,
   ],
   templateUrl: "./list.component.html",
 })
 export class ListComponent implements OnInit {
   public isLoading: WritableSignal<Boolean> = signal(false);
   public pagination: WritableSignal<Pagination> = signal({} as Pagination);
   public items: WritableSignal<ApiItem[]> = signal([]);
-  public error: WritableSignal<String> = signal("");
+  public error: WritableSignal<SubmissionErrors | null> = signal(null);
   public bulk: WritableSignal<Array<string>> = signal([]);
   public uri: WritableSignal<string> = signal("/books");
   private apiService: ApiService = inject(ApiService);
+  private urlMatcherService = inject(UrlMatcherService)
   private destroy: DestroyRef = inject(DestroyRef);
+  private router: Router = inject(Router)
 
   ngOnInit() {
-    this.fetchData();
+    this.fetchData()
   }
 
   public fetchData() {
     this.toggleIsLoading();
     this.apiService
       .fetchDataList(this.uri())
+      // Unsubscribe event for more performance
       .pipe(takeUntilDestroyed(this.destroy))
-      .subscribe((items) => {
-        this.toggleIsLoading();
-        if (items["hydra:view"]) this.pagination.set(items["hydra:view"]);
-        this.items.set(items["hydra:member"]);
+      .subscribe({
+        next: (items) => {
+          if (items["hydra:view"]) this.pagination.set(items["hydra:view"]);
+          this.items.set(items["hydra:member"]);
+        },
+        error: (err: SubmissionErrors) => this.error.set(err),
       });
+    this.toggleIsLoading();
+    this.router.events.pipe(
+      filter(event => event instanceof NavigationEnd)
+    ).subscribe(() => {
+      window.scrollTo(0, 0);
+    });
   }
 
   public addToBulk(id: string) {
     if (this.isInBulkList(id)) {
       const bulkFilter = this.bulk().filter((element) => element !== id);
       return this.bulk.set(bulkFilter);
     }
-
     this.bulk.update((uri) => [...uri, id]);
   }
 
@@ -76,16 +91,26 @@ export class ListComponent implements OnInit {
   public delete() {
     Promise.all(this.bulk()).then((items) =>
       items.forEach((uri) =>
-        this.apiService.delete(uri).subscribe(() => {
-          window.location.reload();
+        this.apiService.delete(uri).subscribe({
+          next: () => {
+            window.location.reload();
+          },
+          error: (err: SubmissionErrors) => this.error.set(err),
         })
       )
     );
   }
 
+  async navigateUrl(url: string) {
+    await this.router
+      .navigate([url])
+      .then(res => res ? console.log('success', res) : console.log('error', res))
+  }
+
   public changePage(uri: string) {
     this.uri.set(uri);
     this.fetchData();
+
   }
 
   private toggleIsLoading() {