language fix, add manual fallback in languageselector

ui/public/locales/de/translation.json

@@ -0,0 +1,15 @@
+{
+  "navigation": {
+    "profile": "",
+    "admin": "",
+    "management": "",
+    "dashboard": "",
+    "recordings": "",
+    "settings": "",
+    "help_support": "",
+    "swagger": "",
+    "documentation": "",
+    "ui_library": "",
+    "layout": ""
+  }
+}

ui/public/locales/en/translation.json

@@ -10,6 +10,7 @@
     "swagger": "Swagger API",
     "documentation": "Documentation",
     "ui_library": "UI Library",
-    "layout": "Language & Layout"
+    "layout": "Language & Layout",
+    "choose_language": "Choose language"
   }
 }

ui/public/locales/nl/translation.json

@@ -10,6 +10,7 @@
     "swagger": "Swagger API",
     "documentation": "Documentatie",
     "ui_library": "UI bibliotheek",
-    "layout": "Taal & Weergave"
+    "layout": "Taal & Weergave",
+    "choose_language": "Kies taal"
   }
 }

ui/src/components/LanguageSelect/LanguageSelect.jsx

@@ -5,10 +5,11 @@ import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListSubheader from '@material-ui/core/ListSubheader';
 import { Icon } from '@kerberos-io/ui';
+import { useTranslation } from 'react-i18next';
 import './LanguageSelect.scss';
 
 const LanguageSelect = () => {
-  const selected = localStorage.getItem('i18nextLng') || 'en';
+  let selected = localStorage.getItem('i18nextLng') || 'en';
   const languageMap = {
     en: {
       label: 'English',
@@ -18,13 +19,20 @@ const LanguageSelect = () => {
     nl: { label: 'Nederlands', dir: 'ltr', active: false },
     fr: { label: 'Francais', dir: 'ltr', active: false },
     pl: { label: 'Polski', dir: 'ltr', active: false },
+    de: { label: 'Deutsch', dir: 'ltr', active: false },
   };
 
+  if (!languageMap[selected]) {
+    selected = 'en';
+  }
+
   const [menuAnchor, setMenuAnchor] = React.useState(null);
   React.useEffect(() => {
     document.body.dir = languageMap[selected].dir;
   }, [menuAnchor, selected]);
 
+  const { t } = useTranslation();
+
   return (
     <>
       <li
@@ -52,13 +60,14 @@ const LanguageSelect = () => {
       >
         <div>
           <List>
-            <ListSubheader>Choose language</ListSubheader>
+            <ListSubheader>{t('navigation.choose_language')}</ListSubheader>
             {Object.keys(languageMap)?.map((item) => (
               <ListItem
                 button
                 key={item}
                 onClick={() => {
                   i18next.changeLanguage(item);
+                  localStorage.setItem('i18nextLng', item);
                   setMenuAnchor(null);
                 }}
               >

ui/src/i18n.js

@@ -8,14 +8,13 @@ i18n
   .use(LanguageDetector)
   .use(initReactI18next)
   .init({
-    lng: 'en',
     fallbackLng: 'en',
     debug: false,
     interpolation: {
       escapeValue: false,
     },
     load: 'languageOnly',
-    whitelist: ['en', 'nl', 'fr'],
+    whitelist: ['de', 'en', 'nl', 'fr', 'pl'],
   });
 
 export default i18n;