From e0b7e616b3929ba73157c3ffc0c4616deba0e1fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= <dev@theaninova.de>
Date: Wed, 20 Sep 2023 10:16:30 +0200
Subject: [PATCH] fix: live update distance in list items

---
 .changeset/loud-buttons-repeat.md             |  5 ++++
 .../types/place/place-list-item.component.ts  | 27 +++++--------------
 .../data/types/place/place-list-item.html     | 26 +++++++++---------
 3 files changed, 25 insertions(+), 33 deletions(-)
 create mode 100644 .changeset/loud-buttons-repeat.md

diff --git a/.changeset/loud-buttons-repeat.md b/.changeset/loud-buttons-repeat.md
new file mode 100644
index 00000000..a5a71666
--- /dev/null
+++ b/.changeset/loud-buttons-repeat.md
@@ -0,0 +1,5 @@
+---
+'@openstapps/app': patch
+---
+
+Fixed distance not updating in list items
diff --git a/frontend/app/src/app/modules/data/types/place/place-list-item.component.ts b/frontend/app/src/app/modules/data/types/place/place-list-item.component.ts
index 54f004d3..81c6b5bc 100644
--- a/frontend/app/src/app/modules/data/types/place/place-list-item.component.ts
+++ b/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 getter
-   */
-  get item(): PlaceTypesWithDistance {
-    return this._item;
-  }
+  _item: PlaceTypesWithDistance;
 
   /**
    * 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.distanceSubscription = interval(10_000).subscribe(_ => {
-        this.distance = this.positionService.getDistance(item.geo.point);
-      });
+      this.distance = timer(0, 10_000).pipe(map(() => this.positionService.getDistance(item.geo.point)));
     }
   }
 
-  /**
-   * An item to show
-   */
-  private _item: PlaceTypesWithDistance;
-
   /**
    * Distance in meters
    */
-  distance?: number;
-
-  distanceSubscription?: Subscription;
+  distance?: Observable<number | undefined>;
 
   constructor(private positionService: PositionService) {}
 }
diff --git a/frontend/app/src/app/modules/data/types/place/place-list-item.html b/frontend/app/src/app/modules/data/types/place/place-list-item.html
index cf530c13..56492e83 100644
--- a/frontend/app/src/app/modules/data/types/place/place-list-item.html
+++ b/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>
-        <ng-container *ngIf="item.type !== 'floor'">
-          <p class="title-sub" *ngIf="item.openingHours">
+        <ion-label class="title">{{ 'name' | thingTranslate: _item }}</ion-label>
+        <ng-container *ngIf="_item.type !== 'floor'">
+          <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-label> {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }} </ion-label>
-              <ion-label *ngIf="distance" class="distance">
+            <ion-note *ngIf="_item.categories && _item.type !== 'building'; else onlyType">
+              <ion-label> {{ 'categories' | thingTranslate: _item | join: ', ' | titlecase }} </ion-label>
+              <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 *ngIf="distance" class="distance">
+              <ion-label> {{ 'type' | thingTranslate: _item | titlecase }} </ion-label>
+              <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'">
-      <ion-col size="auto" class="in-place" *ngIf="item.inPlace">
+    <ng-container *ngIf="_item.type !== 'building'">
+      <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>