Merge pull request #797 from LiskHQ/768-electron-menu-i18n

Implement i18n for electron wrapper menu - Closes #768

Jenkinsfile

@@ -62,7 +62,7 @@ node('lisk-nano') {
     stage ('Run Eslint') {
       try {
         ansiColor('xterm') {
-          sh 'npm run --silent eslint'
+          sh 'npm run --silent clean && npm run --silent copy-files && npm run --silent eslint'
         }
       } catch (err) {
         echo "Error: ${err}"

app/src/i18n.js

@@ -0,0 +1,26 @@
+import i18n from 'i18next'; // eslint-disable-line import/no-extraneous-dependencies
+import languages from './languages';
+
+const resources = Object.keys(languages).reduce((accumulator, key) => {
+  accumulator[key] = {
+    common: languages[key].common,
+  };
+  return accumulator;
+}, {});
+
+i18n
+  .init({
+    fallbackLng: 'en',
+    resources,
+    lang: 'en',
+    ns: ['common'],
+    defaultNS: 'common',
+    saveMissing: true,
+    debug: false,
+  }, (err, t) => {
+    t('key');
+    // initialized and ready to go!
+    console.log(`Current language used: ${i18n.language}`); //eslint-disable-line
+  });
+
+export default i18n;

app/src/languages.js

@@ -0,0 +1,12 @@
+const languages = {
+  en: {
+    name: 'English',
+    common: require('../build/locales/en/common.json'),
+  },
+  de: {
+    name: 'Deutsch',
+    common: require('../build/locales/de/common.json'),
+  },
+};
+
+export default languages;

app/src/main.js

@@ -1,12 +1,17 @@
 import electron from 'electron'; // eslint-disable-line import/no-extraneous-dependencies
 import path from 'path';
+import storage from 'electron-json-storage'; // eslint-disable-line import/no-extraneous-dependencies
+import i18n from './i18n';
 import buildMenu from './menu';
 
 const { app, BrowserWindow, Menu, ipcMain } = electron;
 
 let win;
 let isUILoaded = false;
 let eventStack = [];
+// @todo change en with the detected lang
+const defaultLng = 'en';
+let lang;
 
 const copyright = `Copyright © 2016 - ${new Date().getFullYear()} Lisk Foundation`;
 const protocolName = 'lisk';
@@ -19,7 +24,33 @@ const sendUrlToRouter = (url) => {
   }
 };
 
+/**
+ * Sends an event to client application
+ * @param {String} locale - the 2 letter name of the local
+ */
+const sendDetectedLang = (locale) => {
+  if (isUILoaded && win && win.webContents) {
+    win.webContents.send('detectedLocale', locale);
+  } else {
+    eventStack.push({ event: 'detectedLocale', value: locale });
+  }
+};
+
+// read config data from JSON file
+storage.get('config', (error, data) => {
+  if (error) throw error;
+  lang = data.lang;
+  sendDetectedLang(lang);
+});
+
 function createWindow() {
+  // set language of the react app
+  if (lang) {
+    sendDetectedLang(lang);
+  } else {
+    sendDetectedLang(defaultLng);
+  }
+
   const { width, height } = electron.screen.getPrimaryDisplay().workAreaSize;
   win = new BrowserWindow({
     width: width > 2000 ? Math.floor(width * 0.5) : width - 250,
@@ -39,7 +70,7 @@ function createWindow() {
     sendUrlToRouter(process.argv.slice(1));
   }
 
-  Menu.setApplicationMenu(buildMenu(app, copyright));
+  Menu.setApplicationMenu(buildMenu(app, copyright, i18n));
   win.loadURL(`file://${__dirname}/index.html`);
 
   win.on('closed', () => { win = null; });
@@ -138,3 +169,16 @@ ipcMain.on('proxyCredentialsEntered', (event, username, password) => {
   global.myTempFunction(username, password);
 });
 
+ipcMain.on('set-locale', (event, locale) => {
+  const langCode = locale.substr(0, 2);
+  if (langCode) {
+    lang = langCode;
+    i18n.changeLanguage(langCode);
+    // write selected lang on JSON file
+    storage.set('config', { lang: langCode }, (error) => {
+      if (error) throw error;
+    });
+    Menu.setApplicationMenu(buildMenu(app, copyright, i18n));
+    event.returnValue = 'Rebuilt electron menu.';
+  }
+});

app/src/menu.js

@@ -1,124 +1,135 @@
-import electron from 'electron'; // eslint-disable-line import/no-extraneous-dependencies
+const electron = require('electron'); // eslint-disable-line import/no-extraneous-dependencies
 
 const { Menu } = electron;
 
-const template = [
-  {
-    label: 'Edit',
-    submenu: [
-      {
-        role: 'undo',
-      },
-      {
-        role: 'redo',
-      },
-      {
-        type: 'separator',
-      },
-      {
-        role: 'cut',
-      },
-      {
-        role: 'copy',
-      },
-      {
-        role: 'paste',
-      },
-      {
-        role: 'selectall',
-      },
-    ],
-  },
-  {
-    label: 'View',
-    submenu: [
-      {
-        role: 'reload',
-      },
-      {
-        role: 'togglefullscreen',
-      },
-    ],
-  },
-  {
-    label: 'Window',
-    submenu: [
-      {
-        role: 'minimize',
-      },
-    ],
-  },
-  {
-    label: 'Help',
-    submenu: [
-      {
-        label: 'Lisk Website',
-        click() {
-          electron.shell.openExternal('https://lisk.io');
+const buildTemplate = i18n =>
+  [
+    {
+      label: i18n.t('Edit'),
+      submenu: [
+        {
+          role: 'undo',
+          label: i18n.t('Undo'),
         },
-      },
-      {
-        label: 'Lisk Chat',
-        click() {
-          electron.shell.openExternal('https://lisk.chat');
+        {
+          role: 'redo',
+          label: i18n.t('Redo'),
         },
-      },
-      {
-        label: 'Lisk Explorer',
-        click() {
-          electron.shell.openExternal('https://explorer.lisk.io');
+        {
+          type: 'separator',
         },
-      },
-      {
-        label: 'Lisk Forum',
-        click() {
-          electron.shell.openExternal('https://forum.lisk.io');
+        {
+          role: 'cut',
+          label: i18n.t('Cut'),
         },
-      },
-      {
-        type: 'separator',
-      },
-      {
-        label: 'Report Issue...',
-        click() {
-          electron.shell.openExternal('https://lisk.zendesk.com/hc/en-us/requests/new');
+        {
+          role: 'copy',
+          label: i18n.t('Copy'),
         },
-      },
-      {
-        label: 'What\'s New...',
-        click() {
-          electron.shell.openExternal('https://github.com/LiskHQ/lisk-nano/releases');
+        {
+          role: 'paste',
+          label: i18n.t('Paste'),
         },
-      },
-    ],
-  },
-];
+        {
+          role: 'selectall',
+          label: i18n.t('Select all'),
+        },
+      ],
+    },
+    {
+      label: i18n.t('View'),
+      submenu: [
+        {
+          role: 'reload',
+          label: i18n.t('Reload'),
+        },
+        {
+          role: 'togglefullscreen',
+          label: i18n.t('Toggle full screen'),
+        },
+      ],
+    },
+    {
+      label: i18n.t('Window'),
+      submenu: [
+        {
+          role: 'minimize',
+          label: i18n.t('Minimize'),
+        },
+      ],
+    },
+    {
+      label: i18n.t('Help'),
+      submenu: [
+        {
+          label: i18n.t('Lisk Website'),
+          click() {
+            electron.shell.openExternal('https://lisk.io');
+          },
+        },
+        {
+          label: i18n.t('Lisk Chat'),
+          click() {
+            electron.shell.openExternal('https://lisk.chat');
+          },
+        },
+        {
+          label: i18n.t('Lisk Explorer'),
+          click() {
+            electron.shell.openExternal('https://explorer.lisk.io');
+          },
+        },
+        {
+          label: i18n.t('Lisk Forum'),
+          click() {
+            electron.shell.openExternal('https://forum.lisk.io');
+          },
+        },
+        {
+          type: 'separator',
+        },
+        {
+          label: i18n.t('Report Issue...'),
+          click() {
+            electron.shell.openExternal('https://lisk.zendesk.com/hc/en-us/requests/new');
+          },
+        },
+        {
+          label: i18n.t('What\'s New...'),
+          click() {
+            electron.shell.openExternal('https://github.com/LiskHQ/lisk-nano/releases');
+          },
+        },
+      ],
+    },
+  ];
 
-export default (app, copyright) => {
+module.exports = (app, copyright, i18n) => {
+  const template = buildTemplate(i18n);
   if (process.platform === 'darwin') {
     const name = app.getName();
     template.unshift({
       label: name,
       submenu: [
         {
           role: 'about',
-          label: 'About',
+          label: i18n.t('About'),
         },
         {
           role: 'quit',
-          label: 'Quit',
+          label: i18n.t('Quit'),
         },
       ],
     });
   } else {
     template[template.length - 1].submenu.push({
-      label: 'About',
+      label: i18n.t('About'),
       click(item, focusedWindow) {
         if (focusedWindow) {
           const options = {
             buttons: ['OK'],
             icon: `${__dirname}/assets/lisk.png`,
-            message: `Lisk Nano\nVersion ${app.getVersion()}\n${copyright}`,
+            message: `${i18n.t('Lisk Nano')} \n ${i18n.t('Version')} ${app.getVersion()}\n${copyright}`,
           };
           electron.dialog.showMessageBox(focusedWindow, options, () => {});
         }

package.json

@@ -17,7 +17,7 @@
     "dist:win": "build --win --ia32 --x64",
     "dist:mac": "build --mac",
     "dist:linux": "build --linux --ia32 --x64 --armv7l",
-    "copy-files": "mkdir app/build && cp -r ./src/index.html ./src/assets ./app/build",
+    "copy-files": "mkdir app/build && cp -r ./src/index.html ./src/assets ./src/locales ./app/build",
     "clean": "del app/build -f",
     "eslint": "eslint ./src/ ./app/src/ ./app/config/ ./features/",
     "storybook": "start-storybook -p 6006 -s ./src/",
@@ -81,6 +81,7 @@
     "del-cli": "1.1.0",
     "electron": "1.7.8",
     "electron-builder": "19.32.2",
+    "electron-json-storage": "^3.2.0",
     "enzyme": "2.9.1",
     "eslint": "4.8.0",
     "eslint-config-airbnb": "15.1.0",

src/i18n-scanner.js

@@ -26,7 +26,8 @@ const customHandler = function (key, options) {
 };
 
 const files = glob.sync('./src/**/*.js', {});
-files.forEach((file) => {
+const electronFiles = glob.sync('./app/src/**/*.js', {});
+[...files, ...electronFiles].forEach((file) => {
   const content = fs.readFileSync(file, 'utf-8');
   parser.parseFuncFromString(content, { list: translationFunctionNames }, customHandler);
 });