refactor: migrate to signals for projects

Author: sheikalthaf

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`]);