refactor: improve display of distances

src/app/translation/common-string-pipes.ts

@@ -25,7 +25,7 @@ const openingHoursFn = require('opening_hours');
 @Injectable()
 @Pipe({
   name: 'join',
-  pure: false, // required to update the value when the promise is resolved
+  pure: true,
 })
 export class ArrayJoinPipe implements PipeTransform {
   value = '';
@@ -50,7 +50,7 @@ export class ArrayJoinPipe implements PipeTransform {
 @Injectable()
 @Pipe({
   name: 'sentencecase',
-  pure: false, // required to update the value when the promise is resolved
+  pure: true,
 })
 export class SentenceCasePipe implements PipeTransform {
   value = '';
@@ -71,7 +71,7 @@ export class SentenceCasePipe implements PipeTransform {
 @Injectable()
 @Pipe({
   name: 'split',
-  pure: false, // required to update the value when the promise is resolved
+  pure: true,
 })
 export class StringSplitPipe implements PipeTransform {
   value = new Array<unknown>();
@@ -96,9 +96,9 @@ export class StringSplitPipe implements PipeTransform {
 @Injectable()
 @Pipe({
   name: 'openingHours',
-  pure: false, // required to update the value when the promise is resolved
+  pure: false,
 })
-export class OpeningHoursPipe implements PipeTransform {
+export class OpeningHoursPipe implements PipeTransform, OnDestroy {
   locale: string;
 
   onLangChange?: Subscription;
@@ -115,6 +115,10 @@ export class OpeningHoursPipe implements PipeTransform {
     }
   }
 
+  ngOnDestroy(): void {
+    this._dispose();
+  }
+
   transform(aString: string | unknown): string {
     this.updateValue(aString);
     this._dispose();
@@ -165,10 +169,86 @@ export class OpeningHoursPipe implements PipeTransform {
   }
 }
 
+@Injectable()
+@Pipe({
+  name: 'metersLocalized',
+  pure: false,
+})
+export class MetersLocalizedPipe implements PipeTransform, OnDestroy {
+  locale: string;
+
+  onLangChange?: Subscription;
+
+  value = '';
+
+  constructor(private readonly translate: TranslateService) {
+    this.locale = translate.currentLang;
+  }
+
+  private _dispose(): void {
+    if (this.onLangChange?.closed === false) {
+      this.onLangChange?.unsubscribe();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this._dispose();
+  }
+
+  transform(value: string | number | unknown): string {
+    this.updateValue(value);
+    this._dispose();
+    if (this.onLangChange?.closed === true) {
+      this.onLangChange = this.translate.onLangChange.subscribe(
+        (event: LangChangeEvent) => {
+          this.locale = event.lang;
+          this.updateValue(value);
+        },
+      );
+    }
+
+    return this.value;
+  }
+
+  updateValue(value: string | number | unknown) {
+    if (typeof value !== 'string' && typeof value !== 'number') {
+      logger.warn(`metersLocalized pipe unable to parse input: ${value}`);
+
+      return;
+    }
+    const imperialLocale = ['US', 'UK', 'LR', 'MM'].some(term =>
+      this.locale.includes(term),
+    );
+    const meters =
+      typeof value === 'string' ? Number.parseFloat(value) : (value as number);
+
+    if (imperialLocale) {
+      const yards = meters * 1.0936;
+      const options = {
+        style: 'unit',
+        unit: yards >= 1760 ? 'mile' : 'yard',
+        maximumFractionDigits: yards >= 1760 ? 1 : 0,
+      } as unknown as Intl.NumberFormatOptions;
+      this.value = new Intl.NumberFormat(this.locale, options).format(
+        yards >= 1760 ? yards / 1760 : yards,
+      );
+    } else {
+      const options = {
+        style: 'unit',
+        unit: meters >= 1000 ? 'kilometer' : 'meter',
+        maximumFractionDigits: meters >= 1000 ? 1 : 0,
+      } as unknown as Intl.NumberFormatOptions;
+      this.value = new Intl.NumberFormat(this.locale, options).format(
+        meters >= 1000 ? meters / 1000 : meters,
+      );
+    }
+  }
+}
+
 @Injectable()
 @Pipe({
   name: 'numberLocalized',
-  pure: false, // required to update the value when the promise is resolved
+  pure: false,
 })
 export class NumberLocalizedPipe implements PipeTransform, OnDestroy {
   locale: string;
@@ -237,7 +317,7 @@ export class NumberLocalizedPipe implements PipeTransform, OnDestroy {
 @Injectable()
 @Pipe({
   name: 'dateFormat',
-  pure: false, // required to update the value when the promise is resolved
+  pure: false,
 })
 export class DateLocalizedFormatPipe implements PipeTransform, OnDestroy {
   locale: string;