Experiments with Resource

book-rating/package.json

@@ -11,22 +11,22 @@
   "private": true,
   "dependencies": {
     "@angular-schule/workshop-styles": "^1.5.0",
-    "@angular/animations": "^18.2.0",
-    "@angular/common": "^18.2.0",
-    "@angular/compiler": "^18.2.0",
-    "@angular/core": "^18.2.0",
-    "@angular/forms": "^18.2.0",
-    "@angular/platform-browser": "^18.2.0",
-    "@angular/platform-browser-dynamic": "^18.2.0",
-    "@angular/router": "^18.2.0",
+    "@angular/animations": "^19.0.0-next.11",
+    "@angular/common": "^19.0.0-next.11",
+    "@angular/compiler": "^19.0.0-next.11",
+    "@angular/core": "^19.0.0-next.11",
+    "@angular/forms": "^19.0.0-next.11",
+    "@angular/platform-browser": "^19.0.0-next.11",
+    "@angular/platform-browser-dynamic": "^19.0.0-next.11",
+    "@angular/router": "^19.0.0-next.11",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.10"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.3",
-    "@angular/cli": "^18.2.3",
-    "@angular/compiler-cli": "^18.2.0",
+    "@angular-devkit/build-angular": "^19.0.0-next.13",
+    "@angular/cli": "^19.0.0-next.13",
+    "@angular/compiler-cli": "^19.0.0-next.11",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.2.0",
     "karma": "~6.4.0",

book-rating/src/app/app.component.ts

@@ -2,11 +2,10 @@ import { Component } from '@angular/core';
 import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
-  selector: 'app-root',
-  standalone: true,
-  imports: [RouterOutlet, RouterLink],
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.scss'
+    selector: 'app-root',
+    imports: [RouterOutlet, RouterLink],
+    templateUrl: './app.component.html',
+    styleUrl: './app.component.scss',
 })
 export class AppComponent {
   title = 'Book Rating';

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

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

book-rating/src/app/books/book-create/book-create.component.ts

@@ -6,11 +6,10 @@ import { Book } from '../shared/book';
 import { Router } from '@angular/router';
 
 @Component({
-  selector: 'app-book-create',
-  standalone: true,
-  imports: [ReactiveFormsModule, JsonPipe],
-  templateUrl: './book-create.component.html',
-  styleUrl: './book-create.component.scss'
+    selector: 'app-book-create',
+    imports: [ReactiveFormsModule, JsonPipe],
+    templateUrl: './book-create.component.html',
+    styleUrl: './book-create.component.scss',
 })
 export class BookCreateComponent {
 

book-rating/src/app/books/book-details/book-details.component.html

@@ -3,7 +3,7 @@ <h2>{{ book.title }}</h2>
   <p>{{ book.description }}</p>
 }-->
 
-@if (bookx(); as book) {
+@if (bookResource.value(); as book) {
   <h2>{{ book.title }}</h2>
   <p>{{ book.description }}</p>
 }

book-rating/src/app/books/book-details/book-details.component.ts

@@ -1,30 +1,29 @@
-import { Component, effect, inject, signal } from '@angular/core';
+import { Component, inject, input, resource, signal } from '@angular/core';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { BookStoreService } from '../shared/book-store.service';
-import { Book } from '../shared/book';
-import { concatMap, filter, map, Observable, switchMap } from 'rxjs';
-import { AsyncPipe } from '@angular/common';
-import { toSignal } from '@angular/core/rxjs-interop';
+import { firstValueFrom } from 'rxjs';
+import { rxResource } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'app-book-details',
-  standalone: true,
-  imports: [RouterLink, AsyncPipe],
+  imports: [RouterLink],
   templateUrl: './book-details.component.html',
-  styleUrl: './book-details.component.scss'
+  styleUrl: './book-details.component.scss',
 })
 export class BookDetailsComponent {
-
-  private route = inject(ActivatedRoute);
   private bs = inject(BookStoreService);
+  isbn = input.required<string>();
 
-  // book?: Book;
-  // xbook = signal<Book | undefined>(undefined);
-  book$: Observable<Book> = this.route.paramMap.pipe(
-    map(params => params.get('isbn')),
-    filter(isbn => isbn !== null),
-    switchMap(isbn => this.bs.getSingle(isbn))
-  );
+  /*bookResource = resource({
+    request: this.isbn,
+    loader: ({ request }) => {
+      return firstValueFrom(this.bs.getSingle(request))
+      // return firstValueFrom(this.bs.getSingle(this.isbn()))
+    }
+  });*/
 
-  bookx = toSignal(this.book$);
+  bookResource = rxResource({
+    request: this.isbn,
+    loader: ({ request }) => this.bs.getSingle(request)
+  });
 }

