Merge branch '768-electron-menu-i18n' of https://github.com/LiskHQ/li…

…sk-nano into 768-electron-menu-i18n

Jenkinsfile

@@ -138,7 +138,7 @@ node('lisk-nano-01'){
     stage ('Deploy and Set milestone') {
       try {
         sh '''
-        rsync -axl --delete "$WORKSPACE/app/dist/" "jenkins@master-01:/var/www/test/lisk-nano/$BRANCH_NAME/"
+        rsync -axl --delete --rsync-path="mkdir -p '/var/www/test/lisk-nano/$BRANCH_NAME/' && rsync" "$WORKSPACE/app/dist/" "jenkins@master-01:/var/www/test/lisk-nano/$BRANCH_NAME/"
 
         # Cleanup - delete all files on success
         rm -rf "$WORKSPACE/*"

package.json

@@ -44,7 +44,7 @@
     "postcss": "6.0.12",
     "postcss-cssnext": "2.11.0",
     "prop-types": "=15.5.10",
-    "qrcode.react": "=0.7.1",
+    "qrcode.react": "0.7.2",
     "react": "=15.6.x",
     "react-animate-on-change": "^1.0.0",
     "react-circular-progressbar": "0.2.1",
@@ -78,9 +78,9 @@
     "cucumber": "2.2.0",
     "del-cli": "1.1.0",
     "electron": "1.7.8",
-    "electron-builder": "19.30.2",
+    "electron-builder": "19.32.2",
     "enzyme": "2.9.1",
-    "eslint": "4.7.2",
+    "eslint": "4.8.0",
     "eslint-config-airbnb": "15.1.0",
     "eslint-config-google": "0.9.1",
     "eslint-loader": "1.9.0",
@@ -89,7 +89,7 @@
     "eslint-plugin-react": "7.4.0",
     "exports-loader": "0.6.4",
     "extract-text-webpack-plugin": "3.0.0",
-    "file-loader": "0.11.2",
+    "file-loader": "1.1.0",
     "glob": "=7.1.2",
     "i18next-scanner": "=2.0.0",
     "imports-loader": "0.7.1",
@@ -112,7 +112,7 @@
     "postcss-reporter": "5.0.0",
     "protractor": "5.1.2",
     "protractor-cucumber-framework": "3.1.0",
-    "raw-loader": "=0.5.1",
+    "raw-loader": "1.0.0-beta.0",
     "react-addons-test-utils": "=15.6.0",
     "react-hot-loader": "^1.3.1",
     "react-test-renderer": "=15.6.1",

src/components/dialog/dialog.js

@@ -5,37 +5,15 @@ import AppBar from 'react-toolbox/lib/app_bar';
 import { IconButton } from 'react-toolbox/lib/button';
 import styles from './dialog.css';
 import getDialogs from './dialogs';
+import routesReg from '../../utils/routes';
 
 class DialogElement extends Component {
   constructor() {
     super();
     this.state = {};
-    this.routesReg = [
-      {
-        regex: /\/main\/transactions(?:\/[^/]*)?$/,
-        path: '/main/transactions/',
-        params: 'dialog',
-        name: 'transactions',
-      }, {
-        regex: /\/main\/voting(?:\/[^/]*)?$/,
-        path: '/main/voting/',
-        params: 'dialog',
-        name: 'voting',
-      }, {
-        regex: /\/main\/forging(?:\/[^/]*)?$/,
-        path: '/main/forging/',
-        params: 'dialog',
-        name: 'forging',
-      }, {
-        regex: /\/(\w+)?$/,
-        path: '/',
-        params: 'dialog',
-        name: 'login',
-      },
-    ];
     this.current = {
       pathname: '/',
-      reg: this.routesReg[3],
+      reg: routesReg[3],
       list: [],
       dialog: '',
     };
@@ -50,8 +28,9 @@ class DialogElement extends Component {
   }
 
   checkForDialog() {
+    // if the dialog is wrong, show a toast
     if (this.current.pathname !== this.props.history.location.pathname) {
-      this.current.reg = this.routesReg.find(item =>
+      this.current.reg = routesReg.find(item =>
         item.regex.test(this.props.history.location.pathname));
       this.current.pathname = this.props.history.location.pathname;
       const dialogName = this.props.history.location.pathname.replace(this.current.reg.path, '');

src/components/languageDropdown/index.js

@@ -0,0 +1,37 @@
+import { Dropdown } from 'react-toolbox';
+import { translate } from 'react-i18next';
+import React from 'react';
+
+import i18n from '../../i18n';
+import languages from '../../constants/languages';
+
+const languagesSource = Object.keys(languages).map(key => ({
+  value: key,
+  label: languages[key].name,
+  flag: languages[key].flag,
+}));
+
+const handleChange = (value) => {
+  i18n.changeLanguage(value);
+};
+
+const customItem = item => (
+  <div>
+    <img src={item.flag}/> {item.label}
+  </div>
+);
+
+const LanguageDropdown = ({ t }) => (
+  <Dropdown
+    auto={false}
+    className='language'
+    label={t('Language')}
+    source={languagesSource}
+    value={i18n.language}
+    template={customItem}
+    onChange={handleChange}
+  />
+);
+
+export default translate()(LanguageDropdown);
+

src/components/languageDropdown/index.test.js

@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import { expect } from 'chai';
+import { mount } from 'enzyme';
+import sinon from 'sinon';
+
+import LanguageDropdown from './index';
+import i18n from '../../i18n';
+
+// import * as accountApi from '../../utils/api/account';
+
+
+describe('LanguageDropdown', () => {
+  let wrapper;
+  let props;
+
+  beforeEach(() => {
+    props = {
+    };
+    wrapper = mount(<LanguageDropdown {...props} />, {
+      context: { i18n },
+      childContextTypes: {
+        i18n: PropTypes.object.isRequired,
+      },
+    });
+  });
+
+  it('renders a Dropdown component', () => {
+    expect(wrapper.find('Dropdown')).to.have.length(1);
+  });
+
+  it('calls i18n.changeLanguage on chaning the value in the dropdown', () => {
+    const i18nSpy = sinon.spy(i18n, 'changeLanguage');
+
+    wrapper.find('Dropdown').simulate('click');
+    wrapper.find('Dropdown ul li').at(0).simulate('click');
+    expect(i18nSpy).to.have.been.calledWith('en');
+
+    i18nSpy.restore();
+  });
+});
+

src/components/login/login.js

@@ -7,6 +7,7 @@ import getNetworks from './networks';
 import PassphraseInput from '../passphraseInput';
 import styles from './login.css';
 import env from '../../constants/env';
+import LanguageDropdown from '../languageDropdown';
 import RelativeLink from '../relativeLink';
 
 /**
@@ -163,9 +164,10 @@ class Login extends React.Component {
   render() {
     return (
       <div className={`box ${styles.wrapper}`}>
-        <div className={`${grid.row} ${grid['center-xs']}`}>
-          <div className={`${grid['col-xs-12']} ${grid['col-sm-8']}`}>
+        <div className={grid.row}>
+          <div className={`${grid['col-xs-12']} ${grid['col-sm-8']} ${grid['col-sm-offset-2']}`}>
             <form onSubmit={this.onFormSubmit.bind(this)}>
+              <LanguageDropdown />
               <Dropdown
                 auto={false}
                 source={this.networks}

src/components/settings/index.js

@@ -1,38 +1,10 @@
-import { Dropdown } from 'react-toolbox';
-import { translate } from 'react-i18next';
 import React from 'react';
+import LanguageDropdown from '../languageDropdown';
 
-import i18n from '../../i18n';
-import languages from '../../constants/languages';
-
-const languagesSource = Object.keys(languages).map(key => ({
-  value: key,
-  label: languages[key].name,
-  flag: languages[key].flag,
-}));
-
-const handleChange = (value) => {
-  i18n.changeLanguage(value);
-};
-
-const customItem = item => (
-  <div>
-    <img src={item.flag}/> {item.label}
-  </div>
-);
-
-const Settings = ({ t }) => (
+const Settings = () => (
   <form>
-    <Dropdown
-      auto={false}
-      className='language'
-      label={t('Language')}
-      source={languagesSource}
-      value={i18n.language}
-      template={customItem}
-      onChange={handleChange}
-    />
+    <LanguageDropdown />
   </form>
 );
 
-export default translate()(Settings);
+export default Settings;

src/components/settings/index.test.js

@@ -3,7 +3,6 @@ import React from 'react';
 
 import { expect } from 'chai';
 import { mount } from 'enzyme';
-import sinon from 'sinon';
 
 import Settings from './index';
 import i18n from '../../i18n';
@@ -26,17 +25,7 @@ describe('Settings', () => {
     });
   });
 
-  it('renders a form and a Dropdown components', () => {
-    expect(wrapper.find('Dropdown')).to.have.length(1);
-  });
-
-  it('calls i18n.changeLanguage on chaning the value in the dropdown', () => {
-    const i18nSpy = sinon.spy(i18n, 'changeLanguage');
-
-    wrapper.find('Dropdown').simulate('click');
-    wrapper.find('Dropdown ul li').at(0).simulate('click');
-    expect(i18nSpy).to.have.been.calledWith('en');
-
-    i18nSpy.restore();
+  it('renders a LanguageDropdown component', () => {
+    expect(wrapper.find('LanguageDropdown')).to.have.length(1);
   });
 });

src/i18n.js

@@ -1,6 +1,5 @@
 import i18n from 'i18next';
 import languages from './constants/languages';
-// import Cache from 'i18next-localstorage-cache';
 
 const resources = Object.keys(languages).reduce((accumulator, key) => {
   accumulator[key] = {
@@ -10,10 +9,8 @@ const resources = Object.keys(languages).reduce((accumulator, key) => {
 }, {});
 
 i18n
-  // .use(Cache)
   .init({
     fallbackLng: 'en',
-    lng: 'en',
     resources,
     react: {
       // wait: true, // globally set to wait for loaded translations in translate hoc

src/main.js

@@ -8,12 +8,14 @@ import App from './components/app';
 import store from './store';
 import i18n from './i18n'; // initialized i18next instance
 import proxyLogin from './utils/proxyLogin';
+import externalLinks from './utils/externalLinks';
 import env from './constants/env';
 import ipcLocale from './utils/ipcLocale';
 
 if (env.production) {
   proxyLogin.init();
   ipcLocale.init(i18n);
+  externalLinks.init();
 }
 
 const rootElement = document.getElementById('app');

src/utils/externalLinks.js

@@ -0,0 +1,23 @@
+import history from '../history';
+import routesReg from './routes';
+import { errorToastDisplayed } from '../actions/toaster';
+import store from '../store';
+
+export default {
+  init: () => {
+    const { ipc } = window;
+
+    if (ipc) {
+      ipc.on('openUrl', (action, url) => {
+        const normalizedUrl = url.toLowerCase().replace('lisk://', '/');
+        const route = routesReg.find(item => item.regex.test(normalizedUrl));
+        if (route !== undefined) {
+          history.push(normalizedUrl);
+        } else {
+          store.dispatch(errorToastDisplayed({ label: 'The URL was invalid' }));
+        }
+      });
+    }
+  },
+};
+

src/utils/externalLinks.test.js

@@ -0,0 +1,26 @@
+import { expect } from 'chai';
+import { spy } from 'sinon';
+import externalLinks from './externalLinks';
+
+describe('externalLinks', () => {
+  const ipc = {
+    on: spy(),
+  };
+
+  describe('init', () => {
+    it('should be a function', () => {
+      expect(typeof externalLinks.init).to.be.equal('function');
+    });
+
+    it('calling init when ipc is not on window should do nothing', () => {
+      externalLinks.init();
+      expect(ipc.on).to.not.have.been.calledWith();
+    });
+
+    it('calling init when ipc is available on window should bind listeners', () => {
+      window.ipc = ipc;
+      externalLinks.init();
+      expect(ipc.on).to.have.been.calledWith();
+    });
+  });
+});

src/utils/routes.js

@@ -0,0 +1,28 @@
+export default [
+  {
+    regex: /\/main\/transactions(?:\/[^/]*)?$/,
+    path: '/main/transactions/',
+    params: 'dialog',
+    name: 'transactions',
+  }, {
+    regex: /\/main\/voting(?:\/[^/]*)?$/,
+    path: '/main/voting/',
+    params: 'dialog',
+    name: 'voting',
+  }, {
+    regex: /\/main\/forging(?:\/[^/]*)?$/,
+    path: '/main/forging/',
+    params: 'dialog',
+    name: 'forging',
+  }, {
+    regex: /register(\/)?$/,
+    path: '/',
+    params: 'dialog',
+    name: 'login',
+  }, {
+    regex: /^\/$/,
+    path: '/',
+    params: 'dialog',
+    name: 'login',
+  },
+];