refactor: migrate to signals for projects

Author: sheikalthaf

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

@@ -1,10 +1,4 @@
-<input
-  placeholder="Search"
-  spellcheck="false"
-  (focus)="focused()"
-  [formControl]="searchField"
-  [matAutocomplete]="auto"
-/>
+<input placeholder="Search" spellcheck="false" [formControl]="searchField" [matAutocomplete]="auto" />
 <mat-autocomplete
   #auto="matAutocomplete"
   [displayWith]="getOptionText.bind(this)"

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

@@ -23,19 +23,13 @@ export class ChecklistSearchComponent {
   private router = inject(Router);
   searchField = new FormControl<string>('');
   search = toSignal(this.searchField.valueChanges.pipe(debounceTime(150)));
-  focus = signal(0);
 
   results = computed<any>(() => {
-    const _ = this.focus();
     const search = this.search();
     const results = this.searchService.search(search);
     return results.map(this.mapToSearchResult);
   });
 
-  focused() {
-    this.focus.update(prev => prev + 1);
-  }
-
   getOptionText(value: SearchResult) {
     return value?.document?.title || '';
   }

src/app/projects/project-dialog/project-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ErrorStateMatcher } from '@angular/material/core';
 import {
@@ -91,7 +91,10 @@ const verifyProjectName = (projectName: string) => {
     MatDialogClose
   ]
 })
-export class ProjectDialogComponent implements OnInit {
+export class ProjectDialogComponent {
+  public data = inject<ProjectDialogData>(MAT_DIALOG_DATA);
+  private store = inject<Store<ApplicationState>>(Store);
+  public dialogRef = inject<MatDialogRef<ProjectDialogComponent, ProjectDialogResult>>(MatDialogRef);
   mode: ProjectDialogMode;
   title: string;
   project: Partial<Project>;
@@ -104,13 +107,7 @@ export class ProjectDialogComponent implements OnInit {
   verifyProjectName = new FormControl('');
   errorStateMatcher = new CustomErrorStateMatcher();
 
-  constructor(
-    @Inject(MAT_DIALOG_DATA) public data: ProjectDialogData,
-    private store: Store<ApplicationState>,
-    public dialogRef: MatDialogRef<ProjectDialogComponent, ProjectDialogResult>
-  ) {}
-
-  ngOnInit() {
+  constructor() {
     const { title, project, mode = ProjectDialogMode.Create, submitButtonText } = this.data;
 
     this.project = project ? project : { name: '' };

src/app/projects/projects-view/projects-view.component.html

@@ -18,7 +18,7 @@ <h5>Your Projects</h5>
         <mat-icon>add</mat-icon>
         Add Project
       </mat-card>
-      <mat-card appearance="outlined" (click)="navigateToProject(project.id)" *ngFor="let project of projects$ | async">
+      <mat-card appearance="outlined" (click)="navigateToProject(project.id)" *ngFor="let project of projects()">
         <div class="card-ripple" matRipple></div>
         <mat-card-content>
           <h2 class="project-name">{{ project.name }}</h2>

src/app/projects/projects-view/projects-view.component.ts

@@ -1,8 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
-import { select, Store } from '@ngrx/store';
-import { asyncScheduler, Observable } from 'rxjs';
+import { Store } from '@ngrx/store';
+import { asyncScheduler } from 'rxjs';
 import { filter, map, observeOn } from 'rxjs/operators';
 import { ApplicationState } from '../../state/app.state';
 import { Project } from '../models/projects.model';
@@ -18,7 +18,7 @@ import {
 import { AddProject, DeleteProject, EditProject } from '../state/projects.actions';
 import { ProjectsSelectors } from '../state/projects.selectors';
 import { MatIconButton } from '@angular/material/button';
-import { NgFor, AsyncPipe, PercentPipe } from '@angular/common';
+import { NgFor, PercentPipe } from '@angular/common';
 import { MatIcon } from '@angular/material/icon';
 import { MatRipple } from '@angular/material/core';
 import { MatCard, MatCardContent, MatCardActions } from '@angular/material/card';
@@ -40,22 +40,18 @@ import { FooterComponent } from 'src/app/shared/footer/footer.component';
     MatCardContent,
     MatCardActions,
     MatIconButton,
-    AsyncPipe,
     PercentPipe,
     ToolbarComponent,
     ToolbarLogoComponent,
     ScoreChartComponent,
     FooterComponent
   ]
 })
-export class ProjectsViewComponent implements OnInit {
-  projects$: Observable<Array<Project>>;
-
-  constructor(private store: Store<ApplicationState>, private router: Router, private dialog: MatDialog) {}
-
-  ngOnInit() {
-    this.projects$ = this.store.pipe(select(ProjectsSelectors.getProjects));
-  }
+export class ProjectsViewComponent {
+  private store = inject<Store<ApplicationState>>(Store);
+  private router = inject(Router);
+  private dialog = inject(MatDialog);
+  projects = this.store.selectSignal(ProjectsSelectors.getProjects);
 
   navigateToProject(projectId: string) {
     this.router.navigate([`/${projectId}/checklist`]);