feat: dynamic import on build time

frontend/public/locales/en/common.json

@@ -63,5 +63,6 @@
   "optional": "Optional",
   "destination": "Destination",
   "username": "Username",
-  "password": "Password"
+  "password": "Password",
+  "yourLanguage": "English"
 }

frontend/public/locales/es-ES/common.json

@@ -63,5 +63,6 @@
   "optional": "Opcional",
   "destination": "Destino",
   "username": "Nombre de usuario",
-  "password": "Contraseña"
+  "password": "Contraseña",
+  "yourLanguage": "Español"
 }

frontend/src/components/Settings/Settings.jsx

@@ -2,19 +2,14 @@ import {
   Accordion,
   AccordionSummary,
   AccordionDetails,
-  Checkbox,
-  Divider,
   Grid,
   Typography,
-  TextField,
   Select,
 } from "@material-ui/core";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 
-import API from "utils/API";
-import { parseValue, replaceValue, setValue } from "utils/ChangeHelper";
-
 import { useTranslation } from "react-i18next";
+import localesList from "../../utils/localesList.json";
 
 function Settings() {
   const { t, i18n } = useTranslation();
@@ -31,8 +26,11 @@ function Settings() {
       <AccordionDetails>
         <Grid item>
           <Select native value={i18n.language} onChange={handleChange()}>
-            <option value={"en"}>English</option>
-            <option value={"es-ES"}>Español</option>
+            {localesList.map((locale) => (
+              <option key={locale.code} value={locale.code}>
+                {locale.name}
+              </option>
+            ))}
           </Select>
         </Grid>
       </AccordionDetails>

frontend/src/i18n.js

@@ -3,7 +3,8 @@ import languageDetector from "i18next-browser-languagedetector";
 import { initReactI18next } from "react-i18next";
 import Backend from "i18next-http-backend";
 
-const userLanguage = window.navigator.language;
+import localesList from "./utils/localesList.json";
+const supportedLngs = localesList.map((locale) => locale.code);
 
 i18n
   .use(languageDetector)
@@ -23,7 +24,7 @@ i18n
     react: {
       useSuspense: true,
     },
-    supportedLngs: ["en", "es-ES"],
+    supportedLngs,
     backend: {
       loadPath: "/locales/{{lng}}/{{ns}}.json",
     },

frontend/src/utils/localesList.json

@@ -0,0 +1,10 @@
+[
+  {
+    "code": "en",
+    "name": "English"
+  },
+  {
+    "code": "es-ES",
+    "name": "Español"
+  }
+]

frontend/tsconfig.json

@@ -5,7 +5,8 @@
     "baseUrl": "src",
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "resolveJsonModule": true
   },
   "include": ["src"]
 }