Add takeuntildestroyed

IsraelHiking.Web/src/application/components/route-statistics.component.html

@@ -1,4 +1,4 @@
-<div class="control-container side-control maplibregl-ctrl" [dir]="resources.direction" (window:resize)="redrawChart()" *ngIf="statisticsVisible">
+<div class="control-container side-control maplibregl-ctrl" [dir]="resources.direction" (window:resize)="redrawChart()" *ngIf="statisticsVisible$ | async">
     <div *ngIf="isOpen" [@animateChart] class="chart-control-container" [ngClass]="{'expanded' : isExpanded, 'sidebar': isSidebarVisible() }">
         <div *ngIf="isTable" class="chart-container">
             <mat-grid-list cols="3" rowHeight="fit" class="chart-table">

IsraelHiking.Web/src/application/components/route-statistics.component.ts

@@ -1,6 +1,6 @@
-import { Component, ViewEncapsulation, OnInit, OnDestroy, ViewChild, ElementRef, ChangeDetectorRef } from "@angular/core";
+import { Component, ViewEncapsulation, OnInit, ViewChild, ElementRef, ChangeDetectorRef } from "@angular/core";
 import { trigger, style, transition, animate } from "@angular/animations";
-import { Subscription, interval } from "rxjs";
+import { Observable, interval } from "rxjs";
 import { regressionLoess } from "d3-regression";
 import { LineLayerSpecification } from "maplibre-gl";
 import { Store } from "@ngxs/store";
@@ -19,6 +19,7 @@ import { GeoLocationService } from "../services/geo-location.service";
 import { AudioPlayerFactory, IAudioPlayer } from "../services/audio-player.factory";
 import { ToggleIsShowKmMarkersAction, ToggleIsShowSlopeAction } from "../reducers/configuration.reducer";
 import type { LatLngAlt, ApplicationState, LatLngAltTime } from "../models/models";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 
 declare type DragState = "start" | "drag" | "none";
 
@@ -72,7 +73,7 @@ interface IChartElements {
         )
     ],
 })
