feat(Answer:30): refactor componen store to use signal store

Author: phhien203

apps/signal/30-interop-rxjs-signal/src/app/list/photos.component.ts

@@ -1,30 +1,21 @@
-import { AsyncPipe } from '@angular/common';
-import { Component, inject, OnInit } from '@angular/core';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { Component, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { RouterLinkWithHref } from '@angular/router';
-import { provideComponentStore } from '@ngrx/component-store';
-import {
-  debounceTime,
-  distinctUntilChanged,
-  Observable,
-  skipWhile,
-  tap,
-} from 'rxjs';
+
 import { Photo } from '../photo.model';
-import { PhotoStore } from './photos.store';
+import { PhotosStore } from './photos.store';
 
 @Component({
   selector: 'app-photos',
   imports: [
-    ReactiveFormsModule,
+    FormsModule,
     MatFormFieldModule,
     MatProgressBarModule,
     MatInputModule,
     RouterLinkWithHref,
-    AsyncPipe,
   ],
   template: `
     <h2 class="mb-2 text-xl">Photos</h2>
@@ -34,93 +25,61 @@ import { PhotoStore } from './photos.store';
       <input
         type="text"
         matInput
-        [formControl]="search"
+        [ngModel]="store.search()"
+        (ngModelChange)="store.setSearch($event)"
         placeholder="find a photo" />
     </mat-form-field>
 
-    @let vm = vm$ | async;
-      <section class="flex flex-col">
-        <section class="flex items-center gap-3">
-          <button
-            [disabled]="vm.page === 1"
-            [class.bg-gray-400]="vm.page === 1"
-            class="rounded-md border p-3 text-xl"
-            (click)="store.previousPage()">
-            <
-          </button>
-          <button
-            [disabled]="vm.endOfPage"
-            [class.bg-gray-400]="vm.endOfPage"
-            class="rounded-md border p-3 text-xl"
-            (click)="store.nextPage()">
-            >
-          </button>
-          Page :{{ vm.page }} / {{ vm.pages }}
-        </section>
-        @if (vm.loading) {
-          <mat-progress-bar mode="query" class="mt-5"></mat-progress-bar>
-        }
-        @if (vm.photos && vm.photos.length > 0) {
-          <ul class="flex flex-wrap gap-4">
-            @for (
-              photo of vm.photos;
-              track photo.id;
-              let i = $index
-            ) {
-              <li>
-                <a routerLink="detail" [queryParams]="{ photo: encode(photo) }">
-                  <img
-                    src="{{ photo.url_q }}"
-                    alt="{{ photo.title }}"
-                    class="image" />
-                </a>
-              </li>
-            }
-          </ul>
-        } @else {
-          <div>No Photos found. Type a search word.</div>
-        }
-        <footer class="text-red-500">
-          {{ vm.error }}
-        </footer>
+    <section class="flex flex-col">
+      <section class="flex items-center gap-3">
+        <button
+          [disabled]="store.page() === 1"
+          [class.bg-gray-400]="store.page() === 1"
+          class="rounded-md border p-3 text-xl"
+          (click)="store.previousPage()">
+          <
+        </button>
+        <button
+          [disabled]="store.endOfPage()"
+          [class.bg-gray-400]="store.endOfPage()"
+          class="rounded-md border p-3 text-xl"
+          (click)="store.nextPage()">
+          >
+        </button>
+        Page :{{ store.page() }} / {{ store.pages() }}
       </section>
+      @if (store.loading()) {
+        <mat-progress-bar mode="query" class="mt-5"></mat-progress-bar>
+      }
+      @let photos = store.photos();
+      @if (photos && photos.length > 0) {
+        <ul class="flex flex-wrap gap-4">
+          @for (photo of photos; track photo.id; let i = $index) {
+            <li>
+              <a routerLink="detail" [queryParams]="{ photo: encode(photo) }">
+                <img
+                  src="{{ photo.url_q }}"
+                  alt="{{ photo.title }}"
+                  class="image" />
+              </a>
+            </li>
+          }
+        </ul>
+      } @else {
+        <div>No Photos found. Type a search word.</div>
+      }
+      <footer class="text-red-500">
+        {{ store.error() }}
+      </footer>
+    </section>
   `,
-  providers: [provideComponentStore(PhotoStore)],
+  providers: [PhotosStore],
   host: {
     class: 'p-5 block',
   },
 })
-export default class PhotosComponent implements OnInit {
-  store = inject(PhotoStore);
-  readonly vm$: Observable<{
-    photos: Photo[];
-    search: string;
-    page: number;
-    pages: number;
-    endOfPage: boolean;
-    loading: boolean;
-    error: unknown;
-  }> = this.store.vm$.pipe(
-    tap(({ search }) => {
-      if (!this.formInit) {
-        this.search.setValue(search);
-        this.formInit = true;
-      }
-    }),
-  );
-
-  private formInit = false;
-  search = new FormControl();
-
-  ngOnInit(): void {
-    this.store.search(
-      this.search.valueChanges.pipe(
-        skipWhile(() => !this.formInit),
-        debounceTime(300),
-        distinctUntilChanged(),
-      ),
-    );
-  }
+export default class PhotosComponent {
+  readonly store = inject(PhotosStore);
 
   encode(photo: Photo) {
     return encodeURIComponent(JSON.stringify(photo));