Task/eliminate OnDestroy lifecycle hook from admin tag component (#6561)

* Eliminate OnDestroy lifecycle hook

apps/client/src/app/components/admin-tag/admin-tag.component.ts

@@ -10,11 +10,12 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   Input,
-  OnDestroy,
   OnInit,
   ViewChild
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
 import { MatMenuModule } from '@angular/material/menu';
@@ -31,7 +32,6 @@ import {
 } from 'ionicons/icons';
 import { get } from 'lodash';
 import { DeviceDetectorService } from 'ngx-device-detector';
-import { Subject, takeUntil } from 'rxjs';
 
 import { GfCreateOrUpdateTagDialogComponent } from './create-or-update-tag-dialog/create-or-update-tag-dialog.component';
 import { CreateOrUpdateTagDialogParams } from './create-or-update-tag-dialog/interfaces/interfaces';
@@ -51,7 +51,7 @@ import { CreateOrUpdateTagDialogParams } from './create-or-update-tag-dialog/int
   styleUrls: ['./admin-tag.component.scss'],
   templateUrl: './admin-tag.component.html'
 })
-export class GfAdminTagComponent implements OnDestroy, OnInit {
+export class GfAdminTagComponent implements OnInit {
   @Input() locale = getLocale();
 
   @ViewChild(MatSort) sort: MatSort;
@@ -61,11 +61,10 @@ export class GfAdminTagComponent implements OnDestroy, OnInit {
   public displayedColumns = ['name', 'userId', 'activities', 'actions'];
   public tags: Tag[];
 
-  private unsubscribeSubject = new Subject<void>();
-
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
+    private destroyRef: DestroyRef,
     private deviceService: DeviceDetectorService,
     private dialog: MatDialog,
     private notificationService: NotificationService,
@@ -74,7 +73,7 @@ export class GfAdminTagComponent implements OnDestroy, OnInit {
     private userService: UserService
   ) {
     this.route.queryParams
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((params) => {
         if (params['createTagDialog']) {
           this.openCreateTagDialog();
@@ -116,20 +115,15 @@ export class GfAdminTagComponent implements OnDestroy, OnInit {
     });
   }
 
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
-
   private deleteTag(aId: string) {
     this.dataService
       .deleteTag(aId)
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe({
         next: () => {
           this.userService
             .get(true)
-            .pipe(takeUntil(this.unsubscribeSubject))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe();
 
           this.fetchTags();
@@ -140,7 +134,7 @@ export class GfAdminTagComponent implements OnDestroy, OnInit {
   private fetchTags() {
     this.dataService
       .fetchTags()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((tags) => {
         this.tags = tags;
 
@@ -171,17 +165,17 @@ export class GfAdminTagComponent implements OnDestroy, OnInit {
 
     dialogRef
       .afterClosed()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((tag: CreateTagDto | null) => {
         if (tag) {
           this.dataService
             .postTag(tag)
-            .pipe(takeUntil(this.unsubscribeSubject))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
               next: () => {
                 this.userService
                   .get(true)
-                  .pipe(takeUntil(this.unsubscribeSubject))
+                  .pipe(takeUntilDestroyed(this.destroyRef))
                   .subscribe();
 
                 this.fetchTags();
@@ -210,17 +204,17 @@ export class GfAdminTagComponent implements OnDestroy, OnInit {
 
     dialogRef
       .afterClosed()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((tag: UpdateTagDto | null) => {
         if (tag) {
           this.dataService
             .putTag(tag)
-            .pipe(takeUntil(this.unsubscribeSubject))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
               next: () => {
                 this.userService
                   .get(true)
-                  .pipe(takeUntil(this.unsubscribeSubject))
+                  .pipe(takeUntilDestroyed(this.destroyRef))
                   .subscribe();
 
                 this.fetchTags();

apps/client/src/app/components/admin-tag/create-or-update-tag-dialog/create-or-update-tag-dialog.component.ts

@@ -1,12 +1,7 @@
 import { CreateTagDto, UpdateTagDto } from '@ghostfolio/common/dtos';
 import { validateObjectForForm } from '@ghostfolio/common/utils';
 
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Inject,
-  OnDestroy
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
 import {
   FormBuilder,
   FormGroup,
@@ -21,7 +16,6 @@ import {
 } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { Subject } from 'rxjs';
 
 import { CreateOrUpdateTagDialogParams } from './interfaces/interfaces';
 
@@ -40,11 +34,9 @@ import { CreateOrUpdateTagDialogParams } from './interfaces/interfaces';
   styleUrls: ['./create-or-update-tag-dialog.scss'],
   templateUrl: 'create-or-update-tag-dialog.html'
 })
-export class GfCreateOrUpdateTagDialogComponent implements OnDestroy {
+export class GfCreateOrUpdateTagDialogComponent {
   public tagForm: FormGroup;
 
-  private unsubscribeSubject = new Subject<void>();
-
   public constructor(
     @Inject(MAT_DIALOG_DATA) public data: CreateOrUpdateTagDialogParams,
     public dialogRef: MatDialogRef<GfCreateOrUpdateTagDialogComponent>,
@@ -85,9 +77,4 @@ export class GfCreateOrUpdateTagDialogComponent implements OnDestroy {
       console.error(error);
     }
   }
-
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
 }