#58 use polyglot for translations

client/app/assets/i18n/de.json

@@ -3,6 +3,7 @@
   "joinRoomInfo": "Du kannst auch einen bereits existierenden Raum betreten. Frage den Ersteller für den Link.",
   "createNewRoom": "Erstelle einen neuen Raum",
   "join": "Beitreten",
+  "joinRoomname": "%{roomName} beitreten",
   "name": "Name...",
   "addStory": "Story hinzufügen",
   "newRound": "Neue Runde",

client/app/assets/i18n/en.json

@@ -3,6 +3,7 @@
   "joinRoomInfo": "You can also join an existing room by link. Ask the creator of the room for the address.",
   "createNewRoom": "Create new room",
   "join": "Join",
+  "joinRoomname": "Join %{roomName}",
   "name": "Name...",
   "addStory": "Add Story",
   "newRound": "New Round",

client/app/services/clientActionReducer.js

@@ -1,5 +1,4 @@
 import clientSettingsStore from '../store/clientSettingsStore';
-import translator from './translator';
 import {
   TOGGLE_BACKLOG,
   TOGGLE_USER_MENU,
@@ -86,7 +85,8 @@ export default function clientActionReducer(state, action) {
     case SET_LANGUAGE: {
       const language = action.language;
       clientSettingsStore.setPresetLanguage(language);
-      return {...state, language, translator: (key) => translator(key, language)};
+      state.setLanguage(language);
+      return {...state, language};
     }
 
     case LOCATION_CHANGED: {

client/app/services/translator.js

@@ -1,32 +1,14 @@
-import log from 'loglevel';
+import Polyglot from 'node-polyglot';
 
-import translationsEN from '../assets/i18n/en.json';
-import translationsDE from '../assets/i18n/de.json';
+export default function translatorFactory(dictionary, language) {
+  const polyglot = new Polyglot({phrases: dictionary[language]});
 
-const dictionary = {
-  en: translationsEN,
-  de: translationsDE
-};
+  return {
+    t: translatorFunction,
+    setLanguage: (lang) => polyglot.replace(dictionary[lang])
+  };
 
-/**
- * Performs a lookup of a translation with the given key for the given language.
- *
- * @param translationKey
- * @param language
- * @returns {string}
- */
-export default function lookup(translationKey, language) {
-  const translations = dictionary[language];
-
-  if (!translations) {
-    log.error(`Unknown language '${language}'`);
-    return `!!!${translationKey}!!!`;
-  }
-
-  const translation = translations[translationKey];
-  if (!translation) {
-    return `!!!${translationKey}!!!`;
+  function translatorFunction(translationKey, data) {
+    return polyglot.t(translationKey, {...data, _: `!!!${translationKey}!!!`});
   }
-
-  return translation;
 }

client/app/store/initialState.js

@@ -1,9 +1,20 @@
 import clientSettingsStore from './clientSettingsStore';
-import translator from '../services/translator';
+import translatorFactory from '../services/translator';
+
+import translationsEN from '../../app/assets/i18n/en.json';
+import translationsDE from '../../app/assets/i18n/de.json';
 
 const DEFAULT_LANGUAGE = 'en';
 const userLanguage = clientSettingsStore.getPresetLanguage();
 
+const {t, setLanguage} = translatorFactory(
+  {
+    en: translationsEN,
+    de: translationsDE
+  },
+  userLanguage || DEFAULT_LANGUAGE
+);
+
 /**
  * The initial state that is loaded into the redux store on (client) application load.
  */
@@ -30,7 +41,8 @@ const INITIAL_STATE = {
   actionLog: [], // will contain human readable "log messages" of actions that did take place in the current room
   pendingCommands: {}, // will contain pending commands (commands for which no event is received yet)
   language: userLanguage || DEFAULT_LANGUAGE,
-  translator: (key) => translator(key, userLanguage || DEFAULT_LANGUAGE)
+  translator: t,
+  setLanguage
 };
 
 export default INITIAL_STATE;

client/package.json

@@ -26,6 +26,7 @@
   },
   "dependencies": {},
   "devDependencies": {
+    "node-polyglot": "^2.4.0",
     "@babel/core": "^7.10.1",
     "@babel/preset-env": "^7.10.1",
     "@babel/preset-react": "7.10.1",

client/test/unit/translatorTest.js

@@ -0,0 +1,40 @@
+import translatorFactory from '../../app/services/translator';
+
+import translationsEN from '../../app/assets/i18n/en.json';
+import translationsDE from '../../app/assets/i18n/de.json';
+
+const dictionary = {
+  en: translationsEN,
+  de: translationsDE
+};
+
+test('simple', () => {
+  const {t, setLanguage} = translatorFactory(dictionary, 'de');
+
+  let translated = t('username');
+  expect(translated).toBe('Benutzername');
+
+  setLanguage('en');
+
+  translated = t('username');
+  expect(translated).toBe('Username');
+});
+
+test('unknown key', () => {
+  const {t} = translatorFactory(dictionary, 'de');
+
+  let translated = t('notKnown');
+  expect(translated).toBe('!!!notKnown!!!');
+});
+
+test('interpolation', () => {
+  const {t, setLanguage} = translatorFactory(dictionary, 'de');
+
+  let translated = t('joinRoomname', {roomName: 'Custom-Room'});
+  expect(translated).toBe('Custom-Room beitreten');
+
+  setLanguage('en');
+
+  translated = t('joinRoomname', {roomName: 'Custom-Room'});
+  expect(translated).toBe('Join Custom-Room');
+});