From ebae16c36b1e457e3339a7c27e98476cd1fc8d4a Mon Sep 17 00:00:00 2001 From: Erwin <111194281+Erwin-N@users.noreply.github.com> Date: Fri, 3 Apr 2026 08:55:14 +0200 Subject: [PATCH] Task/eliminate OnDestroy lifecycle hook from user account access component (#6660) Eliminate OnDestroy lifecycle hook --- ...reate-or-update-access-dialog.component.ts | 21 +++++---------- .../user-account-access.component.ts | 27 ++++++++----------- 2 files changed, 18 insertions(+), 30 deletions(-) diff --git a/apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.component.ts b/apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.component.ts index 5c87b2f63..a4fadeecf 100644 --- a/apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.component.ts +++ b/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 - implements OnDestroy, OnInit -{ +export class GfCreateOrUpdateAccessDialogComponent implements OnInit { public accessForm: FormGroup; public mode: 'create' | 'update'; - private unsubscribeSubject = new Subject(); - public constructor( private changeDetectorRef: ChangeDetectorRef, @Inject(MAT_DIALOG_DATA) private data: CreateOrUpdateAccessDialogParams, public dialogRef: MatDialogRef, 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); diff --git a/apps/client/src/app/components/user-account-access/user-account-access.component.ts b/apps/client/src/app/components/user-account-access/user-account-access.component.ts index 4f744a087..4ca088775 100644 --- a/apps/client/src/app/components/user-account-access/user-account-access.component.ts +++ b/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 { catchError, takeUntil } from 'rxjs/operators'; +import { EMPTY } from 'rxjs'; +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(); - 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;