toSignal via Gemini

bookie/src/app/guest-book/guest-book-list/guest-book-list.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit, inject } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, inject, computed, effect, signal } from '@angular/core';
+import { form, FormField } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -9,14 +9,13 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import moment from 'moment';
-import { BehaviorSubject } from 'rxjs';
-import { map } from 'rxjs/operators';
 
 import { LocalTimePipe } from '../../shared/local-time.pipe';
-import { GuestBook } from '../guest-book';
-import { GuestBookList } from '../guest-book-list';
 import { GuestBookService } from '../guest-book.service';
-import { GuestBookListDataSource } from './guest-book-list-datasource';
+
+export interface GuestBookListFormData {
+  date: Date;
+}
 
 @Component({
   selector: 'app-guest-book-list',
@@ -26,53 +25,53 @@ import { GuestBookListDataSource } from './guest-book-list-datasource';
     LocalTimePipe,
     MatButtonModule,
     MatButtonModule,
-
     MatDatepickerModule,
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,
     MatTableModule,
-    ReactiveFormsModule,
+    FormField,
     RouterLink,
   ],
 })
-export class GuestBookListComponent implements OnInit {
+export class GuestBookListComponent {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private snackBar = inject(MatSnackBar);
   private ser = inject(GuestBookService);
 
-  data: BehaviorSubject<GuestBook[]> = new BehaviorSubject<GuestBook[]>([]);
-  dataSource: GuestBookListDataSource = new GuestBookListDataSource(this.data);
-  form: FormGroup<{
-    date: FormControl<Date>;
-  }>;
+  formModel = signal<GuestBookListFormData>({
+    date: this.initialDate(),
+  });
+
+  form = form(this.formModel);
 
-  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['sno', 'name', 'phone', 'pax', 'date', 'action'];
 
+  dateSignal = computed(() => moment(this.formModel().date).format('DD-MMM-YYYY'));
+  listResource = this.ser.list(this.dateSignal);
+
+  dataSource = computed(() => this.listResource.value()?.list ?? []);
+
   constructor() {
-    // Create form
-    this.form = new FormGroup({
-      date: new FormControl(new Date(), { nonNullable: true }),
+    // Keep the query string in sync with the form date
+    effect(() => {
+      const date = this.dateSignal();
+      this.router.navigate([], {
+        relativeTo: this.route,
+        queryParams: { date },
+        queryParamsHandling: 'merge',
+        replaceUrl: true,
+      });
     });
-    this.listenToDateChange();
   }
 
-  listenToDateChange(): void {
-    this.form.controls.date.valueChanges.pipe(map((x) => moment(x).format('DD-MMM-YYYY'))).subscribe((x) =>
-      this.ser.list(x).subscribe((list: GuestBookList) => {
-        this.data.next(list.list);
-      }),
-    );
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { list: GuestBookList };
-      this.data.next(data.list.list);
-      this.form.setValue({ date: moment(data.list.date, 'DD-MMM-YYYY').toDate() });
-    });
-    this.dataSource = new GuestBookListDataSource(this.data);
+  private initialDate(): Date {
+    const qp = this.route.snapshot.queryParamMap.get('date');
+    if (qp) {
+      const parsed = moment(qp, 'DD-MMM-YYYY', true);
+      if (parsed.isValid()) return parsed.toDate();
+    }
+    return new Date();
   }
 }