Setup browser language detector - Closes #556

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