refactor: migrate to signals

src/app/checklist/checklist-cta-bar/checklist-cta-bar.component.html

@@ -14,7 +14,7 @@
     </button>
   </div>
   <div class="cta-buttons" *ngIf="showActionButtons">
-    <button mat-button (click)="checkAll.emit()"><mat-icon>done_all</mat-icon></button>
-    <button mat-button (click)="uncheckAll.emit()"><mat-icon>filter_none</mat-icon></button>
+    <button mat-button (click)="checkAll.emit()" matTooltip="Check All"><mat-icon>done_all</mat-icon></button>
+    <button mat-button (click)="uncheckAll.emit()" matTooltip="Uncheck All"><mat-icon>filter_none</mat-icon></button>
   </div>
 </div>

src/app/checklist/checklist-cta-bar/checklist-cta-bar.component.ts

@@ -3,13 +3,14 @@ import { ChecklistFilter } from '../models/checklist.model';
 import { MatIcon } from '@angular/material/icon';
 import { MatButton } from '@angular/material/button';
 import { NgIf } from '@angular/common';
+import { MatTooltip } from '@angular/material/tooltip';
 
 @Component({
   standalone: true,
   selector: 'ac-checklist-cta-bar',
   templateUrl: './checklist-cta-bar.component.html',
   styleUrls: ['./checklist-cta-bar.component.scss'],
-  imports: [NgIf, MatButton, MatIcon]
+  imports: [NgIf, MatButton, MatIcon, MatTooltip]
 })
 export class ChecklistCtaBarComponent {
   @Input() filter: ChecklistFilter;

src/app/checklist/checklist-detail-view/checklist-detail-view.component.html

@@ -1,4 +1,4 @@
-<ng-container *ngIf="item$ | async as item">
+<ng-container *ngIf="item() as item">
   <header>
     <mat-checkbox color="primary" (click)="toggleItem(item)" [checked]="item.checked">Done</mat-checkbox>
     <ac-checklist-favorite-button

src/app/checklist/checklist-detail-view/checklist-detail-view.component.ts

@@ -1,6 +1,5 @@
-import { Component, OnInit } from '@angular/core';
-import { select, Store } from '@ngrx/store';
-import { Observable } from 'rxjs';
+import { Component, inject } from '@angular/core';
+import { Store } from '@ngrx/store';
 import { ToggleFavorite, ToggleItem } from '../../projects/state/projects.actions';
 import { ApplicationState } from '../../state/app.state';
 import { ChecklistItem } from '../models/checklist.model';
@@ -9,23 +8,18 @@ import { BannerComponent } from '../../shared/banner/banner.component';
 import { ChecklistMetadataComponent } from '../checklist-item-metadata/checklist-metadata.component';
 import { ChecklistFavoriteButtonComponent } from '../checklist-favorite-button/checklist-favorite-button.component';
 import { MatCheckbox } from '@angular/material/checkbox';
-import { NgIf, AsyncPipe } from '@angular/common';
+import { NgIf } from '@angular/common';
 
 @Component({
   standalone: true,
   selector: 'ac-checklist-detail-view',
   templateUrl: './checklist-detail-view.component.html',
   styleUrls: ['./checklist-detail-view.component.scss'],
-  imports: [NgIf, MatCheckbox, ChecklistFavoriteButtonComponent, ChecklistMetadataComponent, BannerComponent, AsyncPipe]
+  imports: [NgIf, MatCheckbox, ChecklistFavoriteButtonComponent, ChecklistMetadataComponent, BannerComponent]
 })
-export class ChecklistDetailViewComponent implements OnInit {
-  item$: Observable<any>;
-
-  constructor(private store: Store<ApplicationState>) {}
-
-  ngOnInit() {
-    this.item$ = this.store.pipe(select(ChecklistSelectors.getSelectedItem));
-  }
+export class ChecklistDetailViewComponent {
+  private store = inject<Store<ApplicationState>>(Store);
+  item = this.store.selectSignal<any>(ChecklistSelectors.getSelectedItem);
 
   toggleItem(item: ChecklistItem) {
     this.store.dispatch(new ToggleItem(item));

src/app/checklist/checklist-favorites-view/checklist-favorites-view.component.html

@@ -1,9 +1,9 @@
 <header>Favorites</header>
 
-<ac-checklist-cta-bar [filter]="filter$ | async" [showActionButtons]="false" (filterChange)="setFilter($event)">
+<ac-checklist-cta-bar [filter]="filter()" [showActionButtons]="false" (filterChange)="setFilter($event)">
 </ac-checklist-cta-bar>
 
-<ng-container *ngIf="favorites$ | async as favorites">
+<ng-container *ngIf="favorites() as favorites">
   <ng-container *ngIf="favorites.length; else noFavorites">
     <ul class="category" *ngFor="let favorite of favorites; trackBy: trackByCategoryTitle">
       <h4>{{ favorite.category.title }}</h4>

src/app/checklist/checklist-favorites-view/checklist-favorites-view.component.ts

@@ -1,33 +1,26 @@
-import { Component, OnInit } from '@angular/core';
-import { select, Store } from '@ngrx/store';
-import { Observable } from 'rxjs';
+import { Component, inject } from '@angular/core';
+import { Store } from '@ngrx/store';
 import { ToggleFavorite, ToggleItem } from '../../projects/state/projects.actions';
 import { ApplicationState } from '../../state/app.state';
 import { ChecklistFilter, ChecklistItem, Favorite } from '../models/checklist.model';
 import { SetFavoritesFilter } from '../state/checklist.actions';
 import { ChecklistSelectors } from '../state/checklist.selectors';
 import { ChecklistListItemComponent } from '../checklist-list/checklist-list-item.component';
 import { ChecklistListComponent } from '../checklist-list/checklist-list.component';
-import { NgIf, NgFor, AsyncPipe } from '@angular/common';
+import { NgIf, NgFor } from '@angular/common';
 import { ChecklistCtaBarComponent } from '../checklist-cta-bar/checklist-cta-bar.component';
 
 @Component({
   standalone: true,
   selector: 'ac-checklist-favorites-view',
   templateUrl: './checklist-favorites-view.component.html',
   styleUrls: ['./checklist-favorites-view.component.scss'],
-  imports: [ChecklistCtaBarComponent, NgIf, NgFor, ChecklistListComponent, ChecklistListItemComponent, AsyncPipe]
+  imports: [ChecklistCtaBarComponent, NgIf, NgFor, ChecklistListComponent, ChecklistListItemComponent]
 })
-export class ChecklistFavoritesViewComponent implements OnInit {
-  favorites$: Observable<Array<Favorite>>;
-  filter$: Observable<ChecklistFilter>;
-
-  constructor(private store: Store<ApplicationState>) {}
-
-  ngOnInit() {
-    this.favorites$ = this.store.pipe(select(ChecklistSelectors.getFilteredFavorites));
-    this.filter$ = this.store.pipe(select(ChecklistSelectors.getFavoritesFilter));
-  }
+export class ChecklistFavoritesViewComponent {
+  private store = inject<Store<ApplicationState>>(Store);
+  favorites = this.store.selectSignal(ChecklistSelectors.getFilteredFavorites);
+  filter = this.store.selectSignal(ChecklistSelectors.getFavoritesFilter);
 
   setFilter(filter: ChecklistFilter) {
     this.store.dispatch(new SetFavoritesFilter(filter));

src/app/checklist/checklist-list-view/checklist-list-view.component.html

@@ -1,6 +1,6 @@
 <ac-checklist-cta-bar
-  [filter]="filter$ | async"
-  [showActionButtons]="showActionButtons$ | async"
+  [filter]="filter()"
+  [showActionButtons]="showActionButtons()"
   (filterChange)="setFilter($event)"
   (checkAll)="checkAllItems()"
   (uncheckAll)="uncheckAllItems()"
@@ -9,7 +9,7 @@
 
 <ac-checklist-list class="checklist-items">
   <ac-checklist-list-item
-    *ngFor="let item of items$ | async; trackBy: trackById"
+    *ngFor="let item of items(); trackBy: trackById"
     [item]="item"
     (toggleItem)="toggleItem($event)"
     (toggleFavorite)="toggleFavorite($event)"

src/app/checklist/checklist-list-view/checklist-list-view.component.ts

@@ -1,15 +1,13 @@
-import { Component, OnInit } from '@angular/core';
-import { select, Store } from '@ngrx/store';
-import { combineLatest, Observable } from 'rxjs';
+import { Component, Signal, computed, inject } from '@angular/core';
+import { Store } from '@ngrx/store';
 import { CheckAll, ToggleFavorite, ToggleItem, UncheckAll } from '../../projects/state/projects.actions';
 import { BreakpointService } from '../../shared/breakpoint.service';
-import { selectOnce } from '../../shared/operators';
 import { ApplicationState } from '../../state/app.state';
 import { CategoryEntity, ChecklistFilter, ChecklistItem } from '../models/checklist.model';
 import { SetCategoriesFilter } from '../state/checklist.actions';
 import { ChecklistSelectors } from '../state/checklist.selectors';
 import { ChecklistListItemComponent } from '../checklist-list/checklist-list-item.component';
-import { NgFor, AsyncPipe } from '@angular/common';
+import { NgFor } from '@angular/common';
 import { ChecklistListComponent } from '../checklist-list/checklist-list.component';
 import { ChecklistCtaBarComponent } from '../checklist-cta-bar/checklist-cta-bar.component';
 
@@ -18,22 +16,14 @@ import { ChecklistCtaBarComponent } from '../checklist-cta-bar/checklist-cta-bar
   selector: 'ac-list-view',
   templateUrl: './checklist-list-view.component.html',
   styleUrls: ['./checklist-list-view.component.scss'],
-  imports: [ChecklistCtaBarComponent, ChecklistListComponent, NgFor, ChecklistListItemComponent, AsyncPipe]
+  imports: [ChecklistCtaBarComponent, ChecklistListComponent, NgFor, ChecklistListItemComponent]
 })
-export class ListViewComponent implements OnInit {
-  items$: Observable<any>;
-  filter$: Observable<ChecklistFilter>;
-  showActionButtons$: Observable<boolean>;
-
-  constructor(private store: Store<ApplicationState>, private breakpointService: BreakpointService) {}
-
-  ngOnInit() {
-    this.items$ = this.store.pipe(select(ChecklistSelectors.getItemsFromSelectedCategory));
-    this.filter$ = this.store.pipe(select(ChecklistSelectors.getCategoriesFilter));
-
-    const { medium$, desktop$ } = this.breakpointService.getAllBreakpoints();
-    this.showActionButtons$ = combineLatest(medium$, desktop$, (medium, desktop) => medium || desktop);
-  }
+export class ListViewComponent {
+  private store = inject<Store<ApplicationState>>(Store);
+  private breakpointService = inject(BreakpointService);
+  items = this.store.selectSignal(ChecklistSelectors.getItemsFromSelectedCategory);
+  filter = this.store.selectSignal(ChecklistSelectors.getCategoriesFilter);
+  showActionButtons = computed(() => this.breakpointService.medium() || this.breakpointService.desktop());
 
   toggleItem(item: ChecklistItem) {
     this.store.dispatch(new ToggleItem(item));
@@ -44,11 +34,13 @@ export class ListViewComponent implements OnInit {
   }
 
   checkAllItems() {
-    this.getSelectedCategory().subscribe(category => this.store.dispatch(new CheckAll(category)));
+    const categories = this.getSelectedCategory();
+    this.store.dispatch(new CheckAll(categories));
   }
 
   uncheckAllItems() {
-    this.getSelectedCategory().subscribe(category => this.store.dispatch(new UncheckAll(category)));
+    const categories = this.getSelectedCategory();
+    this.store.dispatch(new UncheckAll(categories));
   }
 
   toggleFavorite(item: ChecklistItem) {
@@ -59,7 +51,7 @@ export class ListViewComponent implements OnInit {
     return item.id;
   }
 
-  private getSelectedCategory(): Observable<CategoryEntity> {
-    return this.store.pipe(selectOnce(ChecklistSelectors.getSelectedCategory));
+  private get getSelectedCategory(): Signal<CategoryEntity> {
+    return this.store.selectSignal(ChecklistSelectors.getSelectedCategory);
   }
 }

src/app/checklist/checklist-overview/checklist-overview.component.html

@@ -1,4 +1,4 @@
-<ul [@breadcrumb]="breadcrumb.length" class="breadcrumb" *ngIf="breadcrumb$ | async as breadcrumb">
+<ul [@breadcrumb]="breadcrumb.length" class="breadcrumb" *ngIf="breadcrumbs() as breadcrumb">
   <ng-container *ngFor="let item of breadcrumb; let last = last; trackBy: trackByTitle">
     <li (click)="goBack(last)" [class.active]="last" class="breadcrumb-item">{{ item.title }}</li>
     <li class="breadcrumb-item-separator" *ngIf="!last"><mat-icon>chevron_right</mat-icon></li>

src/app/checklist/checklist-overview/checklist-overview.component.ts

@@ -1,23 +1,21 @@
 import { animate, query, stagger, style, transition, trigger } from '@angular/animations';
-import { Component, OnInit } from '@angular/core';
+import { Component, effect, inject, untracked } from '@angular/core';
 import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
-import { select, Store } from '@ngrx/store';
-import { Observable, zip } from 'rxjs';
-import { filter, switchMap, tap } from 'rxjs/operators';
-import { selectOnce } from '../../shared/operators';
+import { Store } from '@ngrx/store';
 import { extractRouteParams, getActivatedChild } from '../../shared/router.utils';
 import { ApplicationState } from '../../state/app.state';
-import { Category, ChecklistItem } from '../models/checklist.model';
+import { BreadcrumbItem } from '../models/checklist.model';
 import { ChecklistSelectors } from '../state/checklist.selectors';
 import { MatIcon } from '@angular/material/icon';
-import { NgIf, NgFor, AsyncPipe } from '@angular/common';
+import { NgIf, NgFor } from '@angular/common';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 @Component({
   standalone: true,
   selector: 'ac-checklist-overview',
   templateUrl: './checklist-overview.component.html',
   styleUrls: ['./checklist-overview.component.scss'],
-  imports: [NgIf, NgFor, MatIcon, RouterOutlet, AsyncPipe],
+  imports: [NgIf, NgFor, MatIcon, RouterOutlet],
   animations: [
     trigger('breadcrumb', [
       transition('* <=> *', [
@@ -50,36 +48,33 @@ import { NgIf, NgFor, AsyncPipe } from '@angular/common';
     ])
   ]
 })
-export class ChecklistOverviewComponent implements OnInit {
-  breadcrumb$: Observable<any>;
+export class ChecklistOverviewComponent {
+  private store = inject<Store<ApplicationState>>(Store);
+  private router = inject(Router);
+  private route = inject(ActivatedRoute);
+  breadcrumbs = this.store.selectSignal(ChecklistSelectors.getBreadcrumb);
 
-  constructor(private store: Store<ApplicationState>, private router: Router, private route: ActivatedRoute) {}
+  constructor() {
+    const params = toSignal(this.route.params);
+    const categories = this.store.selectSignal(ChecklistSelectors.getActiveCategories);
+    const entities = this.store.selectSignal(ChecklistSelectors.getActiveCategoryEntities);
+    const editMode = this.store.selectSignal(ChecklistSelectors.getEditMode);
 
-  ngOnInit() {
-    this.breadcrumb$ = this.store.pipe(select(ChecklistSelectors.getBreadcrumb));
-
-    this.route.params
-      .pipe(
-        switchMap(_ =>
-          zip(
-            this.store.pipe(selectOnce(ChecklistSelectors.getActiveCategoryEntities)),
-            this.store.pipe(selectOnce(ChecklistSelectors.getActiveCategories)),
-            this.store.pipe(selectOnce(ChecklistSelectors.getEditMode))
-          )
-        ),
-        filter(([, categories]) => !!categories.length),
-        tap(([entities, categories, editMode]) => {
+    effect(() => {
+      const _ = params();
+      untracked(() => {
+        if (categories().length) {
           const { category } = extractRouteParams(this.route.snapshot, 1);
-          const categoryDisabled = !category || !entities[category];
+          const categoryDisabled = !category || !entities()[category];
 
-          if (categoryDisabled && !editMode) {
-            this.router.navigate([categories[0].slug], {
+          if (categoryDisabled && !editMode()) {
+            this.router.navigate([categories()[0].slug], {
               relativeTo: this.route
             });
           }
-        })
-      )
-      .subscribe();
+        }
+      });
+    });
   }
 
   goBack(last: boolean) {
@@ -89,7 +84,7 @@ export class ChecklistOverviewComponent implements OnInit {
     }
   }
 
-  trackByTitle(_, item: Category | ChecklistItem) {
+  trackByTitle(_, item: BreadcrumbItem) {
     return item.title;
   }
 }

src/app/checklist/checklist-search/checklist-search.component.html

@@ -1,7 +1,7 @@
 <input
   placeholder="Search"
   spellcheck="false"
-  (focus)="focus$.next('FOCUS')"
+  (focus)="focused()"
   [formControl]="searchField"
   [matAutocomplete]="auto"
 />
@@ -10,7 +10,7 @@
   [displayWith]="getOptionText.bind(this)"
   (optionSelected)="optionSelected($event)"
 >
-  <mat-option *ngFor="let result of results$ | async" [value]="result">
+  <mat-option *ngFor="let result of results()" [value]="result">
     <span *ngIf="result.document.category" class="result-type">{{ result.document.category }}</span>
     <span class="text" [innerHTML]="result.text"></span>
   </mat-option>