Merge pull request #811 from LiskHQ/558-implement-localization-of-num…

…bers

Implement localization of numbers - Closes #558

src/components/formattedNumber/index.js

@@ -1,25 +1,14 @@
 import React from 'react';
+import numeral from 'numeral';
+import * as locales from 'numeral/locales'; // eslint-disable-line
+import { translate } from 'react-i18next';
+import i18n from '../../i18n';
 
-/**
- *
- * @param {*} num - it is a number that we want to format it as formatted number
- * @return {string} - formatted version of input number
- */
-const formatNumber = (num) => {
-  let normalizeNum = parseFloat(num);
-  const sign = normalizeNum < 0 ? '-' : '';
-  const absVal = String(parseInt(normalizeNum = Math.abs(Number(normalizeNum) || 0), 10));
-  let remaining = absVal.length;
-  remaining = (remaining) > 3 ? remaining % 3 : 0;
-  const intPart = sign + (remaining ? `${absVal.substr(0, remaining)},` : '') +
-     absVal.substr(remaining).replace(/(\d{3})(?=\d)/g, '$1,');
-  const floatPart = normalizeNum.toString().split('.')[1];
-  normalizeNum = floatPart ? `${intPart}.${floatPart || ''}` : intPart;
-  return normalizeNum;
-};
 const FormattedNumber = (props) => {
-  const formatedNumber = formatNumber(props.val);
+  // set numeral language
+  numeral.locale(i18n.language);
+  const formatedNumber = numeral(props.val).format('0,0.[0000000000000]');
   return <span>{formatedNumber}</span>;
 };
 
-export default FormattedNumber;
+export default translate()(FormattedNumber);

src/components/formattedNumber/index.test.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import { expect } from 'chai';
-import { shallow } from 'enzyme';
-import FormattedNumber from '../formattedNumber/index';
-
-
-describe('FormattedNumber', () => {
-  it('should normalize "12932689.645" as "12,932,689.645"', () => {
-    const inputValue = '12932689.645';
-    const expectedValue = '12,932,689.645';
-    const wrapper = shallow(<FormattedNumber val={inputValue} />);
-    expect(wrapper.find('span').text()).to.be.equal(expectedValue);
-  });
-
-  it('should normalize "2500" as "2,500"', () => {
-    const inputValue = '2500';
-    const expectedValue = '2,500';
-    const wrapper = shallow(<FormattedNumber val={inputValue} />);
-    expect(wrapper.find('span').text()).to.be.equal(expectedValue);
-  });
-
-  it('should normalize "-78945" as "-78,945"', () => {
-    const inputValue = '78945';
-    const expectedValue = '78,945';
-    const wrapper = shallow(<FormattedNumber val={inputValue} />);
-    expect(wrapper.find('span').text()).to.be.equal(expectedValue);
-  });
-
-  it('should normalize "0" as "0"', () => {
-    const inputValue = '0';
-    const expectedValue = '0';
-    const wrapper = shallow(<FormattedNumber val={inputValue} />);
-    expect(wrapper.find('span').text()).to.be.equal(expectedValue);
-  });
-
-  it('should normalize "500.12345678" as "500.12345678"', () => {
-    const inputValue = '500.12345678';
-    const expectedValue = '500.12345678';
-    const wrapper = shallow(<FormattedNumber val={inputValue} />);
-    expect(wrapper.find('span').text()).to.be.equal(expectedValue);
-  });
-});

src/components/liskAmount/index.test.js

@@ -1,21 +1,33 @@
 import React from 'react';
 import { expect } from 'chai';
 import { mount } from 'enzyme';
+import PropTypes from 'prop-types';
+import i18n from '../../i18n';
 import LiskAmount from './';
 
 describe('LiskAmount', () => {
   const normalizeNumber = 100000000;
   it('should normalize "12932689.645" as "12,932,689.645"', () => {
     const inputValue = '12932689.645' * normalizeNumber;
     const expectedValue = '12,932,689.645';
-    const wrapper = mount(<LiskAmount val={inputValue} />);
+    const wrapper = mount(<LiskAmount val={inputValue} />, {
+      context: { i18n },
+      childContextTypes: {
+        i18n: PropTypes.object.isRequired,
+      },
+    });
     expect(wrapper.text()).to.be.equal(expectedValue);
   });
 
   it('should round to props.roundTo decimal places', () => {
     const inputValue = '12932689.64321' * normalizeNumber;
     const expectedValue = '12,932,689.64';
-    const wrapper = mount(<LiskAmount val={inputValue} roundTo={2} />);
+    const wrapper = mount(<LiskAmount val={inputValue} roundTo={2} />, {
+      context: { i18n },
+      childContextTypes: {
+        i18n: PropTypes.object.isRequired,
+      },
+    });
     expect(wrapper.text()).to.be.equal(expectedValue);
   });
 });