Task/eliminate OnDestroy lifecycle hook from admin market data component (#6552)

* Eliminate OnDestroy lifecycle hook

apps/client/src/app/components/admin-market-data/admin-market-data.component.ts

@@ -26,10 +26,11 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  OnDestroy,
+  DestroyRef,
   OnInit,
   ViewChild
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
@@ -63,7 +64,7 @@ import {
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { Subject } from 'rxjs';
-import { distinctUntilChanged, takeUntil } from 'rxjs/operators';
+import { distinctUntilChanged } from 'rxjs/operators';
 
 import { AdminMarketDataService } from './admin-market-data.service';
 import { GfAssetProfileDialogComponent } from './asset-profile-dialog/asset-profile-dialog.component';
@@ -95,9 +96,7 @@ import { CreateAssetProfileDialogParams } from './create-asset-profile-dialog/in
   styleUrls: ['./admin-market-data.scss'],
   templateUrl: './admin-market-data.html'
 })
-export class GfAdminMarketDataComponent
-  implements AfterViewInit, OnDestroy, OnInit
-{
+export class GfAdminMarketDataComponent implements AfterViewInit, OnInit {
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
@@ -166,13 +165,12 @@ export class GfAdminMarketDataComponent
   public totalItems = 0;
   public user: User;
 
-  private unsubscribeSubject = new Subject<void>();
-
   public constructor(
     public adminMarketDataService: AdminMarketDataService,
     private adminService: AdminService,
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
+    private destroyRef: DestroyRef,
     private deviceService: DeviceDetectorService,
     private dialog: MatDialog,
     private route: ActivatedRoute,
@@ -209,7 +207,7 @@ export class GfAdminMarketDataComponent
     this.displayedColumns.push('actions');
 
     this.route.queryParams
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((params) => {
         if (
           params['assetProfileDialog'] &&
@@ -226,7 +224,7 @@ export class GfAdminMarketDataComponent
       });
 
     this.userService.stateChanged
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((state) => {
         if (state?.user) {
           this.user = state.user;
@@ -238,7 +236,7 @@ export class GfAdminMarketDataComponent
       });
 
     this.filters$
-      .pipe(distinctUntilChanged(), takeUntil(this.unsubscribeSubject))
+      .pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
       .subscribe((filters) => {
         this.activeFilters = filters;
 
@@ -302,7 +300,7 @@ export class GfAdminMarketDataComponent
   public onGather7Days() {
     this.adminService
       .gather7Days()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         setTimeout(() => {
           window.location.reload();
@@ -313,7 +311,7 @@ export class GfAdminMarketDataComponent
   public onGatherMax() {
     this.adminService
       .gatherMax()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         setTimeout(() => {
           window.location.reload();
@@ -324,7 +322,7 @@ export class GfAdminMarketDataComponent
   public onGatherProfileData() {
     this.adminService
       .gatherProfileData()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe();
   }
 
@@ -334,14 +332,14 @@ export class GfAdminMarketDataComponent
   }: AssetProfileIdentifier) {
     this.adminService
       .gatherProfileDataBySymbol({ dataSource, symbol })
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe();
   }
 
   public onGatherSymbol({ dataSource, symbol }: AssetProfileIdentifier) {
     this.adminService
       .gatherSymbol({ dataSource, symbol })
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe();
   }
 
@@ -358,11 +356,6 @@ export class GfAdminMarketDataComponent
     });
   }
 
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
-
   private loadData(
     {
       pageIndex,
@@ -399,7 +392,7 @@ export class GfAdminMarketDataComponent
         skip: pageIndex * this.pageSize,
         take: this.pageSize
       })
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(({ count, marketData }) => {
         this.totalItems = count;
 
@@ -430,7 +423,7 @@ export class GfAdminMarketDataComponent
   }) {
     this.userService
       .get()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((user) => {
         this.user = user;
 
@@ -452,7 +445,7 @@ export class GfAdminMarketDataComponent
 
         dialogRef
           .afterClosed()
-          .pipe(takeUntil(this.unsubscribeSubject))
+          .pipe(takeUntilDestroyed(this.destroyRef))
           .subscribe(
             (newAssetProfileIdentifier: AssetProfileIdentifier | undefined) => {
               if (newAssetProfileIdentifier) {
@@ -468,7 +461,7 @@ export class GfAdminMarketDataComponent
   private openCreateAssetProfileDialog() {
     this.userService
       .get()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((user) => {
         this.user = user;
 
@@ -486,7 +479,7 @@ export class GfAdminMarketDataComponent
 
         dialogRef
           .afterClosed()
-          .pipe(takeUntil(this.unsubscribeSubject))
+          .pipe(takeUntilDestroyed(this.destroyRef))
           .subscribe((result) => {
             if (!result) {
               this.router.navigate(['.'], { relativeTo: this.route });
@@ -499,7 +492,7 @@ export class GfAdminMarketDataComponent
             if (addAssetProfile && dataSource && symbol) {
               this.adminService
                 .addAssetProfile({ dataSource, symbol })
-                .pipe(takeUntil(this.unsubscribeSubject))
+                .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe(() => {
                   this.loadData();
                 });

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.ts

@@ -37,12 +37,13 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   ElementRef,
   Inject,
-  OnDestroy,
   OnInit,
   ViewChild
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
   AbstractControl,
   FormBuilder,
@@ -87,8 +88,8 @@ import {
   serverOutline
 } from 'ionicons/icons';
 import ms from 'ms';
-import { EMPTY, Subject } from 'rxjs';
-import { catchError, takeUntil } from 'rxjs/operators';
+import { EMPTY } from 'rxjs';
+import { catchError } from 'rxjs/operators';
 
 import { AssetProfileDialogParams } from './interfaces/interfaces';
 
@@ -121,7 +122,7 @@ import { AssetProfileDialogParams } from './interfaces/interfaces';
   styleUrls: ['./asset-profile-dialog.component.scss'],
   templateUrl: 'asset-profile-dialog.html'
 })
-export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
+export class GfAssetProfileDialogComponent implements OnInit {
   private static readonly HISTORICAL_DATA_TEMPLATE = `date;marketPrice\n${format(
     new Date(),
     DATE_FORMAT
@@ -241,14 +242,13 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
 
   public user: User;
 
-  private unsubscribeSubject = new Subject<void>();
-
   public constructor(
     public adminMarketDataService: AdminMarketDataService,
     private adminService: AdminService,
     private changeDetectorRef: ChangeDetectorRef,
     @Inject(MAT_DIALOG_DATA) public data: AssetProfileDialogParams,
     private dataService: DataService,
+    private destroyRef: DestroyRef,
     public dialogRef: MatDialogRef<GfAssetProfileDialogComponent>,
     private formBuilder: FormBuilder,
     private notificationService: NotificationService,
@@ -282,7 +282,7 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
 
     this.adminService
       .fetchAdminData()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(({ settings }) => {
         this.isDataGatheringEnabled =
           settings[PROPERTY_IS_DATA_GATHERING_ENABLED] === false ? false : true;
@@ -291,7 +291,7 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
       });
 
     this.userService.stateChanged
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((state) => {
         if (state?.user) {
           this.user = state.user;
@@ -300,7 +300,7 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
 
     this.assetProfileForm
       .get('assetClass')
-      .valueChanges.pipe(takeUntil(this.unsubscribeSubject))
+      .valueChanges.pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((assetClass) => {
         const assetSubClasses = ASSET_CLASS_MAPPING.get(assetClass) ?? [];
 
@@ -323,7 +323,7 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
         dataSource: this.data.dataSource,
         symbol: this.data.symbol
       })
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(({ assetProfile, marketData }) => {
         this.assetProfile = assetProfile;
 
@@ -436,7 +436,7 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
   }: AssetProfileIdentifier) {
     this.adminService
       .gatherProfileDataBySymbol({ dataSource, symbol })
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe();
   }
 
@@ -449,7 +449,7 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
   } & AssetProfileIdentifier) {
     this.adminService
       .gatherSymbol({ dataSource, range, symbol })
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe();
   }
 
@@ -462,7 +462,7 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
   public onSetBenchmark({ dataSource, symbol }: AssetProfileIdentifier) {
     this.dataService
       .postBenchmark({ dataSource, symbol })
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         this.dataService.updateInfo();
 
@@ -664,7 +664,7 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
 
           return EMPTY;
         }),
-        takeUntil(this.unsubscribeSubject)
+        takeUntilDestroyed(this.destroyRef)
       )
       .subscribe(() => {
         const newAssetProfileIdentifier = {
@@ -714,7 +714,7 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
           });
           return EMPTY;
         }),
-        takeUntil(this.unsubscribeSubject)
+        takeUntilDestroyed(this.destroyRef)
       )
       .subscribe(({ price }) => {
         this.notificationService.alert({
@@ -745,7 +745,7 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
   public onUnsetBenchmark({ dataSource, symbol }: AssetProfileIdentifier) {
     this.dataService
       .deleteBenchmark({ dataSource, symbol })
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         this.dataService.updateInfo();
 
@@ -755,11 +755,6 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
       });
   }
 
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
-
   public onTriggerSubmitAssetProfileForm() {
     if (this.assetProfileForm.valid) {
       this.onSubmitAssetProfileForm();

apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/create-asset-profile-dialog.component.ts

@@ -10,9 +10,10 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  OnDestroy,
+  DestroyRef,
   OnInit
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
   AbstractControl,
   FormBuilder,
@@ -31,7 +32,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatRadioModule } from '@angular/material/radio';
 import { DataSource } from '@prisma/client';
 import { isISO4217CurrencyCode } from 'class-validator';
-import { Subject, switchMap, takeUntil } from 'rxjs';
+import { switchMap } from 'rxjs';
 
 import { CreateAssetProfileDialogMode } from './interfaces/interfaces';
 
@@ -52,19 +53,19 @@ import { CreateAssetProfileDialogMode } from './interfaces/interfaces';
   styleUrls: ['./create-asset-profile-dialog.component.scss'],
   templateUrl: 'create-asset-profile-dialog.html'
 })
-export class GfCreateAssetProfileDialogComponent implements OnDestroy, OnInit {
+export class GfCreateAssetProfileDialogComponent implements OnInit {
   public createAssetProfileForm: FormGroup;
   public ghostfolioPrefix = `${ghostfolioPrefix}_`;
   public mode: CreateAssetProfileDialogMode;
 
   private customCurrencies: string[];
   private dataSourceForExchangeRates: DataSource;
-  private unsubscribeSubject = new Subject<void>();
 
   public constructor(
     public readonly adminService: AdminService,
     private readonly changeDetectorRef: ChangeDetectorRef,
     private readonly dataService: DataService,
+    private readonly destroyRef: DestroyRef,
     public readonly dialogRef: MatDialogRef<GfCreateAssetProfileDialogComponent>,
     public readonly formBuilder: FormBuilder
   ) {}
@@ -125,7 +126,7 @@ export class GfCreateAssetProfileDialogComponent implements OnDestroy, OnInit {
               symbol: `${DEFAULT_CURRENCY}${currency}`
             });
           }),
-          takeUntil(this.unsubscribeSubject)
+          takeUntilDestroyed(this.destroyRef)
         )
         .subscribe(() => {
           this.dialogRef.close({
@@ -154,11 +155,6 @@ export class GfCreateAssetProfileDialogComponent implements OnDestroy, OnInit {
     return false;
   }
 
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
-
   private atLeastOneValid(control: AbstractControl): ValidationErrors {
     const addCurrencyControl = control.get('addCurrency');
     const addSymbolControl = control.get('addSymbol');
@@ -189,7 +185,7 @@ export class GfCreateAssetProfileDialogComponent implements OnDestroy, OnInit {
   private initialize() {
     this.adminService
       .fetchAdminData()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(({ dataProviders, settings }) => {
         this.customCurrencies = settings[PROPERTY_CURRENCIES] as string[];