Main commit to remove all select decorators from the code.

IsraelHiking.Web/src/application/components/background-text.component.ts

@@ -1,11 +1,9 @@
 import { Component } from "@angular/core";
-import { Observable } from "rxjs";
-import { Store, Select } from "@ngxs/store";
-import type { Immutable } from "immer";
+import { Store } from "@ngxs/store";
 
 import { BaseMapComponent } from "./base-map.component";
 import { ResourcesService } from "../services/resources.service";
-import type { ApplicationState, Language } from "../models/models";
+import type { ApplicationState } from "../models/models";
 
 @Component({
     selector: "background-text",
@@ -14,25 +12,16 @@ import type { ApplicationState, Language } from "../models/models";
 })
 export class BackgroundTextComponent extends BaseMapComponent {
 
-    @Select((state: ApplicationState) => state.offlineState.isOfflineAvailable)
-    public isOfflineAvailable$: Observable<boolean>;
-
-    @Select((state: ApplicationState) => state.offlineState.lastModifiedDate)
-    public lastModifiedDate$: Observable<boolean>;
-
-    @Select((state: ApplicationState) => state.configuration.language)
-    public language$: Observable<Immutable<Language>>;
-
     public text: string;
 
     constructor(resources: ResourcesService,
         private readonly store: Store) {
         super(resources);
 
         this.text = "";
-        this.isOfflineAvailable$.subscribe(() => this.updateText());
-        this.lastModifiedDate$.subscribe(() => this.updateText());
-        this.language$.subscribe(() => this.updateText());
+        this.store.select((state: ApplicationState) => state.offlineState.isOfflineAvailable).subscribe(() => this.updateText());
+        this.store.select((state: ApplicationState) => state.offlineState.lastModifiedDate).subscribe(() => this.updateText());
+        this.store.select((state: ApplicationState) => state.configuration.language).subscribe(() => this.updateText());
     }
 
     private updateText() {

IsraelHiking.Web/src/application/components/dialogs/configuration-dialog.component.html

@@ -8,7 +8,7 @@
         <div class="flex flex-row" *ngIf="isApp()">
             <div class="flex-1">
                 <label id="example-radio-group-label">{{resources.batteryOptimization}}</label>
-                <mat-radio-group (change)=setBatteryOptimizationType($event.value) [value]="batteryOptimizationType | async">
+                <mat-radio-group (change)=setBatteryOptimizationType($event.value) [value]="batteryOptimizationType">
                     <div>
                         <mat-radio-button value="screen-on" color="primary" angulartics2On="click" angularticsCategory="Intro" angularticsAction="Set battery optimization on">{{resources.screenOn}}</mat-radio-button>
                     </div>
@@ -24,14 +24,14 @@
         </div>
         <div class="flex flex-row" *ngIf="isApp()">
             <div class="flex-1">
-                <mat-checkbox [checked]="isAutomaticRecordingUpload | async" (change)="toggleAutomaticRecordingUpload()" color="primary" angulartics2On="click" angularticsCategory="Configuration" angularticsAction="Toggle automatic upload">{{resources.automaticRecordingUpload}}</mat-checkbox>
+                <mat-checkbox [checked]="isAutomaticRecordingUpload" (change)="toggleAutomaticRecordingUpload()" color="primary" angulartics2On="click" angularticsCategory="Configuration" angularticsAction="Toggle automatic upload">{{resources.automaticRecordingUpload}}</mat-checkbox>
                 <br />
                 <span class="text-sm">{{resources.automaticRecordingUploadHint}}</span>
             </div>
         </div>
         <div class="flex flex-row" *ngIf="isApp()">
             <div class="flex-1">
-                <mat-checkbox [checked]="isGotLostWarnings | async" (change)="toggleGotLostWarnings()" color="primary" angulartics2On="click" angularticsCategory="Configuration" angularticsAction="Toggle got lost warnings">{{resources.gotLostWarnings}}</mat-checkbox>
+                <mat-checkbox [checked]="isGotLostWarnings" (change)="toggleGotLostWarnings()" color="primary" angulartics2On="click" angularticsCategory="Configuration" angularticsAction="Toggle got lost warnings">{{resources.gotLostWarnings}}</mat-checkbox>
                 <br />
                 <span class="text-sm">{{resources.gotLostWarningsHint}}</span>
             </div>

IsraelHiking.Web/src/application/components/dialogs/configuration-dialog.component.ts

@@ -1,7 +1,7 @@
-import { Component } from "@angular/core";
+import { Component, OnDestroy } from "@angular/core";
 import { MatDialogRef } from "@angular/material/dialog";
-import { Observable } from "rxjs";
-import { Store, Select } from "@ngxs/store";
+import { Subscription } from "rxjs";
+import { Store } from "@ngxs/store";
 
 import { BaseMapComponent } from "../base-map.component";
 import { ResourcesService } from "../../services/resources.service";
@@ -20,16 +20,13 @@ import type { ApplicationState, BatteryOptimizationType } from "../../models/mod
     selector: "configuration-dialog",
     templateUrl: "./configuration-dialog.component.html"
 })
-export class ConfigurationDialogComponent extends BaseMapComponent {
+export class ConfigurationDialogComponent extends BaseMapComponent implements OnDestroy {
 
-    @Select((state: ApplicationState) => state.configuration.batteryOptimizationType)
-    public batteryOptimizationType: Observable<BatteryOptimizationType>;
+    private subscriptions: Subscription[];
 
-    @Select((state: ApplicationState) => state.configuration.isAutomaticRecordingUpload)
-    public isAutomaticRecordingUpload: Observable<boolean>;
-
-    @Select((state: ApplicationState) => state.configuration.isGotLostWarnings)
-    public isGotLostWarnings: Observable<boolean>;
+    public batteryOptimizationType: BatteryOptimizationType;
+    public isAutomaticRecordingUpload: boolean;
+    public isGotLostWarnings: boolean;
 
     constructor(resources: ResourcesService,
         private readonly dialogRef: MatDialogRef<ConfigurationDialogComponent>,
@@ -38,6 +35,22 @@ export class ConfigurationDialogComponent extends BaseMapComponent {
         private readonly logginService: LoggingService,
         private readonly store: Store) {
         super(resources);
+        this.subscriptions = [];
+        this.subscriptions.push(this.store.select((state: ApplicationState) => state.configuration.batteryOptimizationType).subscribe((batteryOptimizationType) => {
+            this.batteryOptimizationType = batteryOptimizationType;
+        }));
+        this.subscriptions.push(this.store.select((state: ApplicationState) => state.configuration.isAutomaticRecordingUpload).subscribe((isAutomaticRecordingUpload) => {
+            this.isAutomaticRecordingUpload = isAutomaticRecordingUpload;
+        }));
+        this.subscriptions.push(this.store.select((state: ApplicationState) => state.configuration.isGotLostWarnings).subscribe((isGotLostWarnings) => {
+            this.isGotLostWarnings = isGotLostWarnings;
+        }));
+    }
+
+    public ngOnDestroy() {
+        for (const subscription of this.subscriptions) {
+            subscription.unsubscribe();
+        }
     }
 
     public isApp() {

IsraelHiking.Web/src/application/components/dialogs/layers/base-layer-add-dialog.component.ts

@@ -1,5 +1,6 @@
 import { Component } from "@angular/core";
 import { HttpClient } from "@angular/common/http";
+import { Store } from "@ngxs/store";
 
 import { LayerBaseDialogComponent } from "./layer-base-dialog.component";
 import { ResourcesService } from "../../../services/resources.service";
@@ -17,9 +18,9 @@ export class BaseLayerAddDialogComponent extends LayerBaseDialogComponent {
                 layersService: LayersService,
                 mapService: MapService,
                 toastService: ToastService,
-                http: HttpClient
-        ) {
-        super(resources, mapService, layersService, toastService, http);
+                http: HttpClient,
+                store: Store) {
+        super(resources, mapService, layersService, toastService, http, store);
         this.title = this.resources.addBaseLayer;
         this.isNew = true;
         this.isOverlay = false;

IsraelHiking.Web/src/application/components/dialogs/layers/base-layer-edit-dialog.component.ts

@@ -1,5 +1,6 @@
 import { Component } from "@angular/core";
 import { HttpClient } from "@angular/common/http";
+import { Store } from "@ngxs/store";
 
 import { ResourcesService } from "../../../services/resources.service";
 import { MapService } from "../../../services/map.service";
@@ -19,8 +20,9 @@ export class BaseLayerEditDialogComponent extends LayerBaseDialogComponent {
                 mapService: MapService,
                 layersService: LayersService,
                 toastService: ToastService,
-                http: HttpClient) {
-        super(resources, mapService, layersService, toastService, http);
+                http: HttpClient,
+                store: Store) {
+        super(resources, mapService, layersService, toastService, http, store);
         this.title = this.resources.baseLayerProperties;
         this.isNew = false;
         this.isOverlay = false;

IsraelHiking.Web/src/application/components/dialogs/layers/layer-base-dialog.component.ts

@@ -1,6 +1,6 @@
 import { HttpClient } from "@angular/common/http";
-import { firstValueFrom, Observable } from "rxjs";
-import { Select } from "@ngxs/store";
+import { firstValueFrom } from "rxjs";
+import { Store } from "@ngxs/store";
 
 import { BaseMapComponent } from "../../base-map.component";
 import { ResourcesService } from "../../../services/resources.service";
@@ -17,15 +17,14 @@ export abstract class LayerBaseDialogComponent extends BaseMapComponent {
 
     public layerData: EditableLayer;
 
-    @Select((state: ApplicationState) => state.locationState)
-    public location: Observable<Immutable<LocationState>>;
+    public location: Immutable<LocationState>;
 
     protected constructor(resources: ResourcesService,
                           protected readonly mapService: MapService,
                           protected readonly layersService: LayersService,
                           protected readonly toastService: ToastService,
-                          private readonly http: HttpClient
-    ) {
+                          private readonly http: HttpClient,
+                          private readonly store: Store) {
         super(resources);
         this.layerData = {
             minZoom: LayersService.MIN_ZOOM,
@@ -37,6 +36,10 @@ export abstract class LayerBaseDialogComponent extends BaseMapComponent {
             isOfflineAvailable: false,
             isOfflineOn: true
         } as EditableLayer;
+        // HM TODO: unsubscribe
+        this.store.select((state: ApplicationState) => state.locationState).subscribe(locationState => {
+            this.location = locationState;
+        });
     }
 
     public onAddressChanged(address: string) {

IsraelHiking.Web/src/application/components/dialogs/layers/layer-properties-dialog.component.html

@@ -39,7 +39,7 @@
         <div class="flex flex-row">
             <div class="w-full" style="height: 138px">
                 <mgl-map [zoom]="[(layerData.minZoom + layerData.maxZoom) / 2]"
-                            [center]="[(location | async)?.longitude, (location | async)?.latitude]"
+                            [center]="[location?.longitude, location?.latitude]"
                             [style]='{"version": 8, "sources": {}, "layers": [] }'
                             [attributionControl]="false">
                     <auto-layer [layerData]="layerData"

IsraelHiking.Web/src/application/components/dialogs/layers/overlay-add-dialog.component.ts

@@ -1,5 +1,6 @@
 import { Component } from "@angular/core";
 import { HttpClient } from "@angular/common/http";
+import { Store } from "@ngxs/store";
 
 import { ResourcesService } from "../../../services/resources.service";
 import { MapService } from "../../../services/map.service";
@@ -18,8 +19,9 @@ export class OverlayAddDialogComponent extends LayerBaseDialogComponent {
                 mapService: MapService,
                 layersService: LayersService,
                 toastService: ToastService,
-                http: HttpClient) {
-        super(resources, mapService, layersService, toastService, http);
+                http: HttpClient,
+                store: Store) {
+        super(resources, mapService, layersService, toastService, http, store);
         this.title = this.resources.addOverlay;
         this.isNew = true;
         this.isOverlay = true;

IsraelHiking.Web/src/application/components/dialogs/layers/overlay-edit-dialog-component.ts

@@ -1,5 +1,6 @@
 import { Component } from "@angular/core";
 import { HttpClient } from "@angular/common/http";
+import { Store } from "@ngxs/store";
 import type { Immutable } from "immer";
 
 import { ResourcesService } from "../../../services/resources.service";
@@ -21,8 +22,9 @@ export class OverlayEditDialogComponent extends LayerBaseDialogComponent {
                 mapService: MapService,
                 layersService: LayersService,
                 toastService: ToastService,
-                http: HttpClient) {
-        super(resources, mapService, layersService, toastService, http);
+                http: HttpClient,
+                store: Store) {
+        super(resources, mapService, layersService, toastService, http, store);
         this.title = this.resources.overlayProperties;
         this.isNew = false;
         this.isOverlay = true;

IsraelHiking.Web/src/application/components/dialogs/shares-dialog.component.html

@@ -22,7 +22,7 @@
                     <div class="item-image">
                         <img [src]="getImageFromShareId(shareUrl, 128, 128)" class="w-full" />
                     </div>
-                    <div class="break-lines ms-2" [class.selected]="(shownShareUrl$ | async)?.id === shareUrl.id">
+                    <div class="break-lines ms-2" [class.selected]="shownShareUrl?.id === shareUrl.id">
                         {{shareUrl.title}}<br />
                         {{shareUrl.description}}<br />
                         {{shareUrl.creationDate | date:'dd/MM/yyyy'}}

IsraelHiking.Web/src/application/components/dialogs/shares-dialog.component.ts

@@ -3,8 +3,8 @@ import { MatDialog } from "@angular/material/dialog";
 import { FormControl } from "@angular/forms";
 import { SocialSharing } from "@awesome-cordova-plugins/social-sharing/ngx";
 import { take, orderBy } from "lodash-es";
-import { Observable, Subscription } from "rxjs";
-import { Store, Select } from "@ngxs/store";
+import { Subscription } from "rxjs";
+import { Store } from "@ngxs/store";
 import type { Immutable } from "immer";
 
 import { BaseMapComponent } from "../base-map.component";
@@ -30,12 +30,7 @@ export class SharesDialogComponent extends BaseMapComponent implements OnInit, O
     public selectedShareUrlId: string;
     public loadingShareUrls: boolean;
     public searchTerm: FormControl<string>;
-
-    @Select((state: ApplicationState) => state.shareUrlsState.shareUrls)
-    public shareUrls$: Observable<Immutable<ShareUrl[]>>;
-
-    @Select((state: ApplicationState) => state.inMemoryState.shareUrl)
-    public shownShareUrl$: Observable<Immutable<ShareUrl>>;
+    public shownShareUrl: Immutable<ShareUrl>;
 
     private sessionSearchTerm = "";
     private page: number;
@@ -62,11 +57,14 @@ export class SharesDialogComponent extends BaseMapComponent implements OnInit, O
             this.updateFilteredLists(searchTerm);
         }));
         this.searchTerm.setValue(this.sessionSearchTerm);
-        this.subscriptions.push(this.shareUrls$.subscribe(() => {
+        this.subscriptions.push(this.store.select((state: ApplicationState) => state.shareUrlsState.shareUrls).subscribe(() => {
             if (!this.loadingShareUrls) {
                 this.updateFilteredLists(this.searchTerm.value);
             }
         }));
+        this.subscriptions.push(this.store.select((state: ApplicationState) => state.inMemoryState.shareUrl).subscribe((shareUrl) => {
+            this.shownShareUrl = shareUrl;
+        }));
     }
 
     public async ngOnInit() {

IsraelHiking.Web/src/application/components/dialogs/traces-dialog.component.ts

@@ -1,9 +1,9 @@
 import { Component, OnInit, OnDestroy, ViewEncapsulation, Inject } from "@angular/core";
 import { FormControl } from "@angular/forms";
 import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
-import { Subscription, Observable } from "rxjs";
+import { Subscription } from "rxjs";
 import { orderBy, take } from "lodash-es";
-import { Store, Select } from "@ngxs/store";
+import { Store } from "@ngxs/store";
 import type { Immutable } from "immer";
 
 import { BaseMapComponent } from "../base-map.component";
@@ -35,9 +35,6 @@ export class TracesDialogComponent extends BaseMapComponent implements OnInit, O
     public loadingTraces: boolean;
     public searchTerm: FormControl<string>;
 
-    @Select((state: ApplicationState) => state.tracesState.traces)
-    public traces$: Observable<Immutable<Trace[]>>;
-
     private sessionSearchTerm = "";
     private page: number;
     private tracesChangedSubscription: Subscription;
@@ -72,7 +69,7 @@ export class TracesDialogComponent extends BaseMapComponent implements OnInit, O
             this.updateFilteredLists(searchTerm);
         });
         this.searchTerm.setValue(this.sessionSearchTerm);
-        this.tracesChangedSubscription = this.traces$.subscribe(() => {
+        this.tracesChangedSubscription = this.store.select((state: ApplicationState) => state.tracesState.traces).subscribe(() => {
             if (!this.loadingTraces) {
                 this.updateFilteredLists(this.searchTerm.value);
             }

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

@@ -5,7 +5,7 @@
     <button mat-button *ngIf="isRouteEditActive()" (click)="setRouting('Bike')" [ngClass]="{active : getRoutingType() === 'Bike' }" matTooltip="{{resources.bikeRouting}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Routing Bike"><i class="fa icon-bike fa-lg"></i></button>
     <button mat-button *ngIf="isRouteEditActive()" (click)="setRouting('4WD')" [ngClass]="{active : getRoutingType() === '4WD' }" matTooltip="{{resources.fourWheelDriveRouting}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Routing 4WD"><i class="fa icon-four-by-four fa-lg"></i></button>
     <button mat-button *ngIf="isRouteEditActive()" (click)="setRouting('None')" [ngClass]="{active : getRoutingType() === 'None' }" matTooltip="{{resources.straightLines}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Routing None"><i class="fa icon-none fa-lg"></i></button>
-    <button mat-button (click)="undo()" [disabled]="(undoQueueLength | async) === 0" matTooltip="{{resources.undo}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Draw undo"><i class="fa icon-mail-reply fa-lg"></i></button>
+    <button mat-button (click)="undo()" [disabled]="undoQueueLength === 0" matTooltip="{{resources.undo}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Draw undo"><i class="fa icon-mail-reply fa-lg"></i></button>
     <mat-menu #appMenu="matMenu" overlapTrigger="false" [xPosition]="'before'">
         <button mat-menu-item (click)="clearRoute()" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Clear route"><i class="fa icon-recordings"></i> {{resources.clearRoute}}</button>
         <button mat-menu-item (click)="clearPois()" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Clear pois"><i class="fa icon-map-marker"></i> {{resources.clearPois}}</button>

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

@@ -1,6 +1,5 @@
 import { Component, HostListener } from "@angular/core";
-import { Observable } from "rxjs";
-import { Store, Select } from "@ngxs/store";
+import { Store } from "@ngxs/store";
 
 import { BaseMapComponent } from "./base-map.component";
 import { ResourcesService } from "../services/resources.service";
@@ -25,14 +24,17 @@ import type { RoutingType, ApplicationState } from "../models/models";
 })
 export class DrawingComponent extends BaseMapComponent {
 
-    @Select((state: ApplicationState) => state.routes.past.length)
-    public undoQueueLength: Observable<number>;
+    public undoQueueLength: number;
 
     constructor(resources: ResourcesService,
                 private readonly selectedRouteService: SelectedRouteService,
                 private readonly toastService: ToastService,
                 private readonly store: Store) {
         super(resources);
+        this.undoQueueLength = 0;
+        this.store.select((state: ApplicationState) => state.routes.past.length).subscribe((length) => {
+            this.undoQueueLength = length;
+        });
     }
 
     @HostListener("window:keydown", ["$event"])