Task/eliminate OnDestroy lifecycle hook from user account access component (#6660)

Eliminate OnDestroy lifecycle hook

apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.component.ts

@@ -7,10 +7,11 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   Inject,
-  OnDestroy,
   OnInit
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
   FormBuilder,
   FormGroup,
@@ -28,7 +29,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { StatusCodes } from 'http-status-codes';
-import { EMPTY, Subject, catchError, takeUntil } from 'rxjs';
+import { EMPTY, catchError } from 'rxjs';
 
 import { CreateOrUpdateAccessDialogParams } from './interfaces/interfaces';
 
@@ -48,19 +49,16 @@ import { CreateOrUpdateAccessDialogParams } from './interfaces/interfaces';
   styleUrls: ['./create-or-update-access-dialog.scss'],
   templateUrl: 'create-or-update-access-dialog.html'
 })
-export class GfCreateOrUpdateAccessDialogComponent
+export class GfCreateOrUpdateAccessDialogComponent implements OnInit {
-  implements OnDestroy, OnInit
-{
   public accessForm: FormGroup;
   public mode: 'create' | 'update';
 
-  private unsubscribeSubject = new Subject<void>();
-
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
     @Inject(MAT_DIALOG_DATA) private data: CreateOrUpdateAccessDialogParams,
     public dialogRef: MatDialogRef<GfCreateOrUpdateAccessDialogComponent>,
     private dataService: DataService,
+    private destroyRef: DestroyRef,
     private formBuilder: FormBuilder,
     private notificationService: NotificationService
   ) {
@@ -113,11 +111,6 @@ export class GfCreateOrUpdateAccessDialogComponent
     }
   }
 
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
-
   private async createAccess() {
     const access: CreateAccessDto = {
       alias: this.accessForm.get('alias').value,
@@ -144,7 +137,7 @@ export class GfCreateOrUpdateAccessDialogComponent
 
             return EMPTY;
           }),
-          takeUntil(this.unsubscribeSubject)
+          takeUntilDestroyed(this.destroyRef)
         )
         .subscribe(() => {
           this.dialogRef.close(access);
@@ -181,7 +174,7 @@ export class GfCreateOrUpdateAccessDialogComponent
 
             return EMPTY;
           }),
-          takeUntil(this.unsubscribeSubject)
+          takeUntilDestroyed(this.destroyRef)
         )
         .subscribe(() => {
           this.dialogRef.close(access);

apps/client/src/app/components/user-account-access/user-account-access.component.ts

@@ -13,9 +13,10 @@ import {
   ChangeDetectorRef,
   Component,
   CUSTOM_ELEMENTS_SCHEMA,
-  OnDestroy,
+  DestroyRef,
   OnInit
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
@@ -26,8 +27,8 @@ import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { addOutline, eyeOffOutline, eyeOutline } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
-import { EMPTY, Subject } from 'rxjs';
+import { EMPTY } from 'rxjs';
-import { catchError, takeUntil } from 'rxjs/operators';
+import { catchError } from 'rxjs/operators';
 
 import { GfCreateOrUpdateAccessDialogComponent } from './create-or-update-access-dialog/create-or-update-access-dialog.component';
 import { CreateOrUpdateAccessDialogParams } from './create-or-update-access-dialog/interfaces/interfaces';
@@ -51,7 +52,7 @@ import { CreateOrUpdateAccessDialogParams } from './create-or-update-access-dial
   styleUrls: ['./user-account-access.scss'],
   templateUrl: './user-account-access.html'
 })
-export class GfUserAccountAccessComponent implements OnDestroy, OnInit {
+export class GfUserAccountAccessComponent implements OnInit {
   public accessesGet: Access[];
   public accessesGive: Access[];
   public deviceType: string;
@@ -64,11 +65,10 @@ export class GfUserAccountAccessComponent implements OnDestroy, OnInit {
   });
   public user: User;
 
-  private unsubscribeSubject = new Subject<void>();
-
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
+    private destroyRef: DestroyRef,
     private deviceService: DeviceDetectorService,
     private dialog: MatDialog,
     private formBuilder: FormBuilder,
@@ -85,7 +85,7 @@ export class GfUserAccountAccessComponent implements OnDestroy, OnInit {
     );
 
     this.userService.stateChanged
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((state) => {
         if (state?.user) {
           this.user = state.user;
@@ -110,7 +110,7 @@ export class GfUserAccountAccessComponent implements OnDestroy, OnInit {
       });
 
     this.route.queryParams
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((params) => {
         if (params['createDialog']) {
           this.openCreateAccessDialog();
@@ -131,7 +131,7 @@ export class GfUserAccountAccessComponent implements OnDestroy, OnInit {
   public onDeleteAccess(aId: string) {
     this.dataService
       .deleteAccess(aId)
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe({
         next: () => {
           this.update();
@@ -154,7 +154,7 @@ export class GfUserAccountAccessComponent implements OnDestroy, OnInit {
 
               return EMPTY;
             }),
-            takeUntil(this.unsubscribeSubject)
+            takeUntilDestroyed(this.destroyRef)
           )
           .subscribe(({ accessToken }) => {
             this.notificationService.alert({
@@ -179,11 +179,6 @@ export class GfUserAccountAccessComponent implements OnDestroy, OnInit {
     });
   }
 
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
-
   private openCreateAccessDialog() {
     const dialogRef = this.dialog.open<
       GfCreateOrUpdateAccessDialogComponent,
@@ -261,7 +256,7 @@ export class GfUserAccountAccessComponent implements OnDestroy, OnInit {
 
     this.dataService
       .fetchAccesses()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((accesses) => {
         this.accessesGive = accesses;