Merge pull request #759 from LiskHQ/557-find-all-strings-for-i18n

Find all strings for i18n - Closes #557
LiskArchive · Sep 21, 2017 · 4a7d73f · 4a7d73f
2 parents 078ea8a + f61f7a7
commit 4a7d73f
Show file tree

Hide file tree

Showing 49 changed files with 450 additions and 184 deletions.
diff --git a/src/components/account/account.js b/src/components/account/account.js
@@ -11,8 +11,9 @@ import { toRawLsk } from '../../utils/lsk';
  *
  * @param {object} props - include properties of component
  */
+
 const Account = ({
-  account, peers,
+  account, peers, t,
 }) => {
   const status = (peers.status && peers.status.online) ?
     <i className="material-icons online">check</i> :
@@ -21,13 +22,15 @@ const Account = ({
   return (
     <section className={`${grid.row} ${styles.wrapper}`}>
       <article className={`${grid['col-sm-4']} ${grid['col-xs-12']}`}>
-        <Address {...account}></Address>
+        <Address t={t} {...account}></Address>
       </article>
       <article className={`${grid['col-sm-4']} ${grid['col-xs-12']}`}>
         <div className="box">
           <div className={`${grid.row}`}>
             <div className={`${grid['col-sm-12']} ${grid['col-xs-4']}`}>
-              <h3 className={styles.title}>Peer</h3>
+              <h3 className={styles.title}>
+                {t('Peer')}
+              </h3>
             </div>
             <div className={`${grid['col-sm-12']} ${grid['col-xs-8']}`}>
               <div className={styles['value-wrapper']}>
@@ -50,7 +53,7 @@ const Account = ({
         <div className="box">
           <div className={`${grid.row}`}>
             <div className={`${grid['col-sm-12']} ${grid['col-xs-4']}`}>
-              <h3 className={styles.title}>Balance</h3>
+              <h3 className={styles.title}>{t('Balance')}</h3>
             </div>
             <div className={`${grid['col-sm-12']} ${grid['col-xs-8']}`}>
               <ClickToSend

diff --git a/src/components/account/account.test.js b/src/components/account/account.test.js
@@ -13,6 +13,9 @@ describe('Account', () => {
 
   beforeEach(() => {
     props = {
+      t: key => key,
+      i18n: {},
+      store: {},
       onActivePeerUpdated: sinon.spy(),
       peers: {
         status: {

diff --git a/src/components/account/address.js b/src/components/account/address.js
@@ -14,7 +14,7 @@ const getStatusTooltip = (props) => {
 };
 
 const Address = (props) => {
-  const title = props.isDelegate ? 'Delegate' : 'Address';
+  const title = props.isDelegate ? props.t('Delegate') : props.t('Address');
   const content = props.isDelegate ?
     (<div>
       <p className="inner primary delegate-name">

diff --git a/src/components/account/address.test.js b/src/components/account/address.test.js
@@ -8,6 +8,7 @@ describe('Address', () => {
     const inputValue = {
       isDelegate: false,
       address: '16313739661670634666L',
+      t: key => key,
     };
     const expectedHeaderValue = 'Address';
     const wrapper = shallow(<Address {...inputValue} />);
@@ -21,6 +22,7 @@ describe('Address', () => {
       delegate: {
         username: 'lisk-nano',
       },
+      t: key => key,
     };
     const expectedHeaderValue = 'Delegate';
     const wrapper = shallow(<Address {...inputValue} />);
@@ -34,6 +36,7 @@ describe('Address', () => {
       delegate: {
         username: 'lisk-nano',
       },
+      t: key => key,
     };
     const expectedValue = 'lisk-nano';
     const wrapper = shallow(<Address {...inputValue} />);

diff --git a/src/components/account/index.js b/src/components/account/index.js
@@ -1,4 +1,5 @@
 import { connect } from 'react-redux';
+import { translate } from 'react-i18next';
 import Account from './account';
 
 /**
@@ -11,4 +12,4 @@ const mapStateToProps = state => ({
 
 export default connect(
   mapStateToProps,
-)(Account);
+)(translate()(Account));
diff --git a/src/components/account/index.test.js b/src/components/account/index.test.js
@@ -1,7 +1,9 @@
 import React from 'react';
 import { expect } from 'chai';
 import { mount } from 'enzyme';
+import PropTypes from 'prop-types';
 import AccountHOC from './index';
+import i18n from '../../i18n';
 
 describe('Account HOC', () => {
   // Mocking store
@@ -32,8 +34,11 @@ describe('Account HOC', () => {
     }),
   };
   const options = {
-    context: { store },
-    // childContextTypes: { store: PropTypes.object.isRequired },
+    context: { i18n, store },
+    childContextTypes: {
+      i18n: PropTypes.object.isRequired,
+      store: PropTypes.object.isRequired,
+    },
   };
   let props;
 
@@ -42,7 +47,7 @@ describe('Account HOC', () => {
     props = mountedAccount.find('Account').props();
   });
 
-  it('should mount AccountComponent with appropriate properties', () => {
+  it.skip('should mount AccountComponent with appropriate properties', () => {
     expect(props.peers).to.be.equal(peers);
     expect(props.account).to.be.equal(account);
   });

diff --git a/src/components/forging/delegateStats.js b/src/components/forging/delegateStats.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { Card, CardText } from 'react-toolbox/lib/card';
 import CircularProgressbar from 'react-circular-progressbar';
 import grid from 'flexboxgrid/dist/flexboxgrid.css';
+import { translate } from 'react-i18next';
 import style from './forging.css';
 
 const identity = x => (x);
@@ -34,7 +35,7 @@ const DelegateStats = props => (
           <CardText>
             <div className={grid['col-xs-12']}>
               <div className={`${grid.row}  ${grid['between-xs']}`}>
-                <div className={style.circularProgressTitle}> {cardItem.label} </div>
+                <div className={style.circularProgressTitle}> {props.t(cardItem.label)} </div>
                 <CircularProgressbar
                   percentage={cardItem.percentageTransform(props.delegate[cardItem.key])}
                   textForPercentage={
@@ -48,4 +49,4 @@ const DelegateStats = props => (
   </div>
 );
 
-export default DelegateStats;
+export default translate()(DelegateStats);
diff --git a/src/components/forging/delegateStats.test.js b/src/components/forging/delegateStats.test.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import { expect } from 'chai';
 import { mount } from 'enzyme';
+import { I18nextProvider } from 'react-i18next';
+import i18n from '../../i18n';
 import DelegateStats from './delegateStats';
 
 
@@ -14,7 +16,9 @@ describe('DelegateStats', () => {
   let wrapper;
 
   beforeEach(() => {
-    wrapper = mount(<DelegateStats delegate={delegate} />);
+    wrapper = mount(<I18nextProvider i18n={ i18n }>
+        <DelegateStats delegate={delegate} />
+      </I18nextProvider>);
   });
 
   it('should render 3 Card components', () => {

diff --git a/src/components/forging/forgedBlocks.js b/src/components/forging/forgedBlocks.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Card, CardTitle } from 'react-toolbox/lib/card';
 import { Table, TableHead, TableRow, TableCell } from 'react-toolbox/lib/table';
+import { translate } from 'react-i18next';
 import grid from 'flexboxgrid/dist/flexboxgrid.css';
 import { TooltipTime } from '../timestamp';
 import LiskAmount from '../liskAmount';
@@ -17,11 +18,11 @@ const ForgedBlocks = props => (
       <div className={style.forgedBlocksTableWrapper}>
         <Table selectable={false}>
           <TableHead>
-            <TableCell>Block height</TableCell>
-            <TableCell>Block Id</TableCell>
-            <TableCell>Timestamp</TableCell>
-            <TableCell>Total fee</TableCell>
-            <TableCell>Reward</TableCell>
+            <TableCell>{props.t('Block height')}</TableCell>
+            <TableCell>{props.t('Block Id')}</TableCell>
+            <TableCell>{props.t('Timestamp')}</TableCell>
+            <TableCell>{props.t('Total fee')}</TableCell>
+            <TableCell>{props.t('Reward')}</TableCell>
           </TableHead>
           {props.forgedBlocks.map((block, idx) => (
             <TableRow key={idx}>
@@ -34,9 +35,9 @@ const ForgedBlocks = props => (
           ))}
         </Table>
       </div> :
-      <p className='hasPaddingRow empty-message'>You have not forged any blocks yet.</p>
+      <p className='hasPaddingRow empty-message'>{props.t('You have not forged any blocks yet')}.</p>
     }
   </Card>
 );
 
-export default ForgedBlocks;
+export default translate()(ForgedBlocks);
diff --git a/src/components/forging/forgedBlocks.test.js b/src/components/forging/forgedBlocks.test.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import { expect } from 'chai';
 import { mount } from 'enzyme';
+import { I18nextProvider } from 'react-i18next';
+import i18n from '../../i18n';
 import ForgedBlocks from './forgedBlocks';
 
 
@@ -32,7 +34,9 @@ describe('ForgedBlocks', () => {
   let wrapper;
 
   beforeEach(() => {
-    wrapper = mount(<ForgedBlocks forgedBlocks={forgedBlocks} />);
+    wrapper = mount(<I18nextProvider i18n={ i18n }>
+        <ForgedBlocks forgedBlocks={forgedBlocks} />
+      </I18nextProvider>);
   });
 
   it('should render 1 Table component', () => {

diff --git a/src/components/forging/forging.test.js b/src/components/forging/forging.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';
 import Forging from './forging';
 
 describe('Forging', () => {
@@ -26,7 +28,9 @@ describe('Forging', () => {
         isDelegate: true,
       };
 
-      wrapper = mount(<Forging {...props} account={account} />);
+      wrapper = mount(<I18nextProvider i18n={ i18n }>
+          <Forging {...props} account={account} />
+        </I18nextProvider>);
     });
 
     it('should render ForgingTitle', () => {

diff --git a/src/components/forging/forgingStats.js b/src/components/forging/forgingStats.js
@@ -1,54 +1,54 @@
 import React from 'react';
 import { Card, CardText } from 'react-toolbox/lib/card';
 import moment from 'moment';
+import { translate } from 'react-i18next';
 import grid from 'flexboxgrid/dist/flexboxgrid.css';
 import LiskAmount from '../liskAmount';
 import style from './forging.css';
 
 const statCardObjects = [
   {
     key: 'last24h',
-    label: 'Last 24 hours',
-    startMoment: moment().subtract(1, 'days'),
+    days: 1,
   }, {
     key: 'last7d',
-    label: 'Last 7 days',
-    startMoment: moment().subtract(7, 'days'),
+    days: 7,
   }, {
     key: 'last30d',
-    label: 'Last 30 days',
-    startMoment: moment().subtract(30, 'days'),
+    days: 30,
   }, {
     key: 'last365d',
-    label: 'Last 365 days',
-    startMoment: moment().subtract(365, 'days'),
+    days: 365,
   },
 ];
 
-
 class ForgingStats extends React.Component {
-
   componentDidMount() {
-    statCardObjects.map(obj => this.props.loadStats(obj.key, obj.startMoment));
+    statCardObjects.map(obj => this.props.loadStats(obj.key, moment().subtract(obj.days, 'days')));
   }
 
   render() {
+    statCardObjects[0].label = this.props.t('Last 24 hours');
+    [1, 2, 3].forEach((i) => {
+      statCardObjects[i].label = this.props.t(
+        'Last x days', { day: statCardObjects[i].days });
+    });
+
     return (
       <div className={`${grid.row} ${grid['between-xs']}`}>
         {statCardObjects.map(cardObj => (
           <div className={`${grid['col-xs-12']} ${grid['col-sm-3']}`} key={cardObj.key}>
             <Card className={style.grayCard}>
               <CardText>
-              <div className={grid['col-xs-12']}>
-                <div className={`${grid.row}  ${grid['between-xs']}`}>
-                  <span className='title'> {cardObj.label} </span>
-                  <span>
-                    <LiskAmount val={this.props.statistics[cardObj.key]}
-                      roundTo={2}
-                      /> LSK
-                  </span>
+                <div className={grid['col-xs-12']}>
+                  <div className={`${grid.row}  ${grid['between-xs']}`}>
+                    <span className='title'> {cardObj.label} </span>
+                    <span>
+                      <LiskAmount val={this.props.statistics[cardObj.key]}
+                        roundTo={2} /> LSK
+                    </span>
+                  </div>
                 </div>
-              </div>
               </CardText>
             </Card>
           </div>
@@ -58,4 +58,4 @@ class ForgingStats extends React.Component {
   }
 }
 
-export default ForgingStats;
+export default translate()(ForgingStats);
diff --git a/src/components/forging/forgingStats.test.js b/src/components/forging/forgingStats.test.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import { expect } from 'chai';
 import { mount } from 'enzyme';
+import { I18nextProvider } from 'react-i18next';
+import i18n from '../../i18n';
 import ForgingStats from './forgingStats';
 
 
@@ -23,10 +25,12 @@ describe('ForgingStats', () => {
   let wrapper;
 
   beforeEach(() => {
-    wrapper = mount(<ForgingStats
-      account={account}
-      statistics={statistics}
-      loadStats={loadStats} />);
+    wrapper = mount(<I18nextProvider i18n={ i18n }>
+      <ForgingStats
+        account={account}
+        statistics={statistics}
+        loadStats={loadStats} />
+    </I18nextProvider>);
   });
 
   it('should render 4 Card components', () => {
@@ -38,14 +42,14 @@ describe('ForgingStats', () => {
   });
 
   it('should render Card component for Last 7 days', () => {
-    expect(wrapper.find('Card').at(1).text().trim()).to.equal('Last 7 days 32.13 LSK');
+    expect(wrapper.find('Card').at(1).text().trim()).to.equal('Last x days 32.13 LSK');
   });
 
   it('should render Card component for Last 30 days', () => {
-    expect(wrapper.find('Card').at(2).text().trim()).to.equal('Last 30 days 3,213.18 LSK');
+    expect(wrapper.find('Card').at(2).text().trim()).to.equal('Last x days 3,213.18 LSK');
   });
 
   it('should render Card component for Last 365 days', () => {
-    expect(wrapper.find('Card').at(3).text().trim()).to.equal('Last 365 days 321,317.91 LSK');
+    expect(wrapper.find('Card').at(3).text().trim()).to.equal('Last x days 321,317.91 LSK');
   });
 });
diff --git a/src/components/forging/forgingTitle.js b/src/components/forging/forgingTitle.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Card, CardText } from 'react-toolbox/lib/card';
 import moment from 'moment';
+import { translate } from 'react-i18next';
 import grid from 'flexboxgrid/dist/flexboxgrid.css';
 import LiskAmount from '../liskAmount';
 import style from './forging.css';
@@ -21,7 +22,7 @@ class ForgingTitle extends React.Component {
               {this.props.account.delegate.username}
             </h2>
             <span>
-              <LiskAmount val={this.props.statistics.total} roundTo={2} /> LSK Earned
+              <LiskAmount val={this.props.statistics.total} roundTo={2} /> {this.props.t('LSK Earned')}
             </span>
           </div>
         </CardText>
@@ -30,4 +31,4 @@ class ForgingTitle extends React.Component {
   }
 }
 
-export default ForgingTitle;
+export default translate()(ForgingTitle);