i18n - extension extraction

src/components/Header/Header.js

@@ -93,7 +93,7 @@ class Header extends Component {
           </button>
           <button
             className="research-use"
-            onClick={() => this.changeLanguage('en-ES')}
+            onClick={() => this.changeLanguage('es-MX')}
           >
             ES
           </button>

src/i18n.js

@@ -1,59 +1,51 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 
-const currentLanguage = process.env.APP_LANG || 'en-US';
+const currentLanguage = process.env.APP_LANG || 'es-MX';
 
 function getDefaultLanguage() {
   const mainLanguage = currentLanguage.match(/(.*.)(-)/);
   return mainLanguage !== null ? mainLanguage[1] : null;
 }
 
-function getCleanKeyForNameSpaces(key) {
-  const regexKeyCleaner = new RegExp(
-    `^(\\.\\/${currentLanguage}\\/)(.*.)(\\.json)$`
-  );
-  const cleanedKey = key.match(regexKeyCleaner);
-  return cleanedKey !== null ? cleanedKey[2] : null;
+function getNameSpaceString(key) {
+  const nameSpaceMatcher = key.match(/[^/]+$/g);
+  let finalNameSpace;
+
+  if (nameSpaceMatcher !== null) {
+    finalNameSpace = nameSpaceMatcher[0].replace('.json', '');
+  }
+
+  return finalNameSpace;
 }
 
-function getCleanKeyForDefaults(key) {
-  const regexKeyCleaner = new RegExp(
-    `^(\\.\\/${getDefaultLanguage()}\\/)(.*.)(\\.json)$`
-  );
-  const cleanedKey = key.match(regexKeyCleaner);
-  return cleanedKey !== null ? cleanedKey[2] : null;
+function getCleanKeyForNameSpaces(key) {
+  const cleanedKey = key.match(/[/\\].+(?=[/\\])/);
+  let finalKey;
+
+  if (cleanedKey !== null) {
+    finalKey = cleanedKey[0].replace(/[/\\]/, '');
+    finalKey = finalKey.replace(/[/\\]/, '-');
+  }
+
+  return finalKey;
 }
 
 function getLocales() {
-  const currentLangList = {};
-  const defaultLangList = {};
-  const locales = {};
   const context = require.context(`./locales`, true, /\.json$/);
+  const locales = {};
 
   context.keys().forEach(key => {
-    const isTheSameOfCurrentLang = key.indexOf(currentLanguage) >= 0;
-    const isADefaultLang = key.indexOf(`${getDefaultLanguage()}/`) >= 0;
-
-    if (isTheSameOfCurrentLang) {
-      currentLangList[getCleanKeyForNameSpaces(key)] = context(key);
-    }
-
-    if (isADefaultLang) {
-      defaultLangList[getCleanKeyForDefaults(key)] = context(key);
-    }
+    locales[getCleanKeyForNameSpaces(key)] = {
+      ...locales[getCleanKeyForNameSpaces(key)],
+      [getNameSpaceString(key)]: context(key),
+    };
   });
 
-  locales[currentLanguage] = { ...currentLangList };
-  locales[getDefaultLanguage()] = { ...defaultLangList };
   return locales;
 }
 
-console.log(getLocales(), ' > ', getDefaultLanguage());
-
-// console.log(getLocales(), currentLanguage, getDefaultLanguage());
-
 i18n.use(initReactI18next).init({
-  // resources: getLocales(),
   resources: getLocales(),
   fallbackLng: getDefaultLanguage(),
   lng: currentLanguage,
@@ -65,6 +57,9 @@ i18n.use(initReactI18next).init({
     escapeValue: false,
   },
 
+  fallbackNS: ['common'],
+  defaultNS: 'common',
+
   react: {
     wait: true,
   },

src/locales/en-UK/common.json

@@ -1,6 +0,0 @@
-{
-  "common": {
-    "Welcome to React": "Welcome to React and react-i18next",
-    "welcomeMsg": "welcome"
-  }
-}

src/locales/en/CineDialog.json

@@ -0,0 +1,3 @@
+{
+  "fps": "ingles fps"
+}

src/locales/en/UK/common.json

@@ -0,0 +1,4 @@
+{
+  "Welcome to React": "Welcome to React and react-i18next",
+  "welcomeMsg": "welcome"
+}

src/locales/es/CineDialog.json

@@ -0,0 +1,3 @@
+{
+  "fps": "ES RAIZ cps"
+}

src/locales/es/MX/CineDialog.json

@@ -0,0 +1,3 @@
+{
+  "fps": "MX cps"
+}

src/locales/es/MX/Header.json

@@ -0,0 +1,7 @@
+{
+  "header_research_use": "SOLO USO DE INVESTIGACIÓN",
+  "header_options": "Opciones",
+  "header_about": "Sobre",
+  "header_preferences": "Preferencias",
+  "header_study_list": "Lista de estudio"
+}

src/locales/es/common.json

@@ -0,0 +1,5 @@
+{
+  "Welcome to React": "Welcome to React and react-i18next",
+  "welcomeMsg": "welcome",
+  "test": "Lunch time"
+}

yarn.lock

@@ -11782,13 +11782,12 @@ react-transition-group@^2.0.0, react-transition-group@^2.2.0:
     prop-types "^15.6.2"
     react-lifecycles-compat "^3.0.4"
 
-react-viewerbase@0.4.2:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/react-viewerbase/-/react-viewerbase-0.4.2.tgz#a890db450c0f6d1ec495dc2ceb85dbe38fcb7fda"
-  integrity sha512-1rqdXZ3gQIuRtuxOTKwg9D4EJ1NJ8ug9mQWOAFxx+7PSFhfbjXn55O4Fko92qXrlKqd+Rba1jqBvzTXPr0h0fQ==
+"react-viewerbase@file:.yalc/react-viewerbase":
+  version "0.2.17-1a8178ff"
   dependencies:
     "@babel/runtime" "7.2.0"
     classnames "2.2.6"
+    i18next "^15.1.3"
     lodash.isequal "4.5.0"
     moment "2.24.0"
     prop-types "15.6.2"
@@ -11796,6 +11795,7 @@ react-viewerbase@0.4.2:
     react-dates "18.4.1"
     react-dnd "7.0.2"
     react-dnd-html5-backend "7.0.2"
+    react-i18next "^10.11.0"
     react-with-direction "1.3.0"
 
 react-vtkjs-viewport@^0.0.7: