Move to signals and other refactoring.

Author: HarelM

IsraelHiking.Web/src/application/components/drawing.component.ts

@@ -51,6 +51,20 @@ export class DrawingComponent {
     private readonly presentRoutes = this.store.selectSignal((state: ApplicationState) => state.routes.present);
     private readonly selectedRoute = computed(() => this.presentRoutes().find(r => r.id === this.routeEditingState().selectedRouteId));
 
+    public readonly isPoiEditActive = computed(() => {
+        const selectedRoute = this.selectedRoute();
+        return selectedRoute && selectedRoute.state === "Poi";
+    });
+
+    public readonly isRouteEditActive = computed(() => {
+        const selectedRoute = this.selectedRoute();
+        return selectedRoute != null && selectedRoute.state === "Route";
+    });
+
+    public readonly canDeleteAllRoutes = computed(() => this.presentRoutes().length > 0);
+
+    public readonly hasMultipleRoutes = computed(() => this.presentRoutes().length > 1);
+
     @HostListener("window:keydown", ["$event"])
     public onDrawingShortcutKeys($event: KeyboardEvent) {
         if (($event.ctrlKey && $event.code === "KeyY") ||
@@ -90,16 +104,6 @@ export class DrawingComponent {
         this.store.dispatch(new ClearPoisAndRouteAction(selectedRoute.id));
     }
 
-    public isPoiEditActive() {
-        const selectedRoute = this.selectedRoute();
-        return selectedRoute && selectedRoute.state === "Poi";
-    }
-
-    public isRouteEditActive() {
-        const selectedRoute = this.selectedRoute();
-        return selectedRoute != null && selectedRoute.state === "Route";
-    }
-
     public isEditActive() {
         return this.isPoiEditActive() || this.isRouteEditActive();
     }
@@ -193,10 +197,6 @@ export class DrawingComponent {
         this.store.dispatch(new ClearHistoryAction());
     }
 
-    public canDeleteAllRoutes() {
-        return this.presentRoutes().length > 0;
-    }
-
     public togglePrivateRoutes() {
         this.sidebarService.toggle("private-routes");
     }
@@ -233,10 +233,6 @@ export class DrawingComponent {
         }
     }
 
-    public hasMultipleRoutes() {
-        return this.presentRoutes().length > 1;
-    }
-
     public allXRoutesText() {
         return this.resources.allXRoutes.replace("{{count}}", this.presentRoutes().length.toString());
     }

IsraelHiking.Web/src/application/components/legend-item.component.ts

@@ -1,13 +1,13 @@
-import { Component, inject, input } from "@angular/core";
+import { Component, inject, input, computed } from "@angular/core";
 import { NgClass } from "@angular/common";
 import { Dir } from "@angular/cdk/bidi";
 import { MatTooltip } from "@angular/material/tooltip";
 
 import { AnalyticsDirective } from "../directives/analytics.directive";
 import { LayersService } from "../services/layers.service";
-import { ResourcesService } from "../services/resources.service";
 import { MapService } from "../services/map.service";
 import { HIKING_MAP } from "../reducers/initial-state";
+import type { ResourcesService } from "../services/resources.service";
 import type { LatLngAltTime } from "../models";
 
 type LegendItemType = "POI" | "Way";
@@ -34,23 +34,22 @@ export class LegendItemComponent {
 
     public item = input<ILegendItem>();
 
-    public readonly resources = inject(ResourcesService);
 
     private readonly mapService = inject(MapService);
     private readonly layersService = inject(LayersService);
 
-    public moveToLocation() {
-        this.mapService.moveTo(this.item().latlng, this.item().zoom, 0);
-    }
-
-    public getLink() {
+    public readonly getLink = computed(() => {
         if (this.item().link === LegendItemComponent.OSM_KEY_LINK) {
             return `https://wiki.openstreetmap.org/wiki/Key:${this.item().osmTags[0].split("=")[0]}`;
         }
         if (this.item().link === LegendItemComponent.OSM_TAG_LINK) {
             return `https://wiki.openstreetmap.org/wiki/Tag:${this.item().osmTags[0].split(" ")[0]}`;
         }
         return this.item().link;
+    });
+
+    public moveToLocation() {
+        this.mapService.moveTo(this.item().latlng, this.item().zoom, 0);
     }
 
     public getImageAddress() {

IsraelHiking.Web/src/application/components/location.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, signal } from "@angular/core";
+import { Component, inject, signal, computed } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { MatButton } from "@angular/material/button";
 import { MatTooltip } from "@angular/material/tooltip";
@@ -50,6 +50,18 @@ export class LocationComponent {
     private readonly recordedRouteState = this.store.selectSignal((s: ApplicationState) => s.recordedRouteState);
     private readonly mapComponent = inject(MapComponent);
 
+    public readonly isKeepNorthUp = computed(() => this.inMemoryState().keepNorthUp);
+
+    public readonly getRotationAngle = computed(() => `rotate(${-this.bearing()}deg)`);
+
+    public readonly isDisabled = computed(() => this.gpsState().tracking === "disabled");
+
+    public readonly isActive = computed(() => this.gpsState().tracking === "tracking");
+
+    public readonly isLoading = computed(() => this.gpsState().tracking === "searching");
+
+    public readonly isAddingRecordingPoi = computed(() => this.recordedRouteState().isAddingPoi);
+
     constructor() {
         this.clearLocationFeatureCollection();
 
@@ -105,21 +117,13 @@ export class LocationComponent {
         }
     }
 
-    public isKeepNorthUp() {
-        return this.inMemoryState().keepNorthUp;
-    }
-
     public toggleKeepNorthUp() {
         this.store.dispatch(new ToggleKeepNorthUpAction());
         if (this.isKeepNorthUp()) {
             this.mapComponent.mapInstance.rotateTo(0);
         }
     }
 
-    public getRotationAngle() {
-        return `rotate(${-this.bearing()}deg)`;
-    }
-
     public toggleTracking() {
         if (this.isLoading()) {
             this.locationService.disable();
@@ -196,22 +200,6 @@ export class LocationComponent {
         }
     }
 
-    public isDisabled() {
-        return this.gpsState().tracking === "disabled";
-    }
-
-    public isActive() {
-        return this.gpsState().tracking === "tracking";
-    }
-
-    public isLoading() {
-        return this.gpsState().tracking === "searching";
-    }
-
-    public isAddingRecordingPoi() {
-        return this.recordedRouteState().isAddingPoi;
-    }
-
     public toggleAddRecordingPoi() {
         const selectedRoute = this.selectedRouteService.getSelectedRoute();
         if (selectedRoute && (selectedRoute.state === "Poi" || selectedRoute.state === "Route")) {

IsraelHiking.Web/src/application/components/main-menu.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject } from "@angular/core";
+import { Component, inject, computed } from "@angular/core";
 import { RouterLink, RouterLinkActive } from "@angular/router";
 import { MatButton } from "@angular/material/button";
 import { MatMenuTrigger, MatMenu, MatMenuItem } from "@angular/material/menu";
@@ -51,6 +51,8 @@ export class MainMenuComponent {
     public userInfo = this.store.selectSignal((state: ApplicationState) => state.userState.userInfo);
     private readonly isSubscribed = this.store.selectSignal((state: ApplicationState) => state.offlineState.isSubscribed);
 
+    public readonly isLoggedIn = computed(() => this.userInfo() != null);
+
     constructor() {
         if (this.runningContextService.isCapacitor) {
             App.getInfo().then((info) => {
@@ -59,10 +61,6 @@ export class MainMenuComponent {
         }
     }
 
-    public isLoggedIn() {
-        return this.userInfo() != null;
-    }
-
     public isApp() {
         return this.runningContextService.isCapacitor;
     }

IsraelHiking.Web/src/application/components/map/automatic-layer-presentation.component.ts

@@ -4,7 +4,6 @@ import { Subject, mergeMap } from "rxjs";
 import { Store } from "@ngxs/store";
 import type { SourceSpecification, LayerSpecification } from "maplibre-gl";
 
-import { ResourcesService } from "../../services/resources.service";
 import { DefaultStyleService } from "../../services/default-style.service";
 import type { ApplicationState, EditableLayer, LanguageCode, LayerData } from "../../models";
 
@@ -26,7 +25,6 @@ export class AutomaticLayerPresentationComponent implements OnInit, OnChanges, O
     private currentLanguageCode: LanguageCode;
     private readonly recreateQueue = new Subject<() => Promise<void>>();
 
-    public readonly resources = inject(ResourcesService);
 
     private readonly mapComponent = inject(MapComponent);
     private readonly defaultStyleService = inject(DefaultStyleService);

IsraelHiking.Web/src/application/components/map/public-pois.component.ts

@@ -1,4 +1,4 @@
-import { Component, DestroyRef, inject, OnInit, signal } from "@angular/core";
+import { Component, DestroyRef, inject, OnInit, signal, computed } from "@angular/core";
 
 import { Dir } from "@angular/cdk/bidi";
 import { MatButton } from "@angular/material/button";
@@ -25,7 +25,7 @@ import { SetSelectedPoiAction } from "../../reducers/poi.reducer";
 import { AddPrivatePoiAction } from "../../reducers/routes.reducer";
 import { GeoJSONUtils } from "../../services/geojson-utils";
 import { Urls } from "../../urls";
-import type { ApplicationState, LatLngAltTime, LinkData, MarkerData } from "../../models";
+import type { ApplicationState, LinkData, MarkerData } from "../../models";
 import { skip } from "rxjs";
 
 @Component({
@@ -62,6 +62,8 @@ export class PublicPoisComponent implements OnInit {
     private readonly destroyRef = inject(DestroyRef);
     private readonly mapComponent = inject(MapComponent);
 
+    public readonly getSelectedFeatureLatlng = computed(() => SpatialService.toLatLng(this.selectedPoiFeature().geometry.coordinates as [number, number]));
+
     public ngOnInit() {
         this.poiGeoJsonData.set(this.poiService.getPoisGeoJson());
         this.store.select((state: ApplicationState) => state.configuration.language).pipe(takeUntilDestroyed(this.destroyRef), skip(1)).subscribe(() => {
@@ -188,10 +190,6 @@ export class PublicPoisComponent implements OnInit {
         this.hoverFeature.set(null);
     }
 
-    public getSelectedFeatureLatlng(): LatLngAltTime {
-        return SpatialService.toLatLng(this.selectedPoiFeature().geometry.coordinates as [number, number]);
-    }
-
     public navigateHere() {
         this.navigateHereService.addNavigationSegment(this.getSelectedFeatureLatlng());
         this.clearSelected();

IsraelHiking.Web/src/application/components/overlays/missing-part-overlay.component.ts

@@ -1,4 +1,4 @@
-import { Component, ViewEncapsulation, inject, input, model, output, signal } from "@angular/core";
+import { Component, ViewEncapsulation, inject, input, model, output, signal, computed } from "@angular/core";
 import { HttpClient } from "@angular/common/http";
 import { Dir } from "@angular/cdk/bidi";
 import { MatButton } from "@angular/material/button";
@@ -35,18 +35,14 @@ export class MissingPartOverlayComponent {
     private readonly httpClient = inject(HttpClient);
     private readonly toastService = inject(ToastService);
 
-    public getHighwayType(): string {
-        return this.feature().properties.highway || "track";
-    }
+    public readonly getHighwayType = computed(() => this.feature().properties.highway || "track");
+
+    public readonly getColor = computed(() => this.feature().properties.colour || "none");
 
     public setHighwayType(highwayType: string) {
         this.feature.update(feature => ({ ...feature, properties: { ...feature.properties, highway: highwayType } }));
     }
 
-    public getColor(): string {
-        return this.feature().properties.colour || "none";
-    }
-
     public setColor(color: string) {
         this.feature.update(feature => {
             const properties = { ...feature.properties, colour: color };

IsraelHiking.Web/src/application/components/photoswipe.component.ts

@@ -1,7 +1,6 @@
 import { Component, ElementRef, AfterViewInit, InjectionToken, ViewEncapsulation, EventEmitter, viewChild, inject } from "@angular/core";
 import PhotoSwipe from "photoswipe";
 
-import { ResourcesService } from "../services/resources.service";
 
 export const PHOTO_SWIPE_DATA = new InjectionToken<PhotoSwipeData>("PHOTO_SWIPE_DATA");
 
@@ -18,7 +17,6 @@ export type PhotoSwipeData = {
 })
 export class PhotoSwpieComponent implements AfterViewInit {
 
-    public readonly resources = inject(ResourcesService);
     public photoswipe = viewChild<ElementRef>("photoswipe");
     public readonly closed = new EventEmitter();
     private readonly data = inject(PHOTO_SWIPE_DATA);

IsraelHiking.Web/src/application/components/public-routes-filter.component.ts

@@ -1,4 +1,4 @@
-import { Component, DestroyRef, inject, signal } from "@angular/core";
+import { Component, DestroyRef, inject, signal, computed } from "@angular/core";
 import { MatCheckbox } from "@angular/material/checkbox";
 import { MatMenu, MatMenuItem, MatMenuTrigger } from "@angular/material/menu";
 import { MatButton } from "@angular/material/button";
@@ -31,6 +31,12 @@ export class PublicRoutesFilterComponent {
 
     private readonly publicRoutesFilter = this.store.selectSignal((s: ApplicationState) => s.inMemoryState.publicRoutesFilter);
 
+    public readonly isCategoryFiltered = computed(() => this.publicRoutesFilter().categories.length !== initialState.inMemoryState.publicRoutesFilter.categories.length);
+
+    public readonly isDifficultyFiltered = computed(() => this.publicRoutesFilter().difficulty.length !== initialState.inMemoryState.publicRoutesFilter.difficulty.length);
+
+    public readonly isLengthFiltered = computed(() => this.filterLengthStart() > 0 || this.filterLengthEnd() < 50);
+
     constructor() {
         this.store.select((state: ApplicationState) => state.configuration.units).pipe(takeUntilDestroyed(this.destroyRef)).subscribe((units) => {
             this.unitString.set(this.resources.getLongDistanceUnitString(units));
@@ -66,14 +72,6 @@ export class PublicRoutesFilterComponent {
         return this.publicRoutesFilter().categories.includes(category);
     }
 
-    public isCategoryFiltered() {
-        return this.publicRoutesFilter().categories.length !== initialState.inMemoryState.publicRoutesFilter.categories.length;
-    }
-
-    public isDifficultyFiltered() {
-        return this.publicRoutesFilter().difficulty.length !== initialState.inMemoryState.publicRoutesFilter.difficulty.length;
-    }
-
     public isDificultySelected(difficulty: Difficulty) {
         return this.publicRoutesFilter().difficulty.includes(difficulty);
     }
@@ -92,10 +90,6 @@ export class PublicRoutesFilterComponent {
         this.store.dispatch(new SetPublicRoutesFilterAction(filters));
     }
 
-    public isLengthFiltered() {
-        return this.filterLengthStart() > 0 || this.filterLengthEnd() < 50
-    }
-
     public hasUserFilter() {
         return this.store.selectSnapshot((s: ApplicationState) => s.inMemoryState.publicRoutesFilter.userId) != null;
     }

IsraelHiking.Web/src/application/components/screens/offline-management.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, signal } from "@angular/core";
+import { Component, inject, signal, computed } from "@angular/core";
 import { Store } from "@ngxs/store";
 import { GeoJSONSourceComponent, LayerComponent, MapComponent } from "@maplibre/ngx-maplibre-gl";
 import { type Map, type MapMouseEvent, MercatorCoordinate, type StyleSpecification } from "maplibre-gl";
@@ -40,6 +40,14 @@ export class OfflineManagementComponent {
     private readonly downloadedTilesState = this.store.selectSignal((s: ApplicationState) => s.offlineState.downloadedTiles);
     public readonly resources = inject(ResourcesService);
 
+    public readonly isSelectedAvailableForOffline = computed(() => {
+        if (!this.selectedTileXY()) {
+            return false;
+        }
+        const downloadedTiles = this.downloadedTilesState();
+        return downloadedTiles != null && downloadedTiles[`${this.selectedTileXY().tileX}-${this.selectedTileXY().tileY}`] != null;
+    });
+
     constructor() {
         this.offlineMapStyle = this.defaultStyleService.getStyleWithPlaceholders();
         this.baseLayerData = this.layersService.selectedBaseLayer();
@@ -246,14 +254,6 @@ export class OfflineManagementComponent {
         this.initializeCenterAndZoomFromDownloadingTile();
     }
 
-    public isSelectedAvailableForOffline(): boolean {
-        if (!this.selectedTileXY()) {
-            return false;
-        }
-        const downloadedTiles = this.downloadedTilesState();
-        return downloadedTiles != null && downloadedTiles[`${this.selectedTileXY().tileX}-${this.selectedTileXY().tileY}`] != null;
-    }
-
     public async deleteSelected() {
         if (!this.selectedTileXY()) {
             return;