Switch to a resolver to load data.

Author: jayjay2912

ui/src/app/app.config.ts

@@ -1,5 +1,5 @@
 import {ApplicationConfig, provideBrowserGlobalErrorListeners} from '@angular/core';
-import {provideRouter} from '@angular/router';
+import {provideRouter, withComponentInputBinding} from '@angular/router';
 import {routes} from './app.routes';
 import {providePrimeNG} from 'primeng/config';
 import Aura from '@primeuix/themes/aura';
@@ -8,7 +8,7 @@ import {provideHttpClient, withFetch} from '@angular/common/http';
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
-    provideRouter(routes),
+    provideRouter(routes, withComponentInputBinding()),
     provideHttpClient(
       withFetch()
     ),

ui/src/app/app.routes.ts

@@ -1,8 +1,13 @@
 import {Routes} from '@angular/router';
 import {LandingPage} from './pages/landing-page/landing-page';
+import {libraryResolver} from './resolvers/library-resolver';
 
 export const routes: Routes = [
   {
-    path: '', component: LandingPage
+    path: '',
+    component: LandingPage,
+    resolve: {
+      library: libraryResolver
+    }
   }
 ];

ui/src/app/interfaces/library-response.ts ui/src/app/interfaces/library.tsui/src/app/interfaces/library-response.ts renamed to ui/src/app/interfaces/library.ts

@@ -3,7 +3,7 @@ import {Book} from './book';
 /**
  * LibraryResponse response.
  */
-export interface LibraryResponse {
+export interface Library {
   message: string,
   books: Book[]
 }

ui/src/app/pages/landing-page/landing-page.html

@@ -1,10 +1,8 @@
 <div class="card w-full">
   <p-table
     #libraryTable
-    (onLazyLoad)="getLibrary()"
     [globalFilterFields]="['title', 'author', 'shelfLocation']"
-    [lazy]="true"
-    [value]="library?.books ?? []"
+    [value]="library().books ?? []"
     class="w-full"
     dataKey="title">
     <ng-template #caption>

ui/src/app/pages/landing-page/landing-page.ts

@@ -1,45 +1,20 @@
-import {Component, DestroyRef, inject} from '@angular/core';
+import {Component, input} from '@angular/core';
 import {TableModule} from 'primeng/table';
 import {FormsModule} from '@angular/forms';
 import {Tag} from 'primeng/tag';
 import {InputText} from 'primeng/inputtext';
-import {LibraryService} from '../../services/library-service';
-import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
-import {distinctUntilChanged} from 'rxjs';
-import {LibraryResponse} from '../../interfaces/library-response';
+import {Library} from '../../interfaces/library';
 
 @Component({
   selector: 'app-landing-page',
   imports: [
     TableModule,
     FormsModule,
-    Tag,
     InputText,
+    Tag,
   ],
   templateUrl: './landing-page.html'
 })
 export class LandingPage {
-  /**
-   * The library
-   */
-  public library: LibraryResponse | null = null;
-  private readonly _library = inject(LibraryService);
-  private destroyRef = inject(DestroyRef);
-
-  /**
-   *  Get the library
-   */
-  getLibrary(): void {
-    this._library.getLibrary()
-      .pipe(takeUntilDestroyed(this.destroyRef), distinctUntilChanged())
-      .subscribe({
-        next: response => {
-          console.log("Fetched", response);
-          this.library = response;
-        },
-        error: err => {
-          console.log(err);
-        }
-      })
-  }
+  library = input.required<Library>();
 }

ui/src/app/resolvers/library-resolver.spec.ts

@@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import { ResolveFn } from '@angular/router';
+
+import { libraryResolver } from './library-resolver';
+
+describe('libraryResolver', () => {
+  const executeResolver: ResolveFn<boolean> = (...resolverParameters) => 
+      TestBed.runInInjectionContext(() => libraryResolver(...resolverParameters));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it('should be created', () => {
+    expect(executeResolver).toBeTruthy();
+  });
+});

ui/src/app/resolvers/library-resolver.ts

@@ -0,0 +1,13 @@
+import { ResolveFn } from '@angular/router';
+import {Library} from '../interfaces/library';
+import {inject} from '@angular/core';
+import {LibraryService} from '../services/library-service';
+import {catchError, of} from 'rxjs';
+
+export const libraryResolver: ResolveFn<Library | null> = (route, state) => {
+  const _library = inject(LibraryService);
+  return _library.getLibrary()
+    .pipe(catchError((error) => {
+      return of(null)
+    }))
+};

ui/src/app/services/library-service.ts

@@ -1,6 +1,6 @@
 import {inject, Injectable} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
-import {LibraryResponse} from '../interfaces/library-response';
+import {Library} from '../interfaces/library';
 
 @Injectable({
   providedIn: 'root',
@@ -15,6 +15,6 @@ export class LibraryService {
    * Fetch books from the library.
    */
   public getLibrary() {
-    return this.http.get<LibraryResponse>('/api/GetBooks');
+    return this.http.get<Library>('/api/GetBooks');
   }
 }