From 2627b9035d4bc737c30a913b9654732514cfa9bc Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Sat, 8 Feb 2025 23:11:54 -0500
Subject: [PATCH] feat: adding pluralizer util. fix: measurement unit in marker
 popup

---
 .../PageComponents/Map/NodeDetail.tsx         |  8 ++++-
 src/core/utils/string.ts                      | 31 +++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 src/core/utils/string.ts

diff --git a/src/components/PageComponents/Map/NodeDetail.tsx b/src/components/PageComponents/Map/NodeDetail.tsx
index 5203d077..23112f34 100644
--- a/src/components/PageComponents/Map/NodeDetail.tsx
+++ b/src/components/PageComponents/Map/NodeDetail.tsx
@@ -1,6 +1,7 @@
 import { Separator } from "@app/components/UI/Seperator";
 import { H5 } from "@app/components/UI/Typography/H5.tsx";
 import { Subtle } from "@app/components/UI/Typography/Subtle.tsx";
+import { formatQuantity } from "@app/core/utils/string";
 import { Avatar } from "@components/UI/Avatar";
 import { Mono } from "@components/generic/Mono.tsx";
 import { TimeAgo } from "@components/generic/Table/tmp/TimeAgo.tsx";
@@ -132,7 +133,12 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
               className="ml-2 mr-1"
               aria-label="Elevation"
             />
-            <div>{node.position?.altitude} ft</div>
+            <div>
+              {formatQuantity(node.position?.altitude, {
+                one: "meter",
+                other: "meters",
+              })}
+            </div>
           </div>
         )}
       </div>
diff --git a/src/core/utils/string.ts b/src/core/utils/string.ts
new file mode 100644
index 00000000..2cabf70d
--- /dev/null
+++ b/src/core/utils/string.ts
@@ -0,0 +1,31 @@
+interface PluralForms {
+  one: string;
+  other: string;
+  [key: string]: string;
+}
+
+interface FormatOptions {
+  locale?: string;
+  pluralRules?: Intl.PluralRulesOptions;
+  numberFormat?: Intl.NumberFormatOptions;
+}
+
+export function formatQuantity(
+  value: number,
+  forms: PluralForms,
+  options: FormatOptions = {},
+) {
+  const {
+    locale = "en-US",
+    pluralRules: pluralOptions = { type: "cardinal" },
+    numberFormat: numberOptions = {},
+  } = options;
+
+  const pluralRules = new Intl.PluralRules(locale, pluralOptions);
+  const numberFormat = new Intl.NumberFormat(locale, numberOptions);
+
+  const pluralCategory = pluralRules.select(value);
+  const word = forms[pluralCategory];
+
+  return `${numberFormat.format(value)} ${word}`;
+}