refactor: intlFormat util

Signed-off-by: rare-magma <[email protected]>
rare-magma · Sep 29, 2024 · 7455bf4 · 7455bf4
1 parent 9cebd95
commit 7455bf4
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 19 deletions.
diff --git a/src/guitos/sections/Chart/Chart.tsx b/src/guitos/sections/Chart/Chart.tsx
@@ -84,9 +84,7 @@ export function Chart({
   }
 
   function tickFormatter(value: number) {
-    return (
-      (intlConfig?.currency && intlFormat(value, intlConfig.currency)) ?? ""
-    );
+    return (intlConfig?.currency && intlFormat(value, intlConfig)) ?? "";
   }
 
   return (

diff --git a/src/guitos/sections/Chart/ChartTooltip.tsx b/src/guitos/sections/Chart/ChartTooltip.tsx
@@ -36,10 +36,10 @@ export function ChartTooltip({
   const showMultipleLegends = showTooltip && payload.length > 1;
 
   const item1Value =
-    showTooltip && intlFormat(roundBig(Big(payload[0].value), 2), currency);
+    showTooltip && intlFormat(roundBig(Big(payload[0].value), 2), intlConfig);
   const item2Value =
     showMultipleLegends &&
-    intlFormat(roundBig(Big(payload[1].value), 2), currency);
+    intlFormat(roundBig(Big(payload[1].value), 2), intlConfig);
 
   return showTooltip ? (
     <Container className="m-2">

diff --git a/src/guitos/sections/TableCard/TableCard.tsx b/src/guitos/sections/TableCard/TableCard.tsx
@@ -118,7 +118,7 @@ export default function TableCard({ header: label }: TableCardProps) {
             <Col className="text-end fixed-width-font">
               <div aria-label="total amount">
                 {intlConfig?.currency &&
-                  intlFormat(roundBig(Big(total), 2), intlConfig?.currency)}
+                  intlFormat(roundBig(Big(total), 2), intlConfig)}
               </div>
             </Col>
           </Row>

diff --git a/src/utils.test.ts b/src/utils.test.ts
@@ -57,30 +57,47 @@ test("createBudgetNameList", () => {
 });
 
 test("intlFormat", () => {
-  expect(intlFormat(123.45, "JPY")).eq("¥123");
-  expect(intlFormat(123.45, "EUR")).eq("€123.45");
-  expect(intlFormat(123.45, "USD")).eq("$123.45");
-  expect(intlFormat(123.45, "CAD")).eq("CA$123.45");
-  expect(intlFormat(123.45, "GBP")).eq("£123.45");
-  expect(intlFormat(123.45, "CNY")).eq("CN¥123.45");
-  expect(intlFormat(123.45, "AUD")).eq("A$123.45");
+  expect(intlFormat(123.45, { locale: "ja-JP", currency: "JPY" })).eq("￥123");
+  expect(intlFormat(123.45, { locale: "en-IE", currency: "EUR" })).eq(
+    "€123.45",
+  );
+  expect(intlFormat(123.45, { locale: "en-US", currency: "USD" })).eq(
+    "$123.45",
+  );
+  expect(intlFormat(123.45, { locale: "en-CA", currency: "CAD" })).eq(
+    "$123.45",
+  );
+  expect(intlFormat(123.45, { locale: "en-GB", currency: "GBP" })).eq(
+    "£123.45",
+  );
+  expect(intlFormat(123.45, { locale: "cn-CN", currency: "CNY" })).eq(
+    "CN¥123.45",
+  );
+  expect(intlFormat(123.45, { locale: "en-AU", currency: "AUD" })).eq(
+    "$123.45",
+  );
 
   for (const key in currenciesMap) {
     const currencyCode = currenciesMap[
       key as keyof typeof currenciesMap
     ] as unknown as string;
 
-    expect(intlFormat(1, currencyCode)).toBeTruthy();
+    expect(
+      intlFormat(1, { locale: "en-US", currency: currencyCode }),
+    ).toBeTruthy();
   }
 });
 
 test("intlFormat browser locale list", () => {
-  for (const list of [firefoxLocalesList, chromeLocalesList]) {
+  for (const list of [
+    firefoxLocalesList.filter((l) => l !== "ja-JP-mac"),
+    chromeLocalesList,
+  ]) {
     for (const locale of list) {
       const countryCode = optionsRepository.getCountryCode(locale);
       const currencyCode =
         optionsRepository.getCurrencyCodeFromCountry(countryCode);
-      expect(intlFormat(1, currencyCode)).toBeTruthy();
+      expect(intlFormat(1, { locale, currency: currencyCode })).toBeTruthy();
     }
   }
 });

diff --git a/src/utils.ts b/src/utils.ts
@@ -5,6 +5,7 @@ import type { FilteredItem } from "./guitos/sections/ChartsPage/ChartsPage";
 import type { SearchOption } from "./guitos/sections/NavBar/NavBar";
 import type { Budget } from "./guitos/domain/budget";
 import type { ItemOperation } from "./guitos/domain/calculationHistoryItem";
+import type { IntlConfig } from "react-currency-input-field/dist/components/CurrencyInputProps";
 
 export function roundBig(number: Big, precision: number): number {
   return Big(number).round(precision, 1).toNumber();
@@ -46,10 +47,10 @@ export function calc(
   return 0;
 }
 
-export function intlFormat(amount: number, currencyCode: string) {
-  return new Intl.NumberFormat(navigator.language, {
+export function intlFormat(amount: number, intlConfig: IntlConfig): string {
+  return new Intl.NumberFormat(intlConfig.locale, {
     style: "currency",
-    currency: currencyCode,
+    currency: intlConfig.currency,
     currencyDisplay: "symbol",
   }).format(amount);
 }