From c5d16fd25c1f7a9a9561fa7d077792cda55bda97 Mon Sep 17 00:00:00 2001
From: Johan Ohly <johanohly@gmail.com>
Date: Mon, 9 Sep 2024 19:33:01 +0200
Subject: [PATCH] fix: handle user unit (km, mi) in flight tooltips

---
 src/lib/components/map/Map.svelte | 14 ++++++++++----
 src/lib/utils/index.ts            |  2 +-
 src/lib/utils/number.ts           |  6 +++++-
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/map/Map.svelte b/src/lib/components/map/Map.svelte
index f318686..eb31d31 100644
--- a/src/lib/components/map/Map.svelte
+++ b/src/lib/components/map/Map.svelte
@@ -3,6 +3,7 @@
     calculateBounds,
     prepareFlightArcData,
     type FlightData,
+    kmToMiles, pluralize,
   } from '$lib/utils/index.js';
   import {
     AttributionControl,
@@ -21,6 +22,7 @@
   import { mode } from 'mode-watcher';
   import { OnResizeEnd } from '$lib/components/helpers';
   import { Airports } from '.';
+  import { page } from '$app/stores';
 
   const FROM_COLOR = [59, 130, 246]; // Also the primary color
   const TO_COLOR = [139, 92, 246]; // TW violet-500
@@ -32,6 +34,8 @@
     flights: FlightData[];
   } = $props();
 
+  const metric = $derived($page.data.user?.unit !== 'imperial');
+
   let map: maplibregl.Map | undefined = $state(undefined);
   const style = $derived(
     $mode === 'light'
@@ -140,19 +144,21 @@
       <div class="h-[1px] bg-muted my-3" />
       <div class="grid grid-cols-[repeat(3,_1fr)] px-3">
         <h4 class="font-semibold">
-          {Math.round(data.distance)}
-          <span class="font-thin text-muted-foreground">km</span>
+          {Math.round(metric ? data.distance : kmToMiles(data.distance))}
+          <span class="font-thin text-muted-foreground"
+            >{metric ? 'km' : 'mi'}</span
+          >
         </h4>
         <h4 class="font-semibold">
           {data.flights.length}
           <span class="font-thin text-muted-foreground"
-            >trip{data.flights.length !== 1 ? 's' : ''}</span
+            >{pluralize(data.flights.length, 'trip')}</span
           >
         </h4>
         <h4 class="font-semibold">
           {data.airlines.length}
           <span class="font-thin text-muted-foreground"
-            >airline{data.airlines.length !== 1 ? 's' : ''}</span
+            >{pluralize(data.airlines.length, 'airline')}</span
           >
         </h4>
       </div>
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index ca48c85..438db29 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -13,4 +13,4 @@ export { distanceBetween, linearClamped } from './distance';
 export { toISOString, isUsingAmPm } from './datetime';
 export { calculateBounds } from './latlng';
 export { toTitleCase, pluralize } from './string';
-export { formatNumber, formatDistance, formatDuration } from './number';
+export { formatNumber, kmToMiles, formatDistance, formatDuration } from './number';
diff --git a/src/lib/utils/number.ts b/src/lib/utils/number.ts
index af2b53c..d5ba6e9 100644
--- a/src/lib/utils/number.ts
+++ b/src/lib/utils/number.ts
@@ -9,13 +9,17 @@ export const formatNumber = (n: number) => {
   return formatter.format(n);
 };
 
+export const kmToMiles = (km: number) => {
+  return km * 0.6214;
+};
+
 export const formatDistance = (km: number, metric = true) => {
   return new Intl.NumberFormat(undefined, {
     style: 'unit',
     unit: metric ? 'kilometer' : 'mile',
     unitDisplay: 'short',
     maximumFractionDigits: 0,
-  }).format(metric ? km : km * 0.6214);
+  }).format(metric ? km : kmToMiles(km));
 };
 
 export const formatDuration = (seconds: number) => {