book-rating/src/app/books/book-search/book-search.component.html

@@ -2,7 +2,7 @@
   <input type="search" class="form-control" [formControl]="searchControl">
 </div>
 
-@if (searchResult(); as books) {
+@if (results.value(); as books) {
   <h2>Ergebnisse</h2>
   <ul>
     @for (b of books; track b.isbn) {

book-rating/src/app/books/book-search/book-search.component.ts

@@ -1,27 +1,29 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, resource } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { debounceTime, filter, mergeMap, switchMap } from 'rxjs';
+import { debounceTime, distinctUntilChanged, filter, mergeMap, switchMap } from 'rxjs';
 import { BookStoreService } from '../shared/book-store.service';
-import { toSignal } from '@angular/core/rxjs-interop';
+import { rxResource, toSignal } from '@angular/core/rxjs-interop';
 
 @Component({
-  selector: 'app-book-search',
-  standalone: true,
-  imports: [ReactiveFormsModule],
-  templateUrl: './book-search.component.html',
-  styleUrl: './book-search.component.scss',
+    selector: 'app-book-search',
+    imports: [ReactiveFormsModule],
+    templateUrl: './book-search.component.html',
+    styleUrl: './book-search.component.scss',
 })
 export class BookSearchComponent {
   searchControl = new FormControl('', { nonNullable: true });
   private bs = inject(BookStoreService);
 
-  // ZUSATZAUFGABE: bei leerem Suchbegriff Liste leeren
-  searchResult = toSignal(
+  private searchTerm = toSignal(
     this.searchControl.valueChanges.pipe(
       debounceTime(500),
       filter((e) => e.length >= 3),
-      switchMap((term) => this.bs.search(term)),
-      // ZUSATZAUFGABE: Buchliste sortieren
+      distinctUntilChanged()
     )
   );
+
+  results = rxResource({
+    request: this.searchTerm,
+    loader: ({ request: term }) => this.bs.search(term)
+  });
 }

book-rating/src/app/books/book/book.component.ts

@@ -5,11 +5,10 @@ import { CurrencyPipe } from '@angular/common';
 import { RouterLink } from '@angular/router';
 
 @Component({
-  selector: 'app-book',
-  standalone: true,
-  imports: [RatingComponent, CurrencyPipe, RouterLink],
-  templateUrl: './book.component.html',
-  styleUrl: './book.component.scss'
+    selector: 'app-book',
+    imports: [RatingComponent, CurrencyPipe, RouterLink],
+    templateUrl: './book.component.html',
+    styleUrl: './book.component.scss',
 })
 export class BookComponent {
   // Hier fließen Daten von der Elternkomponente hinein

book-rating/src/app/books/dashboard/dashboard.component.html

@@ -1,4 +1,4 @@
-@for (b of books(); track b.isbn) {
+@for (b of booksResource.value(); track b.isbn) {
 <app-book
   [book]="b"
   [maxRating]="5"
@@ -9,7 +9,7 @@
 }
 
 
-<p>Anzahl Bücher: {{ books().length }}</p>
+<p>Anzahl Bücher: {{ booksResource.value()?.length }}</p>
 
 
-{{ books | json }}
+{{ booksResource.value() | json }}

book-rating/src/app/books/dashboard/dashboard.component.ts

@@ -1,39 +1,25 @@
-import { Component, inject, signal } from '@angular/core';
+import { Component, inject, resource, signal } from '@angular/core';
 import { Book } from '../shared/book';
 import { BookComponent } from '../book/book.component';
 import { BookRatingService } from '../shared/book-rating.service';
 import { JsonPipe } from '@angular/common';
 import { BookStoreService } from '../shared/book-store.service';
-import { HttpErrorResponse } from '@angular/common/http';
+import { firstValueFrom } from 'rxjs';
 
 @Component({
-  selector: 'app-dashboard',
-  standalone: true,
-  imports: [BookComponent, JsonPipe],
-  templateUrl: './dashboard.component.html',
-  styleUrl: './dashboard.component.scss',
+    selector: 'app-dashboard',
+    imports: [BookComponent, JsonPipe],
+    templateUrl: './dashboard.component.html',
+    styleUrl: './dashboard.component.scss',
 })
 export class DashboardComponent {
   private rs = inject(BookRatingService);
   private bs = inject(BookStoreService);
 
-  // books: Book[] = [];
-  books = signal<Book[]>([]);
+  booksResource = resource({
+    loader: () => firstValueFrom(this.bs.getAll())
+  });
 
-  constructor() {
-    /*this.bs.getAll().subscribe(books => {
-      this.books.set(books);
-    })*/
-
-
-    this.bs.getAll().subscribe({
-      next: books => {
-        this.books.set(books);
-        // this.books = books;
-      },
-      error: (err: HttpErrorResponse) => {}
-    })
-  }
 
   doRateUp(book: Book) {
     const ratedBook = this.rs.rateUp(book);
@@ -47,10 +33,8 @@ export class DashboardComponent {
 
   doDelete(book: Book) {
     this.bs.delete(book.isbn).subscribe(() => {
-      this.bs.getAll().subscribe(books => {
-        this.books.set(books);
-      });
-    })
+      this.booksResource.reload();
+    });
   }
 
   private updateList(ratedBook: Book) {
@@ -76,13 +60,15 @@ export class DashboardComponent {
     }))*/
 
     // mit Signal mit update()
-    this.books.update(currentBookList => currentBookList.map(b => {
+    this.booksResource.value.update(currentBookList => {
+      if (!currentBookList) { return; }
+      return currentBookList.map(b => {
       if (b.isbn === ratedBook.isbn) {
         return ratedBook;
       } else {
         return b;
       }
-    }));
+    })});
 
 
   }

book-rating/src/app/books/rating/rating.component.ts

@@ -1,11 +1,10 @@
 import { Component, Input } from '@angular/core';
 
 @Component({
-  selector: 'app-rating',
-  standalone: true,
-  imports: [],
-  templateUrl: './rating.component.html',
-  styleUrl: './rating.component.scss'
+    selector: 'app-rating',
+    imports: [],
+    templateUrl: './rating.component.html',
+    styleUrl: './rating.component.scss',
 })
 export class RatingComponent {
   @Input() value = 0;

book-rating/src/app/books/shared/book-store.service.ts

@@ -15,10 +15,12 @@ export class BookStoreService {
   constructor() { }
 
   getAll() {
+    console.log('BookStoreService.getAll()');
     return this.http.get<Book[]>(this.apiUrl + '/books');
   }
 
   getSingle(isbn: string) {
+    console.log(`BookStoreService.getSingle('${isbn}')`);
     return this.http.get<Book>(this.apiUrl + '/books/' + isbn);
   }
 

book-rating/src/styles.scss

@@ -1,3 +1,3 @@
 /* You can add global styles to this file, and also import other style files */
 
-@import '@angular-schule/workshop-styles/index';
+@use '@angular-schule/workshop-styles/index';