Fix automatic layer presentation unsubscribe issue.

IsraelHikingMap · Jun 13, 2024 · c5d91cb · c5d91cb
1 parent 4565818
commit c5d91cb
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 32 deletions.
diff --git a/IsraelHiking.Web/src/application/components/application-state.component.ts b/IsraelHiking.Web/src/application/components/application-state.component.ts
@@ -1,34 +1,30 @@
-import { Component, OnInit, OnDestroy } from "@angular/core";
-
+import { Component, DestroyRef, OnInit } from "@angular/core";
 import { Router, ActivatedRoute } from "@angular/router";
-import { Subscription } from "rxjs";
 import { Store } from "@ngxs/store";
 
 import { RouteStrings } from "../services/hash.service";
 import { SidebarService } from "../services/sidebar.service";
 import { DataContainerService } from "../services/data-container.service";
 import { FitBoundsService } from "../services/fit-bounds.service";
 import { SetFileUrlAndBaseLayerAction, SetShareUrlAction } from "../reducers/in-memory.reducer";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 
 @Component({
     selector: "application-state",
     template: "<div></div>"
 })
-export class ApplicationStateComponent implements OnInit, OnDestroy {
-
-    private subscription: Subscription;
-
+export class ApplicationStateComponent implements OnInit {
     constructor(private readonly router: Router,
                 private readonly route: ActivatedRoute,
                 private readonly sidebarService: SidebarService,
                 private readonly dataContainerService: DataContainerService,
                 private readonly fitBoundsService: FitBoundsService,
-                private readonly store: Store) {
-        this.subscription = null;
+                private readonly store: Store,
+                private readonly destroyRef: DestroyRef) {
     }
 
     public ngOnInit() {
-        this.subscription = this.route.params.subscribe(params => {
+        this.route.params.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(params => {
             if (this.router.url.startsWith(RouteStrings.ROUTE_MAP)) {
                 this.fitBoundsService.flyTo({
                     lng: +params[RouteStrings.LON],
@@ -46,10 +42,4 @@ export class ApplicationStateComponent implements OnInit, OnDestroy {
             }
         });
     }
-
-    public ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
-    }
 }
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,5 +1,4 @@
-import { Component, Input, OnInit, OnChanges, SimpleChanges, OnDestroy, DestroyRef } from "@angular/core";
-import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { Component, Input, OnInit, OnChanges, SimpleChanges, OnDestroy } from "@angular/core";
 import { MapComponent } from "@maplibre/ngx-maplibre-gl";
 import {
     StyleSpecification,
@@ -8,7 +7,7 @@ import {
     SourceSpecification,
     LayerSpecification
 } from "maplibre-gl";
-import { Subject, mergeMap } from "rxjs";
+import { Subject, Subscription, mergeMap } from "rxjs";
 import { Store } from "@ngxs/store";
 
 import { BaseMapComponent } from "../base-map.component";
@@ -41,6 +40,7 @@ export class AutomaticLayerPresentationComponent extends BaseMapComponent implem
 
     private rasterSourceId: string;
     private rasterLayerId: string;
+    private subscriptions: Subscription[];
     private jsonSourcesIds: string[];
     private jsonLayersIds: string[];
     private hasInternetAccess: boolean;
@@ -53,8 +53,7 @@ export class AutomaticLayerPresentationComponent extends BaseMapComponent implem
                 private readonly fileService: FileService,
                 private readonly connectionSerive: ConnectionService,
                 private readonly mapService: MapService,
-                private readonly store: Store,
-                private readonly destroyRef: DestroyRef) {
+                private readonly store: Store) {
         super(resources);
         const layerIndex = AutomaticLayerPresentationComponent.indexNumber++;
         this.rasterLayerId = `raster-layer-${layerIndex}`;
@@ -64,24 +63,25 @@ export class AutomaticLayerPresentationComponent extends BaseMapComponent implem
         this.hasInternetAccess = true;
         this.jsonSourcesIds = [];
         this.jsonLayersIds = [];
-        this.recreateQueue.pipe(mergeMap((action: () => Promise<void>) => action(), 1)).subscribe();
+        this.subscriptions = [];
+        this.subscriptions.push(this.recreateQueue.pipe(mergeMap((action: () => Promise<void>) => action(), 1)).subscribe());
         this.mapLoadedPromise = new Promise((resolve, _) => {
-            this.mapComponent.mapLoad.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.subscriptions.push(this.mapComponent.mapLoad.subscribe(() => {
                 resolve();
-            });
+            }));
         });
     }
 
     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(this.destroyRef)).subscribe((language) => {
+        this.subscriptions.push(this.store.select((state: ApplicationState) => state.configuration.language).subscribe((language) => {
             if (this.currentLanguageCode !== language.code) {
                 this.addLayerRecreationQuqueItem(this.layerData, this.layerData);
             }
             this.currentLanguageCode = language.code;
-        });
-        this.connectionSerive.stateChanged.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((online) => {
+        }));
+        this.subscriptions.push(this.connectionSerive.stateChanged.subscribe((online) => {
             if (online === this.hasInternetAccess) {
                 return;
             }
@@ -94,12 +94,15 @@ export class AutomaticLayerPresentationComponent extends BaseMapComponent implem
                 return;
             }
             this.addLayerRecreationQuqueItem(this.layerData, this.layerData);
-        });
+        }));
     }
 
     public ngOnDestroy() {
         this.addLayerRecreationQuqueItem(this.layerData, null);
         this.recreateQueue.complete();
+        for (const subscription of this.subscriptions) {
+            subscription.unsubscribe();
+        }
     }
 
     public ngOnChanges(changes: SimpleChanges) {
@@ -237,4 +240,4 @@ export class AutomaticLayerPresentationComponent extends BaseMapComponent implem
             }
         });
     }
-}
+}
diff --git a/IsraelHiking.Web/src/application/directives/image-capture.directive.ts b/IsraelHiking.Web/src/application/directives/image-capture.directive.ts
@@ -19,7 +19,7 @@ export class ImageCaptureDirective implements OnDestroy {
     @Output()
     public changed: EventEmitter<HTMLElementInputChangeEvent>;
 
-    private listenFunction: () => void;
+    private unsbscribeFn: () => void;
 
     constructor(elementRef: ElementRef,
                 private readonly renderer: Renderer2,
@@ -29,7 +29,7 @@ export class ImageCaptureDirective implements OnDestroy {
                 private readonly fileService: FileService) {
 
         this.changed = new EventEmitter();
-        this.listenFunction = this.renderer.listen(elementRef.nativeElement, "click", (event) => {
+        this.unsbscribeFn = this.renderer.listen(elementRef.nativeElement, "click", (event) => {
             if (!environment.isCapacitor) {
                 return;
             }
@@ -78,6 +78,6 @@ export class ImageCaptureDirective implements OnDestroy {
     }
 
     ngOnDestroy(): void {
-        this.listenFunction();
+        this.unsbscribeFn();
     }
 }