feat: add translations (#60)

graasp · Nov 29, 2024 · ff828b0 · ff828b0
1 parent a8bd1df
commit ff828b0
Show file tree

Hide file tree

Showing 12 changed files with 218 additions and 96 deletions.
diff --git a/src/config/buildingMaterials.ts b/src/config/buildingMaterials.ts
@@ -8,19 +8,19 @@ export const BUILDING_MATERIALS = {
     thickness: 0.16,
   }),
   FiberGlass: BuildingMaterial.create({
-    name: 'Fiber Glass',
+    name: 'FiberGlass',
     price: 3_000,
     thermalConductivity: 0.115,
     thickness: 0.16,
   }),
   XPSFoam: BuildingMaterial.create({
-    name: 'XPS Foam',
+    name: 'XPSFoam',
     price: 10,
     thermalConductivity: 0.024,
     thickness: 0.16,
   }),
   MineralWool: BuildingMaterial.create({
-    name: 'Mineral Wool',
+    name: 'MineralWool',
     price: 7,
     thermalConductivity: 0.03,
     thickness: 0.16,
@@ -32,7 +32,7 @@ export const BUILDING_MATERIALS = {
     thickness: 0.2,
   }),
   WindowGlass: BuildingMaterial.create({
-    name: 'Window Glass',
+    name: 'WindowGlass',
     price: 150,
     thermalConductivity: 0.8,
     thickness: 0.004,
@@ -50,3 +50,5 @@ export const BUILDING_MATERIALS = {
     thickness: 0.2,
   }),
 } as const;
+
+export type BuildingMaterialKeys = keyof typeof BUILDING_MATERIALS;
diff --git a/src/config/i18n.ts b/src/config/i18n.ts
@@ -6,7 +6,7 @@ import en from '../langs/en.json';
 import fr from '../langs/fr.json';
 
 export const DEFAULT_LANGUAGE = 'en';
-export const defaultNS = 'translations';
+export const defaultNS = 'common';
 export const resources = {
   en,
   fr,
@@ -27,7 +27,6 @@ i18n.use(initReactI18next).init({
   debug: import.meta.env.DEV,
   ns: [defaultNS],
   defaultNS,
-  keySeparator: false,
   interpolation: {
     escapeValue: false,
     formatSeparator: ',',

diff --git a/src/langs/constants.ts b/src/langs/constants.ts
diff --git a/src/langs/en.json b/src/langs/en.json
@@ -1,6 +1,5 @@
 {
-  "translations": {
-    "Welcome to the Graasp App Starter Kit": "Welcome to the Graasp App Starter Kit",
+  "DATES": {
     "YEARS_one": "{{count}} year",
     "YEARS_other": "{{count}} years",
     "MONTHS_one": "{{count}} month",
@@ -10,21 +9,91 @@
     "DAYS_one": "{{count}} day",
     "DAYS_other": "{{count}} days",
     "HOURS_one": "{{count}} hour",
-    "HOURS_other": "{{count}} hours",
-    "ERROR_BOUNDARY": {
-      "FALLBACK": {
-        "MESSAGE_TITLE": "Sorry, something went wrong with this application",
-        "MESSAGE_FEEDBACK": "Our team has been notified. If you would like to help, please, tell us what happened below.",
-        "ERROR_DETAILS": "Details of the error",
-        "NAME_LABEL": "Name",
-        "NAME_HELPER": "Provide your name (optional)",
-        "EMAIL_LABEL": "Email",
-        "EMAIL_HELPER": "Provide your email (optional)",
-        "COMMENT_LABEL": "Comment",
-        "COMMENT_HELPER": "Tell us what happened (optional)",
-        "THANKS_FOR_FEEDBACK": "Thank you for your feedback!",
-        "SEND": "Send your feedback"
+    "HOURS_other": "{{count}} hours"
+  },
+  "SEASONS": {
+    "Winter": "Winter",
+    "Spring": "Spring",
+    "Summer": "Summer",
+    "Autumn": "Autumn"
+  },
+  "SIMULATION_INFORMATIONS": {
+    "CURRENT_PERIOD": {
+      "OUTDOOR": "Outdoor",
+      "INDOOR": "Indoor",
+      "HEAT_LOSS": "Heat Loss"
+    },
+    "TOTAL": {
+      "TITLE": "Total",
+      "HEAT_LOSS": "Heat Loss",
+      "ELECTRICITY_COST": "Electricity Cost",
+      "HOUSE_WALL_SIZE": "House Wall"
+    }
+  },
+  "SIMULATION_CONTROL_PANEL": {
+    "HOUSE_CONTROL_PANEL": {
+      "TITLE": "House",
+      "WALL_INSULATION_SELECT_LABEL": "Wall Insulation",
+      "WINDOW_INSULATION_SELECT_LABEL": "Windows Insulation",
+      "MATERIAL_DIALOG": {
+        "TITLE": "Configure the {{insulation}} insulation",
+        "PRICE_LABEL": "Price",
+        "THICKNESS_LABEL": "Thickness",
+        "THERMAL_CONDUCTIVITY_LABEL": "Thermal Conductivity",
+        "CLOSE_BUTTON": "Close"
+      },
+
+      "WINDOW_DIALOG": {
+        "TITLE": "Configure the {{window_insulation}} windows",
+        "SIZE_LABEL": "Window Size",
+        "CURRENT_SIZE_LABEL": "Dimensions",
+        "Small": "Small",
+        "Medium": "Medium",
+        "Large": "Large",
+        "WINDOW_COPOSITION_TABLE": {
+          "LABEL": "Composition of the {{window_insulation}} windows",
+          "NAME_HEADER": "Name",
+          "THICKNESS_HEADER": "Thickness",
+          "THERMAL_CONDUCTIVITY_HEADER": "Thermal Conductivity"
+        },
+        "CLOSE_BUTTON": "Close"
       }
     }
+  },
+  "INSULATIONS": {
+    "Brick": "Brick",
+    "Aerogel": "Aerogel",
+    "Fiberglass": "Fiberglass",
+    "XPSFoam": "XPS Foam",
+    "MineralWool": "Mineral Wool",
+    "Wood": "Wood",
+    "SinglePane": "Single Pane",
+    "DoublePane": "Double Pane",
+    "TriplePane": "Triple Pane"
+  },
+  "MATERIALS": {
+    "Aerogel": "Aerogel",
+    "FiberGlass": "Fiberglass",
+    "XPSFoam": "XPS Foam",
+    "MineralWool": "Mineral Wool",
+    "Brick": "Brick",
+    "WindowGlass": "Window Glass",
+    "Argon": "Argon",
+    "Wood": "Wood"
+  },
+  "ERROR_BOUNDARY": {
+    "FALLBACK": {
+      "MESSAGE_TITLE": "Sorry, something went wrong with this application",
+      "MESSAGE_FEEDBACK": "Our team has been notified. If you would like to help, please, tell us what happened below.",
+      "ERROR_DETAILS": "Details of the error",
+      "NAME_LABEL": "Name",
+      "NAME_HELPER": "Provide your name (optional)",
+      "EMAIL_LABEL": "Email",
+      "EMAIL_HELPER": "Provide your email (optional)",
+      "COMMENT_LABEL": "Comment",
+      "COMMENT_HELPER": "Tell us what happened (optional)",
+      "THANKS_FOR_FEEDBACK": "Thank you for your feedback!",
+      "SEND": "Send your feedback"
+    }
   }
 }
diff --git a/src/langs/fr.json b/src/langs/fr.json
@@ -1,5 +1 @@
-{
-  "translations": {
-    "Welcome to the Graasp App Starter Kit": "Bienvenue dans le kit de démarrage de l'application Graasp"
-  }
-}
+{}
diff --git a/src/modules/ErrorBoundary.tsx b/src/modules/ErrorBoundary.tsx
@@ -6,8 +6,8 @@ import { ErrorFallback } from '@graasp/ui/apps';
 import * as Sentry from '@sentry/react';
 
 const ErrorBoundary: FC<{ children?: ReactNode }> = ({ children }) => {
-  const { t: tFallback } = useTranslation('translations', {
-    keyPrefix: 'ERROR_BOUNDARY.FALLBACK',
+  const { t } = useTranslation('ERROR_BOUNDARY', {
+    keyPrefix: 'FALLBACK',
   });
   return (
     <Sentry.ErrorBoundary
@@ -18,17 +18,17 @@ const ErrorBoundary: FC<{ children?: ReactNode }> = ({ children }) => {
           componentStack={componentStack}
           eventId={eventId}
           captureUserFeedback={Sentry.captureUserFeedback}
-          title={tFallback('MESSAGE_TITLE')}
-          formTitle={tFallback('MESSAGE_FEEDBACK')}
-          nameLabel={tFallback('NAME_LABEL')}
-          nameHelper={tFallback('NAME_HELPER')}
-          emailLabel={tFallback('EMAIL_LABEL')}
-          emailHelper={tFallback('EMAIL_HELPER')}
-          commentLabel={tFallback('COMMENT_LABEL')}
-          commentHelper={tFallback('COMMENT_HELPER')}
-          thanksMessage={tFallback('THANKS_FOR_FEEDBACK')}
-          sendButtonLabel={tFallback('SEND')}
-          errorDetailsLabel={tFallback('ERROR_DETAILS')}
+          title={t('MESSAGE_TITLE')}
+          formTitle={t('MESSAGE_FEEDBACK')}
+          nameLabel={t('NAME_LABEL')}
+          nameHelper={t('NAME_HELPER')}
+          emailLabel={t('EMAIL_LABEL')}
+          emailHelper={t('EMAIL_HELPER')}
+          commentLabel={t('COMMENT_LABEL')}
+          commentHelper={t('COMMENT_HELPER')}
+          thanksMessage={t('THANKS_FOR_FEEDBACK')}
+          sendButtonLabel={t('SEND')}
+          errorDetailsLabel={t('ERROR_DETAILS')}
         />
       )}
     >

diff --git a/src/modules/scenes/SimulationControlPanel/HouseControl.tsx b/src/modules/scenes/SimulationControlPanel/HouseControl.tsx
@@ -1,3 +1,5 @@
+import { useTranslation } from 'react-i18next';
+
 import {
   FormControl,
   IconButton,
@@ -25,8 +27,18 @@ import { MaterialControlDialog } from './MaterialControlDialog/MaterialControlDi
 import { WindowControlDialog } from './WindowControlDialog/WindowControlDialog';
 
 export const HouseControl = (): JSX.Element => {
+  const { t } = useTranslation('SIMULATION_CONTROL_PANEL');
+  const { t: tInsulations } = useTranslation('INSULATIONS');
   const { changeComponentInsulation } = useHouseComponents();
 
+  const wallInsulations = Object.keys(
+    HOUSE_INSULATIONS.Wall,
+  ) as (keyof typeof HOUSE_INSULATIONS.Wall)[];
+
+  const windowInsulations = Object.keys(
+    HOUSE_INSULATIONS.Window,
+  ) as (keyof typeof HOUSE_INSULATIONS.Window)[];
+
   const {
     open: openMaterials,
     handleOpen: handleOpenMaterials,
@@ -67,19 +79,21 @@ export const HouseControl = (): JSX.Element => {
       <Stack spacing={2}>
         <Stack direction="row" alignItems="center" spacing={1}>
           <FormControl fullWidth>
-            <InputLabel id="wall-material-select-label">Material</InputLabel>
+            <InputLabel id="wall-material-select-label">
+              {t('HOUSE_CONTROL_PANEL.WALL_INSULATION_SELECT_LABEL')}
+            </InputLabel>
             <Select
               labelId="wall-material-select-label"
               id="wall-material-select"
-              label="Material"
+              label={t('HOUSE_CONTROL_PANEL.WALL_INSULATION_SELECT_LABEL')}
               defaultValue={
                 SIMULATION_DEFAULT_WALL_COMPONENT_INSULATION.insulationName
               }
               onChange={(v) => handleInsulationChange(v.target.value)}
             >
-              {Object.keys(HOUSE_INSULATIONS.Wall).map((k) => (
+              {wallInsulations.map((k) => (
                 <MenuItem key={k} value={k}>
-                  {k}
+                  {tInsulations(k)}
                 </MenuItem>
               ))}
             </Select>
@@ -97,20 +111,20 @@ export const HouseControl = (): JSX.Element => {
         <Stack direction="row" alignItems="center" spacing={1}>
           <FormControl fullWidth>
             <InputLabel id="window-insulation-select-label">
-              Window Insulation
+              {t('HOUSE_CONTROL_PANEL.WINDOW_INSULATION_SELECT_LABEL')}
             </InputLabel>
             <Select
               labelId="window-insulation-select-label"
               id="window-insulation-select"
-              label="Window Insulation"
+              label={t('HOUSE_CONTROL_PANEL.WINDOW_INSULATION_SELECT_LABEL')}
               defaultValue={
                 SIMULATION_DEFAULT_WINDOW_COMPONENT_INSULATION.insulationName
               }
               onChange={(v) => handleWindowChange(v.target.value)}
             >
-              {Object.keys(HOUSE_INSULATIONS.Window).map((k) => (
+              {windowInsulations.map((k) => (
                 <MenuItem key={k} value={k}>
-                  {k}
+                  {tInsulations(k)}
                 </MenuItem>
               ))}
             </Select>