Merge pull request #763 from LiskHQ/744-stings-i18n-modals

Find all strings for i18n in modals - Closes #744

src/actions/account.js

@@ -5,6 +5,7 @@ import { transactionAdded } from './transactions';
 import { errorAlertDialogDisplayed } from './dialog';
 import Fees from '../constants/fees';
 import { toRawLsk } from '../utils/lsk';
+import transactionTypes from '../constants/transactionTypes';
 
 /**
  * Trigger this action to update the account object
@@ -58,7 +59,7 @@ export const secondPassphraseRegistered = ({ activePeer, secondPassphrase, accou
           senderId: account.address,
           amount: 0,
           fee: Fees.setSecondPassphrase,
-          type: 1,
+          type: transactionTypes.setSecondPassphrase,
         }));
       }).catch((error) => {
         const text = (error && error.message) ? error.message : 'An error occurred while registering your second passphrase. Please try again.';
@@ -83,7 +84,7 @@ export const delegateRegistered = ({
           username,
           amount: 0,
           fee: Fees.registerDelegate,
-          type: 2,
+          type: transactionTypes.registerDelegate,
         }));
       })
       .catch((error) => {
@@ -108,7 +109,7 @@ export const sent = ({ activePeer, account, recipientId, amount, passphrase, sec
           recipientId,
           amount: toRawLsk(amount),
           fee: Fees.send,
-          type: 0,
+          type: transactionTypes.send,
         }));
       })
       .catch((error) => {

src/actions/account.test.js

@@ -9,6 +9,7 @@ import * as accountApi from '../utils/api/account';
 import * as delegateApi from '../utils/api/delegate';
 import Fees from '../constants/fees';
 import { toRawLsk } from '../utils/lsk';
+import transactionTypes from '../constants/transactionTypes';
 
 describe('actions: account', () => {
   describe('accountUpdated', () => {
@@ -69,7 +70,7 @@ describe('actions: account', () => {
         senderId: 'test_address',
         amount: 0,
         fee: Fees.setSecondPassphrase,
-        type: 1,
+        type: transactionTypes.setSecondPassphrase,
       };
 
       actionFunction(dispatch);
@@ -129,7 +130,7 @@ describe('actions: account', () => {
         username: data.username,
         amount: 0,
         fee: Fees.registerDelegate,
-        type: 2,
+        type: transactionTypes.registerDelegate,
       };
 
       actionFunction(dispatch);
@@ -191,7 +192,7 @@ describe('actions: account', () => {
         recipientId: data.recipientId,
         amount: toRawLsk(data.amount),
         fee: Fees.send,
-        type: 0,
+        type: transactionTypes.send,
       };
 
       actionFunction(dispatch);

src/actions/dialog.js

@@ -1,5 +1,6 @@
-import actionTypes from '../constants/actions';
+import i18next from 'i18next';
 import Alert from '../components/dialog/alert';
+import actionTypes from '../constants/actions';
 
 /**
  * An action to dispatch to display a dialog
@@ -28,7 +29,7 @@ export const alertDialogDisplayed = data => dialogDisplayed({
  *
  */
 export const successAlertDialogDisplayed = data => alertDialogDisplayed({
-  title: 'Success',
+  title: i18next.t('Success'),
   text: data.text,
   type: 'success',
 });
