fix: live update distance in list items

.changeset/loud-buttons-repeat.md

@@ -0,0 +1,5 @@
+---
+'@openstapps/app': patch
+---
+
+Fixed distance not updating in list items

frontend/app/src/app/modules/data/types/place/place-list-item.component.ts

@@ -12,10 +12,11 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {PositionService} from '../../../map/position.service';
-import {interval, Subscription} from 'rxjs';
+import {Observable, timer} from 'rxjs';
 import {hasValidLocation, isSCFloor, PlaceTypes, PlaceTypesWithDistance} from './place-types';
+import {map} from 'rxjs/operators';
 
 /**
  * Shows a place as a list item
@@ -24,14 +25,10 @@ import {hasValidLocation, isSCFloor, PlaceTypes, PlaceTypesWithDistance} from '.
   selector: 'stapps-place-list-item',
   templateUrl: 'place-list-item.html',
   styleUrls: ['place-list-item.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PlaceListItemComponent {
-  /**
+  _item: PlaceTypesWithDistance;
-   * Item getter
-   */
-  get item(): PlaceTypesWithDistance {
-    return this._item;
-  }
 
   /**
    * An item to show (setter is used as there were issues assigning the distance to the right place in a list)
@@ -39,24 +36,14 @@ export class PlaceListItemComponent {
   @Input() set item(item: PlaceTypes) {
     this._item = item;
     if (!isSCFloor(item) && hasValidLocation(item)) {
-      this.distance = this.positionService.getDistance(item.geo.point);
+      this.distance = timer(0, 10_000).pipe(map(() => this.positionService.getDistance(item.geo.point)));
-      this.distanceSubscription = interval(10_000).subscribe(_ => {
-        this.distance = this.positionService.getDistance(item.geo.point);
-      });
     }
   }
 
-  /**
-   * An item to show
-   */
-  private _item: PlaceTypesWithDistance;
-
   /**
    * Distance in meters
    */
-  distance?: number;
+  distance?: Observable<number | undefined>;
-
-  distanceSubscription?: Subscription;
 
   constructor(private positionService: PositionService) {}
 }

frontend/app/src/app/modules/data/types/place/place-list-item.html

@@ -17,17 +17,17 @@
   <ion-row>
     <ion-col>
       <div class="ion-text-wrap">
-        <ion-label class="title">{{ 'name' | thingTranslate: item }}</ion-label>
+        <ion-label class="title">{{ 'name' | thingTranslate: _item }}</ion-label>
-        <ng-container *ngIf="item.type !== 'floor'">
+        <ng-container *ngIf="_item.type !== 'floor'">
-          <p class="title-sub" *ngIf="item.openingHours">
+          <p class="title-sub" *ngIf="_item.openingHours">
             <span>
-              <stapps-opening-hours [openingHours]="item.openingHours"></stapps-opening-hours>
+              <stapps-opening-hours [openingHours]="_item.openingHours"></stapps-opening-hours>
             </span>
           </p>
           <p>
-            <ion-note *ngIf="item.categories && item.type !== 'building'; else onlyType">
+            <ion-note *ngIf="_item.categories && _item.type !== 'building'; else onlyType">
-              <ion-label> {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }} </ion-label>
+              <ion-label> {{ 'categories' | thingTranslate: _item | join: ', ' | titlecase }} </ion-label>
-              <ion-label *ngIf="distance" class="distance">
+              <ion-label *ngIf="distance | async as distance" class="distance">
                 <ion-icon name="directions_walk"></ion-icon>
                 {{ distance | metersLocalized }}
               </ion-label>
@@ -35,21 +35,21 @@
           </p>
           <ng-template #onlyType>
             <ion-note>
-              <ion-label> {{ 'type' | thingTranslate: item | titlecase }} </ion-label>
+              <ion-label> {{ 'type' | thingTranslate: _item | titlecase }} </ion-label>
-              <ion-label *ngIf="distance" class="distance">
+              <ion-label *ngIf="distance | async as distance" class="distance">
                 <ion-icon name="directions_walk"></ion-icon>
                 {{ distance | metersLocalized }}
               </ion-label>
             </ion-note>
           </ng-template>
         </ng-container>
-        <p *ngIf="item.description">{{ 'description' | thingTranslate: item }}</p>
+        <p *ngIf="_item.description">{{ 'description' | thingTranslate: _item }}</p>
       </div>
     </ion-col>
-    <ng-container *ngIf="item.type !== 'building'">
+    <ng-container *ngIf="_item.type !== 'building'">
-      <ion-col size="auto" class="in-place" *ngIf="item.inPlace">
+      <ion-col size="auto" class="in-place" *ngIf="_item.inPlace">
         <ion-icon name="pin_drop"></ion-icon
-        ><ion-label>{{ 'name' | thingTranslate: item.inPlace }}</ion-label>
+        ><ion-label>{{ 'name' | thingTranslate: _item.inPlace }}</ion-label>
       </ion-col>
     </ng-container>
   </ion-row>