From 227762427fb817dd90e15d5f0fc2ec6673d84aca Mon Sep 17 00:00:00 2001 From: isaacbello Date: Mon, 20 Jan 2025 13:42:15 +0100 Subject: [PATCH] localize emissions entries on all tables --- .../components/Tabs/Activity/activity-accordion.tsx | 13 ++++++++++++- .../Tabs/Activity/direct-measure-table.tsx | 8 ++++++++ .../Tabs/Activity/emission-data-section.tsx | 10 +++++++++- app/src/components/formatted-number-input.tsx | 8 +------- app/src/util/constants.ts | 9 ++++++++- app/src/util/helpers.ts | 4 ++-- 6 files changed, 40 insertions(+), 12 deletions(-) diff --git a/app/src/components/Tabs/Activity/activity-accordion.tsx b/app/src/components/Tabs/Activity/activity-accordion.tsx index 272426382..45424d51b 100644 --- a/app/src/components/Tabs/Activity/activity-accordion.tsx +++ b/app/src/components/Tabs/Activity/activity-accordion.tsx @@ -31,6 +31,8 @@ import React, { FC, useMemo } from "react"; import { MdModeEditOutline, MdMoreVert } from "react-icons/md"; import { FiTrash2 } from "react-icons/fi"; import { ExtraField, findMethodology, Methodology } from "@/util/form-schema"; +import { useParams } from "next/navigation"; +import { regionalLocales } from "@/util/constants"; interface IActivityGroup { activityData: ActivityValue[]; @@ -61,6 +63,7 @@ const ActivityAccordion: FC = ({ onEditActivity, referenceNumber, }) => { + const { lng } = useParams(); // perform the group by logic when there's more than one activity. // split the data into groups // for each table group by the group by field @@ -246,7 +249,13 @@ const ActivityAccordion: FC = ({ {parseFloat(activity?.activityData[title])}{" "} {t(activity?.activityData[title + "-unit"])} - {convertKgToTonnes(activity?.co2eq)} + + {convertKgToTonnes( + activity?.co2eq, + null, + regionalLocales[lng as string], + )} + @@ -402,6 +411,8 @@ const ActivityAccordion: FC = ({ acc + BigInt(curr.co2eq as bigint), 0n, ), + null, + regionalLocales[lng as string], )}{" "} diff --git a/app/src/components/Tabs/Activity/direct-measure-table.tsx b/app/src/components/Tabs/Activity/direct-measure-table.tsx index 662cbd8f2..bb4ba630c 100644 --- a/app/src/components/Tabs/Activity/direct-measure-table.tsx +++ b/app/src/components/Tabs/Activity/direct-measure-table.tsx @@ -34,6 +34,8 @@ import { MANUAL_INPUT_HIERARCHY, } from "@/util/form-schema"; import { AddIcon } from "@chakra-ui/icons"; +import { useParams } from "next/navigation"; +import { regionalLocales } from "@/util/constants"; interface DirectMeasureTableProps { t: TFunction; @@ -52,6 +54,7 @@ const DirectMeasureTable: FC = ({ t, showActivityModal, }) => { + const { lng } = useParams(); const directMeasure = MANUAL_INPUT_HIERARCHY[referenceNumber as string] .directMeasure as DirectMeasure; const extraFields = directMeasure["extra-fields"] as ExtraField[]; @@ -134,18 +137,21 @@ const DirectMeasureTable: FC = ({ {convertKgToTonnes( activity?.activityData?.co2_amount * 1000, "CO2e", + regionalLocales[lng as string], )} {convertKgToTonnes( activity?.activityData?.n2o_amount * 1000, "N2O", + regionalLocales[lng as string], )} {convertKgToTonnes( activity?.activityData?.ch4_amount * 1000, "CH4", + regionalLocales[lng as string], )} @@ -292,6 +298,8 @@ const DirectMeasureTable: FC = ({ acc + BigInt(curr.co2eq as bigint), 0n, ), + null, + regionalLocales[lng as string], )}{" "} diff --git a/app/src/components/Tabs/Activity/emission-data-section.tsx b/app/src/components/Tabs/Activity/emission-data-section.tsx index 853e87857..55aeeb341 100644 --- a/app/src/components/Tabs/Activity/emission-data-section.tsx +++ b/app/src/components/Tabs/Activity/emission-data-section.tsx @@ -35,6 +35,8 @@ import HeadingText from "@/components/heading-text"; import { MdMoreVert } from "react-icons/md"; import { FaNetworkWired } from "react-icons/fa"; import { FiTrash2 } from "react-icons/fi"; +import { regionalLocales } from "@/util/constants"; +import { useParams } from "next/navigation"; interface EmissionDataSectionProps { t: TFunction; @@ -118,6 +120,8 @@ const EmissionDataSection = ({ onAddActivityModalOpen(); }; + const { lng } = useParams(); + const renderSuggestedActivities = () => ( <> {suggestedActivities.length ? ( @@ -357,7 +361,11 @@ const EmissionDataSection = ({ fontWeight="semibold" fontSize="headline.md" > - {convertKgToTonnes(inventoryValue?.co2eq as bigint)} + {convertKgToTonnes( + inventoryValue?.co2eq as bigint, + null, + regionalLocales[lng as string], + )} diff --git a/app/src/components/formatted-number-input.tsx b/app/src/components/formatted-number-input.tsx index 8680b5370..70ed2feb2 100644 --- a/app/src/components/formatted-number-input.tsx +++ b/app/src/components/formatted-number-input.tsx @@ -8,6 +8,7 @@ import { NumberInputProps, } from "@chakra-ui/react"; import { useParams } from "next/navigation"; +import { regionalLocales } from "@/util/constants"; interface FormattedNumberInputProps extends NumberInputProps { control: Control; @@ -25,13 +26,6 @@ interface FormattedNumberInputProps extends NumberInputProps { t: Function; } -const regionalLocales: Record = { - es: "es-ES", // Spanish (Spain) - en: "en-US", // English (United States) - pt: "pt-PT", // Portuguese (Portugal) - de: "de-DE", // German (Germany) -}; - function FormattedNumberInput({ control, setError, diff --git a/app/src/util/constants.ts b/app/src/util/constants.ts index 5af1b4354..6c1ed4dda 100644 --- a/app/src/util/constants.ts +++ b/app/src/util/constants.ts @@ -3,7 +3,7 @@ import { PiPlant, PiTrashLight } from "react-icons/pi"; import { TbBuildingCommunity } from "react-icons/tb"; import { IconBaseProps } from "react-icons"; import { LiaIndustrySolid } from "react-icons/lia"; -import { appTheme, SectorColors } from "@/lib/app-theme"; // Import the appTheme +import { SectorColors } from "@/lib/app-theme"; // Import the appTheme export const maxPopulationYearDifference = 5; @@ -136,3 +136,10 @@ export const getSectorByName = (name: string) => export const getReferenceNumberByName = (name: keyof ISector) => findBy("name", name)?.referenceNumber; + +export const regionalLocales: Record = { + es: "es-ES", // Spanish (Spain) + en: "en-US", // English (United States) + pt: "pt-PT", // Portuguese (Portugal) + de: "de-DE", // German (Germany) +}; diff --git a/app/src/util/helpers.ts b/app/src/util/helpers.ts index e0992e276..d3777f5df 100644 --- a/app/src/util/helpers.ts +++ b/app/src/util/helpers.ts @@ -278,9 +278,9 @@ export function convertKgToKiloTonnes( export function convertKgToTonnes( valueInKg: number | Decimal | bigint, - gas?: string, + gas?: string | null, + locale = "en-US", ): string { - const locale = "en-US"; const gasSuffix = gas ? ` ${gas}` : " CO2e"; const kg = toDecimal(valueInKg);