Merge pull request #781 from LiskHQ/745-settings-page

Create a settings page - Closes #745

features/settings.feature

@@ -0,0 +1,6 @@
+Feature: Settings dialog
+  Scenario: should allow to change language
+    Given I'm logged in as "any account"
+    When I click "settings" in main menu
+    And I select option no. 2 from "language" select
+    Then I should see text "SENDEN" in "send button" element

src/components/dialog/dialogs.js

@@ -1,12 +1,13 @@
-import Send from '../send';
+import ReceiveDialog from '../receiveDialog';
+import Register from '../register';
 import RegisterDelegate from '../registerDelegate';
+import SaveAccount from '../saveAccount';
+import SecondPassphrase from '../secondPassphrase';
+import Send from '../send';
+import Settings from '../settings';
 import SignMessage from '../signMessage';
 import VerifyMessage from '../verifyMessage';
-import SecondPassphrase from '../secondPassphrase';
 import VoteDialog from '../voteDialog';
-import ReceiveDialog from '../receiveDialog';
-import SaveAccount from '../saveAccount';
-import Register from '../register';
 
 export default {
   send: {
@@ -45,4 +46,8 @@ export default {
     title: 'Remember this account',
     component: SaveAccount,
   },
+  settings: {
+    title: 'Settings',
+    component: Settings,
+  },
 };

src/components/header/header.js

@@ -2,14 +2,13 @@ import { Button } from 'react-toolbox/lib/button';
 import { IconMenu, MenuItem, MenuDivider } from 'react-toolbox/lib/menu';
 import React from 'react';
 import grid from 'flexboxgrid/dist/flexboxgrid.css';
+
 import PrivateWrapper from '../privateWrapper';
+import SaveAccountButton from '../saveAccountButton';
 import logo from '../../assets/images/LISK-nano.png';
 import offlineStyle from '../offlineWrapper/offlineWrapper.css';
-import i18n from '../../i18n';
-import SaveAccountButton from '../saveAccountButton';
 import styles from './header.css';
 import RelativeLink from '../relativeLink';
-import languages from '../../constants/languages';
 
 const Header = props => (
   <header className={`${grid.row} ${grid['between-xs']} ${styles.wrapper}`} >
@@ -47,23 +46,16 @@ const Header = props => (
         </MenuItem>
         <MenuDivider />
         <SaveAccountButton />
+        <MenuItem>
+          <RelativeLink className={`settings ${styles.menuItem}`} to='settings'>{props.t('Settings')}</RelativeLink>
+        </MenuItem>
       </IconMenu>
 
       <Button className={`${styles.button} logout-button`} raised onClick={props.logOut}>{props.t('logout')}</Button>
       <RelativeLink neutral raised className={`${styles.button} receive-button`}
         to='receive'>{props.t('Receive LSK')}</RelativeLink>
       <RelativeLink primary raised disableWhenOffline className={`${styles.button} send-button`}
         to='send'>{props.t('send')}</RelativeLink>
-      <IconMenu
-        selectable={true}
-        selected={i18n.language}
-        className={`${styles.iconButton} ${offlineStyle.disableWhenOffline}`}
-        icon='language' position='topRight'>
-        {Object.keys(languages).map(key => (
-          <MenuItem key={key} value={key} caption={languages[key].name}
-            onClick={() => i18n.changeLanguage(key)} />
-        ))}
-      </IconMenu>
     </PrivateWrapper>
   </header>
 );

src/components/header/header.test.js

@@ -41,12 +41,12 @@ describe('Header', () => {
     propsMock.restore();
   });
 
-  it('renders two Button components', () => {
+  it('renders 1 Button components', () => {
     expect(wrapper.find(Button)).to.have.length(1);
   });
 
-  it('renders two RelativeLink components', () => {
-    expect(wrapper.find(RelativeLink)).to.have.length(6);
+  it('renders 7 RelativeLink components', () => {
+    expect(wrapper.find(RelativeLink)).to.have.length(7);
   });
 
   it('should have an image with srouce of "logo"', () => {

src/components/settings/index.js

@@ -0,0 +1,38 @@
+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 Settings = ({ t }) => (
+  <form>
+    <Dropdown
+      auto={false}
+      className='language'
+      label={t('Language')}
+      source={languagesSource}
+      value={i18n.language}
+      template={customItem}
+      onChange={handleChange}
+    />
+  </form>
+);
+
+export default translate()(Settings);

src/components/settings/index.test.js

@@ -0,0 +1,42 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import { expect } from 'chai';
+import { mount } from 'enzyme';
+import sinon from 'sinon';
+
+import Settings from './index';
+import i18n from '../../i18n';
+
+// import * as accountApi from '../../utils/api/account';
+
+
+describe('Settings', () => {
+  let wrapper;
+  let props;
+
+  beforeEach(() => {
+    props = {
+    };
+    wrapper = mount(<Settings {...props} />, {
+      context: { i18n },
+      childContextTypes: {
+        i18n: PropTypes.object.isRequired,
+      },
+    });
+  });
+
+  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();
+  });
+});

src/constants/languages.js

@@ -2,10 +2,12 @@ const languages = {
   en: {
     name: 'English',
     common: require('../locales/en/common.json'),
+    flag: require('../assets/images/flags/en.png'),
   },
   de: {
     name: 'Deutsch',
     common: require('../locales/de/common.json'),
+    flag: require('../assets/images/flags/de.png'),
   },
 };