-export class RouteStatisticsComponent extends BaseMapComponent implements OnInit, OnDestroy {
+export class RouteStatisticsComponent extends BaseMapComponent implements OnInit {
     private static readonly HOVER_BOX_WIDTH = 160;
     private static readonly MAX_SLOPE = 20;
 
@@ -97,14 +98,13 @@ export class RouteStatisticsComponent extends BaseMapComponent implements OnInit
     public slopeRouteSource: GeoJSON.FeatureCollection<GeoJSON.LineString>;
     public subRouteRange: IChartSubRouteRange;
     public slopeRoutePaint: LineLayerSpecification["paint"];
-    public statisticsVisible: boolean;
+    public statisticsVisible$: Observable<boolean>;
 
     @ViewChild("lineChartContainer")
     public lineChartContainer: ElementRef;
 
     private statistics: RouteStatistics;
     private chartElements: IChartElements;
-    private componentSubscriptions: Subscription[];
     private zoom: number;
     private routeColor: string;
     private audioPlayer: IAudioPlayer;
@@ -124,12 +124,10 @@ export class RouteStatisticsComponent extends BaseMapComponent implements OnInit
         this.isOpen = false;
         this.isTable = false;
         this.isFollowing = false;
-        this.statisticsVisible = false;
         this.statistics = null;
         this.subRouteRange = null;
         this.heading = null;
         this.setViewStatisticsValues(null);
-        this.componentSubscriptions = [];
         this.kmMarkersSource = {
             type: "FeatureCollection",
             features: []
@@ -151,10 +149,11 @@ export class RouteStatisticsComponent extends BaseMapComponent implements OnInit
             this.zoom = zoom;
             this.updateKmMarkers();
         });
-        this.componentSubscriptions.push(this.sidebarService.sideBarStateChanged.subscribe(() => {
+        this.sidebarService.sideBarStateChanged.pipe(takeUntilDestroyed()).subscribe(() => {
             this.redrawChart();
-        }));
-        this.componentSubscriptions.push(this.selectedRouteService.selectedRouteHover.subscribe(this.onSelectedRouteHover));
+        });
+        this.selectedRouteService.selectedRouteHover.pipe(takeUntilDestroyed()).subscribe(this.onSelectedRouteHover);
+        this.statisticsVisible$ =this.store.select((state: ApplicationState) => state.uiComponentsState.statisticsVisible);
     }
 
     private setViewStatisticsValues(statistics: RouteStatistics): void {
@@ -226,47 +225,38 @@ export class RouteStatisticsComponent extends BaseMapComponent implements OnInit
     }
 
     public async ngOnInit() {
-        this.componentSubscriptions.push(this.store.select((state: ApplicationState) => state.routes.present).subscribe(() => {
+        this.store.select((state: ApplicationState) => state.routes.present).pipe(takeUntilDestroyed()).subscribe(() => {
             this.routeChanged();
-        }));
-        this.componentSubscriptions.push(this.store.select((state: ApplicationState) => state.routeEditingState.selectedRouteId).subscribe(() => {
+        });
+        this.store.select((state: ApplicationState) => state.routeEditingState.selectedRouteId).pipe(takeUntilDestroyed()).subscribe(() => {
             this.routeChanged();
-        }));
-        this.componentSubscriptions.push(this.store.select((state: ApplicationState) => state.configuration.language).subscribe(() => {
+        });
+        this.store.select((state: ApplicationState) => state.configuration.language).pipe(takeUntilDestroyed()).subscribe(() => {
             this.redrawChart();
-        }));
-        this.componentSubscriptions.push(this.store.select((state: ApplicationState) => state.gpsState.currentPosition).subscribe(p => {
+        });
+        this.store.select((state: ApplicationState) => state.gpsState.currentPosition).pipe(takeUntilDestroyed()).subscribe(p => {
             this.onGeolocationChanged(p);
-        }));
-        this.componentSubscriptions.push(this.store.select((state: ApplicationState) => state.configuration.isShowSlope).subscribe(showSlope => {
+        });
+        this.store.select((state: ApplicationState) => state.configuration.isShowSlope).pipe(takeUntilDestroyed()).subscribe(showSlope => {
             this.isSlopeOn = showSlope;
             this.redrawChart();
             this.updateSlopeRoute();
-        }));
-        this.componentSubscriptions.push(this.store.select((state: ApplicationState) => state.configuration.isShowKmMarker).subscribe(showKmMarkers => {
+        });
+        this.store.select((state: ApplicationState) => state.configuration.isShowKmMarker).pipe(takeUntilDestroyed()).subscribe(showKmMarkers => {
             this.isKmMarkersOn = showKmMarkers;
             this.updateKmMarkers();
-        }));
-        this.componentSubscriptions.push(this.store.select((state: ApplicationState) => state.uiComponentsState.statisticsVisible).subscribe(visible => {
-            this.statisticsVisible = visible;
-        }));
+        });
         this.routeChanged();
-        this.componentSubscriptions.push(interval(1000).subscribe(() => {
+        interval(1000).pipe(takeUntilDestroyed()).subscribe(() => {
             const recordedRouteState = this.store.selectSnapshot((s: ApplicationState) => s.recordedRouteState);
             if (recordedRouteState.isRecording) {
                 const recordingStartTime = new Date(recordedRouteState.route.latlngs[0].timestamp).getTime();
                 this.updateDurationString((new Date().getTime() - recordingStartTime) / 1000);
             }
-        }));
+        });
         this.audioPlayer = await this.audioPlayerFactory.create();
     }
 
-    public ngOnDestroy() {
-        for (const subscription of this.componentSubscriptions) {
-            subscription.unsubscribe();
-        }
-    }
-
     public changeState(state: string) {
         switch (state) {
             case "table":