feat(l10n): refactor the localization code (#296)

* App localization is now based on the detected language from the browser at runtime * Spell the whole language name in the UI * Change the UI for multiple languages in the publiccode.yml file, removing the tabs * Use a library for the list of languages, so we don't have to maintain our own Obsoletes #247 Related #234 Fixes #123, Fixes #26
italia · Jan 16, 2024 · 17404a9 · 17404a9
1 parent ce747d7
commit 17404a9
Show file tree

Hide file tree

Showing 17 changed files with 267 additions and 1,097 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -89,8 +89,10 @@
     "dotenv": "^16.3.1",
     "draft-js": "^0.11.7",
     "i18next": "^23.2.2",
+    "i18next-browser-languagedetector": "^7.2.0",
     "immutable": "^4.3.0",
     "js-yaml": "3.14.0",
+    "locale-codes": "^1.3.1",
     "lodash": "^4.17.21",
     "prop-type": "^0.0.1",
     "rc-collapse": "^3.7.0",

diff --git a/src/app/components/Editor.jsx b/src/app/components/Editor.jsx
@@ -1,7 +1,7 @@
 import { Fragment, useCallback, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import Head from "./Head";
-import { LanguageSwitcher } from "./LanguageSwitcher";
+import { PubliccodeYmlLanguages } from "./PubliccodeYmlLanguages";
 import { useAppDispatch, useAppSelector } from "../store";
 import EditorForm from "./EditorForm";
 import InfoBox from "./InfoBox";
@@ -27,7 +27,7 @@ import {
   toFlatPropertyMap,
   transformSimpleStringArrays,
 } from "../utils/transform";
-import { setLanguages, resetLanguages } from "../store/language";
+import { setPubliccodeYmlLanguages, resetPubliccodeYmlLanguages } from "../store/publiccodeYmlLanguages";
 import useDebounce from "../hooks/useDebounce";
 import { DevTool } from '@hookform/devtools';
 
@@ -166,7 +166,7 @@ export const Editor = (props) => {
       notify(t("editor.errors.yamlloading"), { state: "error" });
       return;
     }
-    dispatch(setLanguages(extractLanguages(data)));
+    dispatch(setPubliccodeYmlLanguages(extractLanguages(data)));
     return data;
   };
 
@@ -204,7 +204,7 @@ export const Editor = (props) => {
     setYaml(null);
     clearErrors();
     setFlatErrors(null);
-    dispatch(resetLanguages());
+    dispatch(resetPubliccodeYmlLanguages());
   };
 
   const handleValidationErrors = useCallback((validator) => {
@@ -276,7 +276,7 @@ export const Editor = (props) => {
 
       <div className="content">
         <Head lastGen={lastGen} />
-        <LanguageSwitcher />
+        <PubliccodeYmlLanguages />
         <div className="content__main" id="content__main">
           {blocks && allFields && (
             <EditorForm

diff --git a/src/app/components/EditorForm.jsx b/src/app/components/EditorForm.jsx
@@ -127,7 +127,7 @@ const EditorForm = (props) => {
     <div>
       <FormProvider {...formMethods}>
         <form onSubmit={submit}>
-          {languages && languages.length > 0 ? (
+          {languages && (
             <Collapse
               onChange={props.onAccordion}
               {...params}
@@ -139,8 +139,6 @@ const EditorForm = (props) => {
                 t
               )}
             />
-          ) : (
-            <div>{t("editor.nolanguage")}</div>
           )}
         </form>
       </FormProvider>

diff --git a/src/app/components/LanguageSwitcher.tsx b/src/app/components/LanguageSwitcher.tsx