Task/eliminate OnDestroy lifecycle hook from activities page component (#6611)

* Eliminate OnDestroy lifecycle hook

apps/client/src/app/pages/portfolio/activities/activities-page.component.ts

@@ -14,7 +14,13 @@ import { DateRange } from '@ghostfolio/common/types';
 import { GfActivitiesTableComponent } from '@ghostfolio/ui/activities-table';
 import { DataService } from '@ghostfolio/ui/services';
 
-import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  DestroyRef,
+  OnInit
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
 import { PageEvent } from '@angular/material/paginator';
@@ -27,8 +33,7 @@ import { format, parseISO } from 'date-fns';
 import { addIcons } from 'ionicons';
 import { addOutline } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
-import { Subject, Subscription } from 'rxjs';
+import { Subscription } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 
 import { GfCreateOrUpdateActivityDialogComponent } from './create-or-update-activity-dialog/create-or-update-activity-dialog.component';
 import { CreateOrUpdateActivityDialogParams } from './create-or-update-activity-dialog/interfaces/interfaces';
@@ -48,7 +53,7 @@ import { ImportActivitiesDialogParams } from './import-activities-dialog/interfa
   styleUrls: ['./activities-page.scss'],
   templateUrl: './activities-page.html'
 })
-export class GfActivitiesPageComponent implements OnDestroy, OnInit {
+export class GfActivitiesPageComponent implements OnInit {
   public dataSource: MatTableDataSource<Activity>;
   public deviceType: string;
   public hasImpersonationId: boolean;
@@ -62,11 +67,10 @@ export class GfActivitiesPageComponent implements OnDestroy, OnInit {
   public totalItems: number;
   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 icsService: IcsService,
@@ -76,13 +80,13 @@ export class GfActivitiesPageComponent implements OnDestroy, OnInit {
     private userService: UserService
   ) {
     this.routeQueryParams = route.queryParams
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((params) => {
         if (params['createDialog']) {
           if (params['activityId']) {
             this.dataService
               .fetchActivity(params['activityId'])
-              .pipe(takeUntil(this.unsubscribeSubject))
+              .pipe(takeUntilDestroyed(this.destroyRef))
               .subscribe((activity) => {
                 this.openCreateActivityDialog(activity);
               });
@@ -93,7 +97,7 @@ export class GfActivitiesPageComponent implements OnDestroy, OnInit {
           if (params['activityId']) {
             this.dataService
               .fetchActivity(params['activityId'])
-              .pipe(takeUntil(this.unsubscribeSubject))
+              .pipe(takeUntilDestroyed(this.destroyRef))
               .subscribe((activity) => {
                 this.openUpdateActivityDialog(activity);
               });
@@ -111,13 +115,13 @@ export class GfActivitiesPageComponent implements OnDestroy, OnInit {
 
     this.impersonationStorageService
       .onChangeHasImpersonation()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((impersonationId) => {
         this.hasImpersonationId = !!impersonationId;
       });
 
     this.userService.stateChanged
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((state) => {
         if (state?.user) {
           this.updateUser(state.user);
@@ -143,7 +147,7 @@ export class GfActivitiesPageComponent implements OnDestroy, OnInit {
         sortDirection: this.sortDirection,
         take: this.pageSize
       })
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(({ activities, count }) => {
         this.dataSource = new MatTableDataSource(activities);
         this.totalItems = count;
@@ -184,11 +188,11 @@ export class GfActivitiesPageComponent implements OnDestroy, OnInit {
       .deleteActivities({
         filters: this.userService.getFilters()
       })
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         this.userService
           .get(true)
-          .pipe(takeUntil(this.unsubscribeSubject))
+          .pipe(takeUntilDestroyed(this.destroyRef))
           .subscribe();
 
         this.fetchActivities();
@@ -198,11 +202,11 @@ export class GfActivitiesPageComponent implements OnDestroy, OnInit {
   public onDeleteActivity(aId: string) {
     this.dataService
       .deleteActivity(aId)
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         this.userService
           .get(true)
-          .pipe(takeUntil(this.unsubscribeSubject))
+          .pipe(takeUntilDestroyed(this.destroyRef))
           .subscribe();
 
         this.fetchActivities();
@@ -218,7 +222,7 @@ export class GfActivitiesPageComponent implements OnDestroy, OnInit {
 
     this.dataService
       .fetchExport(fetchExportParams)
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((data) => {
         for (const activity of data.activities) {
           delete activity.id;
@@ -238,7 +242,7 @@ export class GfActivitiesPageComponent implements OnDestroy, OnInit {
   public onExportDrafts(activityIds?: string[]) {
     this.dataService
       .fetchExport({ activityIds })
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((data) => {
         downloadAsFile({
           content: this.icsService.transformActivitiesToIcsContent(
@@ -268,11 +272,11 @@ export class GfActivitiesPageComponent implements OnDestroy, OnInit {
 
     dialogRef
       .afterClosed()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         this.userService
           .get(true)
-          .pipe(takeUntil(this.unsubscribeSubject))
+          .pipe(takeUntilDestroyed(this.destroyRef))
           .subscribe();
 
         this.fetchActivities();
@@ -295,11 +299,11 @@ export class GfActivitiesPageComponent implements OnDestroy, OnInit {
 
     dialogRef
       .afterClosed()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         this.userService
           .get(true)
-          .pipe(takeUntil(this.unsubscribeSubject))
+          .pipe(takeUntilDestroyed(this.destroyRef))
           .subscribe();
 
         this.fetchActivities();
@@ -336,12 +340,12 @@ export class GfActivitiesPageComponent implements OnDestroy, OnInit {
 
     dialogRef
       .afterClosed()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((activity: UpdateOrderDto) => {
         if (activity) {
           this.dataService
             .putActivity(activity)
-            .pipe(takeUntil(this.unsubscribeSubject))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
               next: () => {
                 this.fetchActivities();
@@ -353,11 +357,6 @@ export class GfActivitiesPageComponent implements OnDestroy, OnInit {
       });
   }
 
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
-
   private isCalendarYear(dateRange: DateRange) {
     if (!dateRange) {
       return false;
@@ -369,7 +368,7 @@ export class GfActivitiesPageComponent implements OnDestroy, OnInit {
   private openCreateActivityDialog(aActivity?: Activity) {
     this.userService
       .get()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((user) => {
         this.updateUser(user);
 
@@ -396,14 +395,14 @@ export class GfActivitiesPageComponent implements OnDestroy, OnInit {
 
         dialogRef
           .afterClosed()
-          .pipe(takeUntil(this.unsubscribeSubject))
+          .pipe(takeUntilDestroyed(this.destroyRef))
           .subscribe((transaction: CreateOrderDto | null) => {
             if (transaction) {
               this.dataService.postActivity(transaction).subscribe({
                 next: () => {
                   this.userService
                     .get(true)
-                    .pipe(takeUntil(this.unsubscribeSubject))
+                    .pipe(takeUntilDestroyed(this.destroyRef))
                     .subscribe();
 
                   this.fetchActivities();