feat: Added translation capabilities.

package-lock.json

@@ -12,6 +12,7 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "i18next": "^23.11.3",
+        "i18next-browser-languagedetector": "^7.2.1",
         "i18next-http-backend": "^2.5.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -9485,6 +9486,14 @@
         "@babel/runtime": "^7.23.2"
       }
     },
+    "node_modules/i18next-browser-languagedetector": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-7.2.1.tgz",
+      "integrity": "sha512-h/pM34bcH6tbz8WgGXcmWauNpQupCGr25XPp9cZwZInR9XHSjIFDYp1SIok7zSPsTOMxdvuLyu86V+g2Kycnfw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
     "node_modules/i18next-http-backend": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-2.5.1.tgz",

package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "i18next": "^23.11.3",
+    "i18next-browser-languagedetector": "^7.2.1",
     "i18next-http-backend": "^2.5.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

public/locales/de/translation.json

@@ -0,0 +1,3 @@
+{
+    "hello_world": "Hallo Welt"
+}

public/locales/en/translation.json

@@ -0,0 +1,3 @@
+{
+    "hello_world": "Hello World"
+}

src/App.js

@@ -1,16 +1,35 @@
 import React from "react"
 import { Route, Routes } from "react-router-dom"
 
-import NoPageFound from "./pages/NoPageFound"
-import TestPage from "./pages/TestPage";
+const NoPageFound = React.lazy(() => import("./pages/NoPageFound"));
+const TestPage = React.lazy(() => import("./pages/TestPage"))
 
 function App() {
+
+  // TODO FIX... 
+  /*
+    There is an weird interaction/error with the lazy loading of the routers
+    and the translation or any other component, that needs to be loaded in
+    lazily... For now this works, but still, this is very hacky and I hate this...
+  */
+  var wait = (ms) => {
+      const start = Date.now();
+      let now = start;
+      while (now - start < ms) {
+        now = Date.now();
+      }
+  }
+
+  wait(500);
+
   return (
+      <React.Suspense fallback="loading">
         <Routes>
-          <Route path="/" element={<TestPage />} />
-          <Route path="/info" element={<TestPage />} />
-          <Route path="*" element={<NoPageFound />} />
+          <Route path="/" element={<React.Suspense fallback={<>...</>}><TestPage /></React.Suspense>} />
+          <Route path="/info" element={<React.Suspense fallback={<>...</>}><TestPage /></React.Suspense>} />
+          <Route path="*" element={<React.Suspense fallback={<>...</>}><NoPageFound /></React.Suspense>} />
         </Routes>
+      </React.Suspense>
   );
 }
 

src/core/i18n/I18NHandler.jsx

@@ -0,0 +1,5 @@
+import i18n from "./i18n";
+
+export function getTranslation(translationKey) {
+    return i18n.t(translationKey);
+}

src/core/i18n/i18n.js

@@ -0,0 +1,20 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import Backend from "i18next-http-backend";
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+i18n
+  .use(Backend)
+  .use(initReactI18next)
+  .use(LanguageDetector)
+  .init({
+    fallbackLng: "en",
+    debug: true,
+    interpolation: {
+      escapeValue: false // react already safes from xss
+    }
+  });
+
+  i18n.changeLanguage('de'); // For now to control the language... Later on, not necessary...
+
+  export default i18n;

src/index.js

@@ -6,13 +6,13 @@ import reportWebVitals from './reportWebVitals';
 import { BrowserRouter } from "react-router-dom";
 import "./core/i18n/i18n";
 
-
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
       <BrowserRouter>      
         <App />
       </BrowserRouter>
+    
   </React.StrictMode>
 );
 

src/pages/TestPage.jsx

@@ -1,8 +1,10 @@
+import React from "react";
 import InfoPageComponent from "../components/InfoPageComponent";
+import { getTranslation } from "../core/i18n/I18NHandler";
 
 export default class TestPage extends InfoPageComponent {
 
     render() {
-        return (<InfoPageComponent><p>Hello World</p></InfoPageComponent>);
+        return (<InfoPageComponent><p>{getTranslation("hello_world")}</p></InfoPageComponent>);
     }
 }