Remove @select selector from ngxs due to deperaction (#2010)

* Main commit to remove all select decorators from the code. * Use more async, add pipe for destroy. * Use more async in layers properties dialog * More fixes with async in html * add takeuntildestroied to traces * Move drawing to use async pipe * Remove unneded field, add takeuntildestroied. * Improve takeuntildestory logic. * Add takeuntildestroied * add takeuntildestory for layers view * reduce changes * Add more takeuntildestried * Move initialization to constructor. * Use async more * Add takeuntildestoyed * Add takeuntildestroyed * make distance async * Less changes * Add takeuntildestroyed * Move import up * Add pipe * add missing space * add takeuntildestryed * move back to async * Fix html * Add async * Fix lint * Add missing destory ref * Fix automatic layer presentation unsubscribe issue.
IsraelHikingMap · Jun 16, 2024 · 0374c76 · 0374c76
1 parent 7058bee
commit 0374c76
Show file tree

Hide file tree

Showing 41 changed files with 223 additions and 412 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/background-text.component.ts b/IsraelHiking.Web/src/application/components/background-text.component.ts
@@ -1,11 +1,10 @@
 import { Component } from "@angular/core";
-import { Observable } from "rxjs";
-import { Store, Select } from "@ngxs/store";
-import type { Immutable } from "immer";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+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 +13,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).pipe(takeUntilDestroyed()).subscribe(() => this.updateText());
+        this.store.select((state: ApplicationState) => state.offlineState.lastModifiedDate).pipe(takeUntilDestroyed()).subscribe(() => this.updateText());
+        this.store.select((state: ApplicationState) => state.configuration.language).pipe(takeUntilDestroyed()).subscribe(() => this.updateText());
     }
 
     private updateText() {

diff --git a/IsraelHiking.Web/src/application/components/dialogs/configuration-dialog.component.html b/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$ | async">
                     <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$ | async" (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$ | async" (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>

diff --git a/IsraelHiking.Web/src/application/components/dialogs/configuration-dialog.component.ts b/IsraelHiking.Web/src/application/components/dialogs/configuration-dialog.component.ts
@@ -1,7 +1,7 @@
 import { Component } from "@angular/core";
 import { MatDialogRef } from "@angular/material/dialog";
 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";
@@ -22,14 +22,9 @@ import type { ApplicationState, BatteryOptimizationType } from "../../models/mod
 })
 export class ConfigurationDialogComponent extends BaseMapComponent {
 
-    @Select((state: ApplicationState) => state.configuration.batteryOptimizationType)
-    public batteryOptimizationType: Observable<BatteryOptimizationType>;
-
-    @Select((state: ApplicationState) => state.configuration.isAutomaticRecordingUpload)
-    public isAutomaticRecordingUpload: Observable<boolean>;
-
-    @Select((state: ApplicationState) => state.configuration.isGotLostWarnings)
-    public isGotLostWarnings: Observable<boolean>;
+    public batteryOptimizationType$: Observable<BatteryOptimizationType>;
+    public isAutomaticRecordingUpload$: Observable<boolean>;
+    public isGotLostWarnings$: Observable<boolean>;
 
     constructor(resources: ResourcesService,
         private readonly dialogRef: MatDialogRef<ConfigurationDialogComponent>,
@@ -38,6 +33,9 @@ export class ConfigurationDialogComponent extends BaseMapComponent {
         private readonly logginService: LoggingService,
         private readonly store: Store) {
         super(resources);
+        this.batteryOptimizationType$ = this.store.select((state: ApplicationState) => state.configuration.batteryOptimizationType);
+        this.isAutomaticRecordingUpload$ = this.store.select((state: ApplicationState) => state.configuration.isAutomaticRecordingUpload);
+        this.isGotLostWarnings$ = this.store.select((state: ApplicationState) => state.configuration.isGotLostWarnings);
     }
 
     public isApp() {

diff --git a/...elHiking.Web/src/application/components/dialogs/layers/base-layer-add-dialog.component.ts b/...elHiking.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;

diff --git a/...lHiking.Web/src/application/components/dialogs/layers/base-layer-edit-dialog.component.ts b/...lHiking.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;

diff --git a/IsraelHiking.Web/src/application/components/dialogs/layers/layer-base-dialog.component.ts b/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 { Observable, firstValueFrom } from "rxjs";
+import { Store } from "@ngxs/store";
 
 import { BaseMapComponent } from "../../base-map.component";
 import { ResourcesService } from "../../../services/resources.service";
@@ -14,18 +14,15 @@ export abstract class LayerBaseDialogComponent extends BaseMapComponent {
     public title: string;
     public isNew: boolean;
     public isOverlay: boolean;
-
     public layerData: EditableLayer;
-
-    @Select((state: ApplicationState) => state.locationState)
-    public location: Observable<Immutable<LocationState>>;
+    public location$: Observable<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 +34,8 @@ export abstract class LayerBaseDialogComponent extends BaseMapComponent {
             isOfflineAvailable: false,
             isOfflineOn: true
         } as EditableLayer;
+
+        this.location$ = this.store.select((state: ApplicationState) => state.locationState);
     }
 
     public onAddressChanged(address: string) {

diff --git a/...king.Web/src/application/components/dialogs/layers/layer-properties-dialog.component.html b/...king.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$ | async)?.longitude, (location$ | async)?.latitude]"
                             [style]='{"version": 8, "sources": {}, "layers": [] }'
                             [attributionControl]="false">
                     <auto-layer [layerData]="layerData"

diff --git a/IsraelHiking.Web/src/application/components/dialogs/layers/overlay-add-dialog.component.ts b/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;

diff --git a/IsraelHiking.Web/src/application/components/dialogs/layers/overlay-edit-dialog-component.ts b/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;

diff --git a/IsraelHiking.Web/src/application/components/dialogs/shares-dialog.component.ts b/IsraelHiking.Web/src/application/components/dialogs/shares-dialog.component.ts
@@ -1,10 +1,11 @@
-import { Component, OnInit, ViewEncapsulation, OnDestroy } from "@angular/core";
+import { Component, OnInit, ViewEncapsulation } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 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 { Observable } from "rxjs";
+import { Store } from "@ngxs/store";
 import type { Immutable } from "immer";
 
 import { BaseMapComponent } from "../base-map.component";
@@ -23,23 +24,17 @@ import type { ApplicationState, ShareUrl } from "../../models/models";
     styleUrls: ["shares-dialog.component.scss"],
     encapsulation: ViewEncapsulation.None
 })