@@ -38,7 +39,7 @@ export const successAlertDialogDisplayed = data => alertDialogDisplayed({
  *
  */
 export const errorAlertDialogDisplayed = data => alertDialogDisplayed({
-  title: 'Error',
+  title: i18next.t('Error'),
   text: data.text,
   type: 'error',
 });

src/actions/voting.js

@@ -4,6 +4,7 @@ import { errorAlertDialogDisplayed } from './dialog';
 import { passphraseUsed } from './account';
 import actionTypes from '../constants/actions';
 import Fees from '../constants/fees';
+import transactionTypes from '../constants/transactionTypes';
 
 /**
  * Add pending variable to the list of voted delegates and list of unvoted delegates
@@ -82,7 +83,7 @@ export const votePlaced = ({ activePeer, passphrase, account, votes, secondSecre
         senderId: account.address,
         amount: 0,
         fee: Fees.vote,
-        type: 3,
+        type: transactionTypes.vote,
       }));
     }).catch((error) => {
       const text = error && error.message ? `${error.message}.` : 'An error occurred while placing your vote.';

src/components/account/account.js

@@ -63,7 +63,7 @@ const Account = ({
                     <LiskAmount val={account.balance} /> LSK
                   </p>
                   <p className="inner secondary tooltip">
-                    Click to send all funds
+                    {t('Click to send all funds')}
                   </p>
                 </div>
               </ClickToSend>

src/components/account/account.test.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { expect } from 'chai';
-import sinon from 'sinon';
 import { shallow } from 'enzyme';
+import sinon from 'sinon';
+import i18n from '../../i18n';
 import store from '../../store';
 import Account from './account';
 import ClickToSend from '../clickToSend';
@@ -50,7 +51,7 @@ describe('Account', () => {
 
   it('should render balance with ClickToSend component', () => {
     const wrapper = shallow(<Account {...props} />, {
-      context: { store },
+      context: { store, i18n },
       childContextTypes: {
       },
     });

src/components/account/address.js

@@ -6,11 +6,11 @@ import styles from './account.css';
 
 const getStatusTooltip = (props) => {
   if (props.secondSignature) {
-    return 'This account is protected by a second passphrase';
+    return props.t('This account is protected by a second passphrase');
   } else if (props.passphrase) {
-    return 'Passphrase of the acount is saved till the end of the session.';
+    return props.t('Passphrase of the account is saved till the end of the session.');
   }
-  return 'Passphrase of the acount will be required to perform any transaction.';
+  return props.t('Passphrase of the account will be required to perform any transaction.');
 };
 
 const Address = (props) => {

src/components/actionBar/index.js

@@ -1,20 +1,22 @@
-import React from 'react';
+import { translate } from 'react-i18next';
 import Button from 'react-toolbox/lib/button';
+import React from 'react';
 import grid from 'flexboxgrid/dist/flexboxgrid.css';
 import PricedButton from '../pricedButton';
 import styles from './actionBar.css';
 
-const ActionBar = ({
-  secondaryButton, primaryButton, account,
+export const ActionBarRaw = ({
+  secondaryButton, primaryButton, account, t,
 }) => (
   <section className={`${grid.row} ${grid['between-xs']} ${styles.wrapper}`} >
     <Button
-      label={secondaryButton.label || 'Cancel'}
+      label={secondaryButton.label || t('Cancel')}
       className={secondaryButton.className || 'cancel-button'}
       onClick={secondaryButton.onClick}
       type={secondaryButton.type || 'button'} />
 
     <PricedButton
+      t={t}
       primary={true}
       raised={true}
       label={primaryButton.label}
@@ -27,4 +29,4 @@ const ActionBar = ({
   </section>
 );
 
-export default ActionBar;
+export default translate()(ActionBarRaw);

src/components/actionBar/index.test.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import { expect } from 'chai';
 import { mount } from 'enzyme';
+import configureStore from 'redux-mock-store';
+import PropTypes from 'prop-types';
 import sinon from 'sinon';
-import { Provider } from 'react-redux';
-import ActionBar from './index';
-import store from '../../store';
+import i18n from '../../i18n';
+import { ActionBarRaw as ActionBar } from './index';
 // import * as accountApi from '../../utils/api/account';
 
+const fakeStore = configureStore();
 
 describe('ActionBar', () => {
   let wrapper;
@@ -24,7 +26,18 @@ describe('ActionBar', () => {
         onClick: sinon.spy(),
       },
     };
-    wrapper = mount(<Provider store={store}><ActionBar {...props} /></Provider>);
+    const store = fakeStore({
+      account: {
+        balance: 100e8,
+      },
+    });
+    wrapper = mount(<ActionBar {...props} />, {
+      context: { store, i18n },
+      childContextTypes: {
+        store: PropTypes.object.isRequired,
+        i18n: PropTypes.object.isRequired,
+      },
+    });
   });
 
   it('renders two Button components', () => {

src/components/authInputs/authInputs.js

@@ -18,7 +18,7 @@ class AuthInputs extends React.Component {
       const expectedPublicKey = this.props.account[publicKeyMap[name]];
 
       if (expectedPublicKey && expectedPublicKey !== extractPublicKey(value)) {
-        error = 'Entered passphrase does not belong to the active account';
+        error = this.props.t('Entered passphrase does not belong to the active account');
       }
     }
     this.props.onChange(name, value, error);
@@ -27,13 +27,13 @@ class AuthInputs extends React.Component {
   render() {
     return <span>
       {(!this.props.account.passphrase &&
-        <PassphraseInput label='Passphrase'
+        <PassphraseInput label={this.props.t('Passphrase')}
           className='passphrase'
           error={this.props.passphrase.error}
           value={this.props.passphrase.value}
           onChange={this.onChange.bind(this, 'passphrase')} />)}
       {(this.props.account.secondSignature &&
-        <PassphraseInput label='Second Passphrase'
+        <PassphraseInput label={this.props.t('Second Passphrase')}
           className='second-passphrase'
           error={this.props.secondPassphrase.error}
           value={this.props.secondPassphrase.value}

src/components/authInputs/authInputs.test.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { expect } from 'chai';
 import { mount } from 'enzyme';
 import sinon from 'sinon';
+import { I18nextProvider } from 'react-i18next';
+import i18n from '../../i18n'; // initialized i18next instance
 import AuthInputs from './authInputs';
 
 
@@ -20,30 +22,31 @@ describe('AuthInputs', () => {
       passphrase: {
         value: passphrase,
       },
+      t: key => key,
     };
   });
 
   it('should render Input if props.account.secondSignature', () => {
     props.account.secondSignature = true;
-    wrapper = mount(<AuthInputs {...props} />);
+    wrapper = mount(<I18nextProvider i18n={ i18n }><AuthInputs {...props} /></I18nextProvider>);
     expect(wrapper.find('Input')).to.have.lengthOf(1);
   });
 
   it('should render null if !props.account.secondSignature', () => {
     props.account.secondSignature = false;
-    wrapper = mount(<AuthInputs {...props} />);
+    wrapper = mount(<I18nextProvider i18n={ i18n }><AuthInputs {...props} /></I18nextProvider>);
     expect(wrapper.html()).to.equal('<span></span>');
   });
 
   it('should render null if !props.account.secondSignature', () => {
     props.account.secondSignature = false;
-    wrapper = mount(<AuthInputs {...props} />);
+    wrapper = mount(<I18nextProvider i18n={ i18n }><AuthInputs {...props} /></I18nextProvider>);
     expect(wrapper.html()).to.equal('<span></span>');
   });
 
   it('should call props.onChange when input value changes', () => {
     props.account.secondSignature = true;
-    wrapper = mount(<AuthInputs {...props} />);
+    wrapper = mount(<I18nextProvider i18n={ i18n }><AuthInputs {...props} /></I18nextProvider>);
     wrapper.find('.second-passphrase input').simulate('change', { target: { value: passphrase } });
     expect(props.onChange).to.have.been.calledWith('secondPassphrase', passphrase);
   });
@@ -52,21 +55,20 @@ describe('AuthInputs', () => {
     const error = 'Entered passphrase does not belong to the active account';
     props.account.secondSignature = true;
     props.account.secondPublicKey = 'fab9d261ea050b9e326d7e11587eccc343a20e64e29d8781b50fd06683cacc88';
-    wrapper = mount(<AuthInputs {...props} />);
+    wrapper = mount(<I18nextProvider i18n={ i18n }><AuthInputs {...props} /></I18nextProvider>);
     wrapper.find('.second-passphrase input').simulate('change', { target: { value: passphrase } });
     expect(props.onChange).to.have.been.calledWith('secondPassphrase', passphrase, error);
   });
 
   it('should call props.onChange(\'secondPassphrase\', \'Required\') when input value changes to \'\'', () => {
     props.account.secondSignature = true;
-    wrapper = mount(<AuthInputs {...props} />);
-    wrapper.find('.second-passphrase input').simulate('change', { target: { value: '' } });
+    wrapper = mount(<I18nextProvider i18n={ i18n }><AuthInputs {...props} /></I18nextProvider>); wrapper.find('.second-passphrase input').simulate('change', { target: { value: '' } });
     expect(props.onChange).to.have.been.calledWith('secondPassphrase', '', 'Required');
   });
 
   it('should call props.onChange(\'secondPassphrase\', \'Invalid passphrase\') when input value changes to \'test\'', () => {
     props.account.secondSignature = true;
-    wrapper = mount(<AuthInputs {...props} />);
+    wrapper = mount(<I18nextProvider i18n={ i18n }><AuthInputs {...props} /></I18nextProvider>);
     wrapper.find('.second-passphrase input').simulate('change', { target: { value: 'test' } });
     expect(props.onChange).to.have.been.calledWith('secondPassphrase', 'test', 'Passphrase should have 12 words, entered passphrase has 1');
   });

src/components/authInputs/index.js

@@ -1,9 +1,10 @@
 import { connect } from 'react-redux';
+import { translate } from 'react-i18next';
+
 import AuthInputs from './authInputs';
 
 const mapStateToProps = state => ({
   account: state.account,
 });
 
-export default connect(mapStateToProps)(AuthInputs);
-
+export default connect(mapStateToProps)(translate()(AuthInputs));

src/components/authInputs/index.test.js

@@ -2,7 +2,9 @@ import React from 'react';
 import { expect } from 'chai';
 import { mount } from 'enzyme';
 import { Provider } from 'react-redux';
+import { I18nextProvider } from 'react-i18next';
 import configureMockStore from 'redux-mock-store';
+import i18n from '../../i18n';
 import AuthInputsHOC from './index';
 
 describe('AuthInputsHOC', () => {
@@ -20,7 +22,9 @@ describe('AuthInputsHOC', () => {
   it('should render AuthInputs with props.account equal to state.account ', () => {
     const store = configureMockStore([])({ account });
     wrapper = mount(<Provider store={store}>
-      <AuthInputsHOC {...props}/>
+      <I18nextProvider i18n={ i18n }>
+        <AuthInputsHOC {...props}/>
+      </I18nextProvider>
     </Provider>);
     expect(wrapper.find('AuthInputs').props().account).to.deep.equal(account);
   });

src/components/clickToSend/index.test.js

@@ -1,24 +1,19 @@
 import React from 'react';
 import { expect } from 'chai';
 import { shallow } from 'enzyme';
-import configureMockStore from 'redux-mock-store';
 import sinon from 'sinon';
+import i18n from '../../i18n';
 import ClickToSend from './index';
 import RelativeLink from '../relativeLink';
 
 const Dummy = () => (<span />);
 
 describe('ClickToSend', () => {
   let setActiveDialog;
-  const store = configureMockStore([])({
-    peers: { data: {} },
-    account: {},
-    activePeerSet: () => {},
-  });
   const options = {
-    context: { store },
+    context: { i18n },
     childContextTypes: {
-      store,
+      i18n,
     },
   };