Use async more

IsraelHikingMap · Jun 13, 2024 · a362e34 · a362e34
1 parent cc90adc
commit a362e34
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/IsraelHiking.Web/src/application/components/map/recorded-route.component.html b/IsraelHiking.Web/src/application/components/map/recorded-route.component.html
@@ -76,7 +76,7 @@
 <div *ngIf="(recordedRoute$ | async)">
     <div *ngFor="let marker of (recordedRoute$ | async).markers; let idx = index">
         <mgl-marker anchor="bottom"
-            [draggable]="isAddingPoi"
+            [draggable]="isAddingPoi$ | async"
             [lngLat]="marker.latlng"
             (markerDragEnd)="markerDragEnd(idx, $event)">
             <private-poi-overlay [marker]="marker" [index]="idx" [color]="resources.recordedRouteColor"></private-poi-overlay>

diff --git a/IsraelHiking.Web/src/application/components/map/recorded-route.component.ts b/IsraelHiking.Web/src/application/components/map/recorded-route.component.ts
@@ -1,4 +1,5 @@
 import { Component } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { Observable, combineLatest, throttleTime } from "rxjs";
 import { Store } from "@ngxs/store";
 import type { Immutable } from "immer";
@@ -17,7 +18,7 @@ export class RecordedRouteComponent extends BaseMapComponent {
 
     static readonly NUMBER_OF_POINTS_IN_ROUTE_SPLIT = 4000;
 
-    public isAddingPoi: boolean;
+    public isAddingPoi$: Observable<boolean>;
     public recordedRouteSegments: GeoJSON.Feature<GeoJSON.LineString>[];
     public lastRouteSegment: GeoJSON.Feature<GeoJSON.LineString>;
     public startPointGeoJson: GeoJSON.Feature<GeoJSON.Point>;
@@ -45,12 +46,10 @@ export class RecordedRouteComponent extends BaseMapComponent {
         this.currentPosition$ = this.store.select((state: ApplicationState) => state.gpsState.currentPosition);
 
         // Combine streams to work when both current location and recorded route changes, added throttle to avoid a double update of the UI
-        combineLatest([this.recordedRoute$, this.currentPosition$]).pipe(throttleTime(50, undefined, { trailing: true }))
+        combineLatest([this.recordedRoute$, this.currentPosition$]).pipe(throttleTime(50, undefined, { trailing: true }), takeUntilDestroyed())
             .subscribe(() => this.handleRecordingChanges());
 
-        this.store.select((state: ApplicationState) => state.recordedRouteState.isAddingPoi).subscribe((isAddingPoi) => {
-            this.isAddingPoi = isAddingPoi;
-        });
+        this.isAddingPoi$ = this.store.select((state: ApplicationState) => state.recordedRouteState.isAddingPoi);
     }
 
     public isRecording() {