Add missing destory ref

IsraelHikingMap · Jun 13, 2024 · 82496fc · 82496fc
1 parent f45dde8
commit 82496fc
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 21 deletions.
diff --git a/IsraelHiking.Web/src/application/components/location.component.ts b/IsraelHiking.Web/src/application/components/location.component.ts
@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, DestroyRef } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { MapComponent } from "@maplibre/ngx-maplibre-gl";
 import { Store } from "@ngxs/store";
@@ -43,6 +43,7 @@ export class LocationComponent extends BaseMapComponent {
                 private readonly fitBoundsService: FitBoundsService,
                 private readonly deviceOrientationService: DeviceOrientationService,
                 private readonly store: Store,
+                private readonly destroyRef: DestroyRef,
                 private readonly mapComponent: MapComponent) {
         super(resources);
 
@@ -88,13 +89,13 @@ export class LocationComponent extends BaseMapComponent {
                 }
             });
 
-            this.store.select((state: ApplicationState) => state.gpsState.currentPosition).pipe(takeUntilDestroyed()).subscribe(position => {
+            this.store.select((state: ApplicationState) => state.gpsState.currentPosition).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(position => {
                 if (position != null) {
                     this.handlePositionChange(position);
                 }
             });
 
-            this.deviceOrientationService.orientationChanged.subscribe((bearing: number) => {
+            this.deviceOrientationService.orientationChanged.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((bearing: number) => {
                 if (!this.isActive() || this.locationFeatures.features.length === 0) {
                     return;
                 }

diff --git a/IsraelHiking.Web/src/application/components/map/automatic-layer-presentation.component.ts b/IsraelHiking.Web/src/application/components/map/automatic-layer-presentation.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit, OnChanges, SimpleChanges, OnDestroy } from "@angular/core";
+import { Component, Input, OnInit, OnChanges, SimpleChanges, OnDestroy, DestroyRef } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { MapComponent } from "@maplibre/ngx-maplibre-gl";
 import {
@@ -53,7 +53,8 @@ export class AutomaticLayerPresentationComponent extends BaseMapComponent implem
                 private readonly fileService: FileService,
                 private readonly connectionSerive: ConnectionService,
                 private readonly mapService: MapService,
-                private readonly store: Store) {
+                private readonly store: Store,
+                private readonly destroyRef: DestroyRef) {
         super(resources);
         const layerIndex = AutomaticLayerPresentationComponent.indexNumber++;
         this.rasterLayerId = `raster-layer-${layerIndex}`;
@@ -65,7 +66,7 @@ export class AutomaticLayerPresentationComponent extends BaseMapComponent implem
         this.jsonLayersIds = [];
         this.recreateQueue.pipe(mergeMap((action: () => Promise<void>) => action(), 1)).subscribe();
         this.mapLoadedPromise = new Promise((resolve, _) => {
-            this.mapComponent.mapLoad.pipe(takeUntilDestroyed()).subscribe(() => {
+            this.mapComponent.mapLoad.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
                 resolve();
             });
         });
@@ -74,13 +75,13 @@ export class AutomaticLayerPresentationComponent extends BaseMapComponent implem
     public ngOnInit() {
         this.addLayerRecreationQuqueItem(null, this.layerData);
         this.currentLanguageCode = this.store.selectSnapshot((s: ApplicationState) => s.configuration).language.code;
-        this.store.select((state: ApplicationState) => state.configuration.language).pipe(takeUntilDestroyed()).subscribe((language) => {
+        this.store.select((state: ApplicationState) => state.configuration.language).pipe(takeUntilDestroyed(this.destroyRef)).subscribe((language) => {
             if (this.currentLanguageCode !== language.code) {
                 this.addLayerRecreationQuqueItem(this.layerData, this.layerData);
             }
             this.currentLanguageCode = language.code;
         });
-        this.connectionSerive.stateChanged.pipe(takeUntilDestroyed()).subscribe((online) => {
+        this.connectionSerive.stateChanged.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((online) => {
             if (online === this.hasInternetAccess) {
                 return;
             }

diff --git a/IsraelHiking.Web/src/application/components/map/layers-view.component.ts b/IsraelHiking.Web/src/application/components/map/layers-view.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, DestroyRef, OnInit } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { Router } from "@angular/router";
 import { Observable } from "rxjs";
@@ -41,7 +41,8 @@ export class LayersViewComponent extends BaseMapComponent implements OnInit {
                 private readonly poiService: PoiService,
                 private readonly selectedRouteService: SelectedRouteService,
                 private readonly navigateHereService: NavigateHereService,
-                private readonly store: Store
+                private readonly store: Store,
+                private readonly destroyRef: DestroyRef
     ) {
         super(resources);
         this.selectedCluster = null;
@@ -61,10 +62,10 @@ export class LayersViewComponent extends BaseMapComponent implements OnInit {
 
     public ngOnInit() {
         this.poiGeoJsonData = this.poiService.poiGeojsonFiltered;
-        this.poiService.poisChanged.pipe(takeUntilDestroyed()).subscribe(() => {
+        this.poiService.poisChanged.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             this.poiGeoJsonData = this.poiService.poiGeojsonFiltered;
         });
-        this.store.select((state: ApplicationState) => state.poiState.selectedPointOfInterest).pipe(takeUntilDestroyed()).subscribe(poi => this.onSelectedPoiChanged(poi));
+        this.store.select((state: ApplicationState) => state.poiState.selectedPointOfInterest).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(poi => this.onSelectedPoiChanged(poi));
     }
 
     private onSelectedPoiChanged(poi: Immutable<GeoJSON.Feature>) {

diff --git a/IsraelHiking.Web/src/application/components/route-statistics.component.ts b/IsraelHiking.Web/src/application/components/route-statistics.component.ts
@@ -1,4 +1,4 @@
-import { Component, ViewEncapsulation, OnInit, ViewChild, ElementRef, ChangeDetectorRef } from "@angular/core";
+import { Component, ViewEncapsulation, OnInit, ViewChild, ElementRef, ChangeDetectorRef, DestroyRef } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { trigger, style, transition, animate } from "@angular/animations";
 import { Observable, interval } from "rxjs";
@@ -117,7 +117,8 @@ export class RouteStatisticsComponent extends BaseMapComponent implements OnInit
                 private readonly cancelableTimeoutService: CancelableTimeoutService,
                 private readonly sidebarService: SidebarService,
                 private readonly audioPlayerFactory: AudioPlayerFactory,
-                private readonly store: Store
+                private readonly store: Store,
+                private readonly destroyRef: DestroyRef,
     ) {
         super(resources);
         this.isExpanded = false;
@@ -225,29 +226,29 @@ export class RouteStatisticsComponent extends BaseMapComponent implements OnInit
     }
 
     public async ngOnInit() {
-        this.store.select((state: ApplicationState) => state.routes.present).pipe(takeUntilDestroyed()).subscribe(() => {
+        this.store.select((state: ApplicationState) => state.routes.present).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             this.routeChanged();
         });
-        this.store.select((state: ApplicationState) => state.routeEditingState.selectedRouteId).pipe(takeUntilDestroyed()).subscribe(() => {
+        this.store.select((state: ApplicationState) => state.routeEditingState.selectedRouteId).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             this.routeChanged();
         });
-        this.store.select((state: ApplicationState) => state.configuration.language).pipe(takeUntilDestroyed()).subscribe(() => {
+        this.store.select((state: ApplicationState) => state.configuration.language).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             this.redrawChart();
         });
-        this.store.select((state: ApplicationState) => state.gpsState.currentPosition).pipe(takeUntilDestroyed()).subscribe(p => {
+        this.store.select((state: ApplicationState) => state.gpsState.currentPosition).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(p => {
             this.onGeolocationChanged(p);
         });
-        this.store.select((state: ApplicationState) => state.configuration.isShowSlope).pipe(takeUntilDestroyed()).subscribe(showSlope => {
+        this.store.select((state: ApplicationState) => state.configuration.isShowSlope).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(showSlope => {
             this.isSlopeOn = showSlope;
             this.redrawChart();
             this.updateSlopeRoute();
         });
-        this.store.select((state: ApplicationState) => state.configuration.isShowKmMarker).pipe(takeUntilDestroyed()).subscribe(showKmMarkers => {
+        this.store.select((state: ApplicationState) => state.configuration.isShowKmMarker).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(showKmMarkers => {
             this.isKmMarkersOn = showKmMarkers;
             this.updateKmMarkers();
         });
         this.routeChanged();
-        interval(1000).pipe(takeUntilDestroyed()).subscribe(() => {
+        interval(1000).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             const recordedRouteState = this.store.selectSnapshot((s: ApplicationState) => s.recordedRouteState);
             if (recordedRouteState.isRecording) {
                 const recordingStartTime = new Date(recordedRouteState.route.latlngs[0].timestamp).getTime();