-export class SharesDialogComponent extends BaseMapComponent implements OnInit, OnDestroy {
+export class SharesDialogComponent extends BaseMapComponent implements OnInit {
 
     public filteredShareUrls: Immutable<ShareUrl[]>;
     public shareUrlInEditMode: ShareUrl;
     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>>;
 
     private sessionSearchTerm = "";
     private page: number;
-    private subscriptions: Subscription[];
 
     constructor(resources: ResourcesService,
                 private readonly dialog: MatDialog,
@@ -56,17 +51,17 @@ export class SharesDialogComponent extends BaseMapComponent implements OnInit, O
         this.shareUrlInEditMode = null;
         this.selectedShareUrlId = null;
         this.page = 1;
-        this.subscriptions = [];
         this.searchTerm = new FormControl<string>("");
-        this.subscriptions.push(this.searchTerm.valueChanges.subscribe((searchTerm: string) => {
+        this.searchTerm.valueChanges.pipe(takeUntilDestroyed()).subscribe((searchTerm: string) => {
             this.updateFilteredLists(searchTerm);
-        }));
+        });
         this.searchTerm.setValue(this.sessionSearchTerm);
-        this.subscriptions.push(this.shareUrls$.subscribe(() => {
+        this.store.select((state: ApplicationState) => state.shareUrlsState.shareUrls).pipe(takeUntilDestroyed()).subscribe(() => {
             if (!this.loadingShareUrls) {
                 this.updateFilteredLists(this.searchTerm.value);
             }
-        }));
+        });
+        this.shownShareUrl$ = this.store.select((state: ApplicationState) => state.inMemoryState.shareUrl).pipe(takeUntilDestroyed());
     }
 
     public async ngOnInit() {
@@ -76,12 +71,6 @@ export class SharesDialogComponent extends BaseMapComponent implements OnInit, O
         this.updateFilteredLists(this.searchTerm.value);
     }
 
-    public ngOnDestroy() {
-        for (const subscription of this.subscriptions) {
-            subscription.unsubscribe();
-        }
-    }
-
     public isApp(): boolean {
         return this.runningContextService.isCapacitor;
     }