diff --git a/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts b/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts index 4e5daf345..b9dc9077c 100644 --- a/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts +++ b/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 { takeUntil } from 'rxjs/operators'; +import { Subscription } from 'rxjs'; 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; 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(); - 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();