Repository: busyorg/busy
Pull request #666 (2017-08-28 15:00:46)

Remove numeral in favour of react-intl
https://trello.com/c/NZAgv8iL/167-use-react-intl-instead-of-numeral


Patch:
diff --git a/package.json b/package.json
index af40204d..00b54e88 100644
--- a/package.json
+++ b/package.json
@@ -81,7 +81,6 @@
     "newrelic": "^1.40.0",
     "nodemon": "^1.9.2",
     "npm-run-all": "^4.0.2",
-    "numeral": "^1.5.3",
     "postcss-flexbugs-fixes": "^3.0.0",
     "postcss-loader": "^2.0.5",
     "prop-types": "^15.5.10",
diff --git a/src/components/Comments/Comment.js b/src/components/Comments/Comment.js
index 0b9faae6..1bf8c3b6 100644
--- a/src/components/Comments/Comment.js
+++ b/src/components/Comments/Comment.js
@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import numeral from 'numeral';
 import { take, find } from 'lodash';
 import { Link } from 'react-router-dom';
-import { injectIntl, FormattedRelative, FormattedDate, FormattedTime, FormattedMessage } from 'react-intl';
+import { injectIntl, FormattedRelative, FormattedDate, FormattedTime, FormattedNumber, FormattedMessage } from 'react-intl';
 import { Icon, Tag, Tooltip } from 'antd';
 import { formatter } from 'steem';
 import { getUpvotes, getDownvotes } from '../../helpers/voteHelpers';
@@ -12,6 +11,7 @@ import { sortComments, sortVotes } from '../../helpers/sortHelpers';
 import { calculatePayout } from '../../vendor/steemitHelpers';
 import ReactionsModal from '../Reactions/ReactionsModal';
 import CommentForm from './CommentForm';
+import USDDisplay from '../Utils/USDDisplay';
 import PayoutDetail from '../PayoutDetail';
 import Avatar from '../Avatar';
 import Body from '../Story/Body';
@@ -141,33 +141,22 @@ class Comment extends React.Component {
 
     const payout = calculatePayout(comment);
 
-    let payoutValue = '';
-
-    if (payout.cashoutInTime) {
-      payoutValue = numeral(payout.potentialPayout).format('$0,0.00');
-    } else {
-      payoutValue = numeral(payout.pastPayouts).format('$0,0.00');
-    }
-
     const upVotes = getUpvotes(comment.active_votes).sort(sortVotes);
     const downVotes = getDownvotes(comment.active_votes).sort(sortVotes).reverse();
 
-    const likesValue = numeral(upVotes.length).format(
-      '0,0',
-    );
-    const dislikesValue = numeral(downVotes.length).format(
-      '0,0',
-    );
-
     const upVotesPreview = take(upVotes, 10)
       .map(vote => <p key={vote.voter}>{vote.voter}</p>);
     const upVotesDiff = upVotes.length - upVotesPreview.length;
-    const upVotesMore = (upVotesDiff > 0) ? `and ${numeral(upVotesDiff).format('0,0')} more` : null;
+    const upVotesMore = upVotesDiff > 0 &&
+      intl.formatMessage({ id: 'and_more_amount', defaultMessage: 'and {amount} more' },
+        { amount: upVotesDiff });
 
     const downVotesPreview = take(downVotes, 10)
       .map(vote => <p key={vote.voter}>{vote.voter}</p>);
     const downVotesDiff = downVotes.length - downVotesPreview.length;
-    const downVotesMore = (upVotesDiff > 0) ? `and ${numeral(downVotesDiff).format('0,0')} more` : null;
+    const downVotesMore = downVotesDiff > 0 &&
+      intl.formatMessage({ id: 'and_more_amount', defaultMessage: 'and {amount} more' },
+        { amount: downVotesDiff });
 
     const userVote = find(comment.active_votes, { voter: username });
 
@@ -249,7 +238,8 @@ class Comment extends React.Component {
                   </div>
                 }
               >
-                {likesValue}
+                <FormattedNumber value={upVotes.length} />
+                <span />
               </Tooltip>
             </span>
             <Tooltip title={intl.formatMessage({ id: 'dislike', defaultMessage: 'Dislike' })}>
@@ -279,13 +269,17 @@ class Comment extends React.Component {
                   </div>
                 }
               >
-                {dislikesValue}
+                <FormattedNumber value={downVotes.length} />
+                <span />
               </Tooltip>
             </span>
             <span className="Comment__footer__bullet" />
             <span className="Comment__footer__payout">
               <Tooltip title={<PayoutDetail post={comment} />}>
-                {payoutValue}
+                <USDDisplay
+                  value={payout.cashoutInTime ? payout.potentialPayout : payout.pastPayouts}
+                />
+                <span />
               </Tooltip>
             </span>
             {authenticated &&
diff --git a/src/components/Navigation/Notifications/NotificationTransfer.js b/src/components/Navigation/Notifications/NotificationTransfer.js
index 0dd40d9d..0c7de2cd 100644
--- a/src/components/Navigation/Notifications/NotificationTransfer.js
+++ b/src/components/Navigation/Notifications/NotificationTransfer.js
@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import numeral from 'numeral';
-import { FormattedRelative } from 'react-intl';
+import { FormattedRelative, FormattedNumber } from 'react-intl';
 import { Link } from 'react-router-dom';
 import Avatar from '../../Avatar';
 import './Notification.less';
@@ -19,7 +18,8 @@ const NotificationTransfer = ({ onClick, id, read, date, payload }) =>
     <div className="Notification__text">
       <div className="Notification__text__message">
         <Link to={`/${payload.user}`}>{payload.user}</Link> sent you{' '}
-        {numeral(payload.amount).format('0,0.000')} STEEM.
+        <FormattedNumber value={payload.amount} />
+        STEEM.
       </div>
       <div className="Notification__text__date">
         <FormattedRelative value={date} />
diff --git a/src/components/PayoutDetail.js b/src/components/PayoutDetail.js
index 251c3da6..83ad37bd 100644
--- a/src/components/PayoutDetail.js
+++ b/src/components/PayoutDetail.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, FormattedMessage } from 'react-intl';
 import _ from 'lodash';
-import numeral from 'numeral';
+import USDDisplay from './Utils/USDDisplay';
 import { calculatePayout } from '../vendor/steemitHelpers';
 
 const AmountWithLabel = ({ id, defaultMessage, nonzero, amount }) =>
@@ -11,7 +11,7 @@ const AmountWithLabel = ({ id, defaultMessage, nonzero, amount }) =>
       id={id}
       defaultMessage={defaultMessage}
       values={{
-        amount: numeral(amount).format('$0,0.00'),
+        amount: <USDDisplay value={amount} />,
       }}
     />
   </div>;
diff --git a/src/components/Reactions/ReactionsModal.js b/src/components/Reactions/ReactionsModal.js
index 027e8019..bf10aec3 100644
--- a/src/components/Reactions/ReactionsModal.js
+++ b/src/components/Reactions/ReactionsModal.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { PropTypes } from 'prop-types';
-import numeral from 'numeral';
+import { FormattedNumber } from 'react-intl';
 import { Tabs, Modal } from 'antd';
 import ReactionsList from './ReactionsList';
 
@@ -27,13 +27,6 @@ class ReactionsModal extends React.Component {
   render() {
     const { upVotes, downVotes } = this.props;
 
-    const likesValue = numeral(upVotes.length).format(
-      '0,0',
-    );
-    const dislikesValue = numeral(downVotes.length).format(
-      '0,0',
-    );
-
     const tabs = [];
 
     if (upVotes.length > 0) {
@@ -41,7 +34,9 @@ class ReactionsModal extends React.Component {
         tab={
           <span>
             <i className="iconfont icon-praise_fill" />
-            <span className="StoryFooter__icon-text">{likesValue}</span>
+            <span className="StoryFooter__icon-text">
+              <FormattedNumber value={upVotes.length} />
+            </span>
           </span>
         }
         key="1"
@@ -55,7 +50,9 @@ class ReactionsModal extends React.Component {
         tab={
           <span>
             <i className="iconfont icon-praise_fill StoryFooter__dislike" />
-            <span className="StoryFooter__icon-text StoryFooter__icon-text-dislike">{dislikesValue}</span>
+            <span className="StoryFooter__icon-text StoryFooter__icon-text-dislike">
+              <FormattedNumber value={downVotes.length} />
+            </span>
           </span>
         }
         key="2"
diff --git a/src/components/Story/StoryFooter.js b/src/components/Story/StoryFooter.js
index 38939610..531213b4 100644
--- a/src/components/Story/StoryFooter.js
+++ b/src/components/Story/StoryFooter.js
@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, FormattedMessage } from 'react-intl';
+import { injectIntl, FormattedMessage, FormattedNumber } from 'react-intl';
 import { Link } from 'react-router-dom';
-import numeral from 'numeral';
 import { take } from 'lodash';
 import { Icon, Tooltip, Modal } from 'antd';
 import classNames from 'classnames';
@@ -10,6 +9,7 @@ import { sortVotes } from '../../helpers/sortHelpers';
 import { getUpvotes, getDownvotes } from '../../helpers/voteHelpers';
 import { calculatePayout } from '../../vendor/steemitHelpers';
 import ReactionsModal from '../Reactions/ReactionsModal';
+import USDDisplay from '../Utils/USDDisplay';
 import PayoutDetail from '../PayoutDetail';
 import './StoryFooter.less';
 
@@ -81,27 +81,16 @@ class StoryFooter extends React.Component {
 
     const payout = calculatePayout(post);
 
-    let payoutValue = '';
-
-    if (payout.cashoutInTime) {
-      payoutValue = numeral(payout.potentialPayout).format('$0,0.00');
-    } else {
-      payoutValue = numeral(payout.pastPayouts).format('$0,0.00');
-    }
-
     const upVotes = getUpvotes(post.active_votes).sort(sortVotes);
     const downVotes = getDownvotes(post.active_votes).sort(sortVotes).reverse();
 
-    const likesValue = numeral(upVotes.length).format(
-      '0,0',
-    );
-
     const upVotesPreview = take(upVotes.sort(sortVotes), 10)
       .map(vote => <p key={vote.voter}>{vote.voter}</p>);
     const upVotesDiff = upVotes.length - upVotesPreview.length;
-    const upVotesMore = (upVotesDiff > 0) ? `and ${numeral(upVotesDiff).format('0,0')} more` : null;
+    const upVotesMore = upVotesDiff > 0 &&
+      intl.formatMessage({ id: 'and_more_amount', defaultMessage: 'and {amount} more' },
+        { amount: upVotesDiff });
 
-    const commentsValue = numeral(post.children).format('0,0');
     const likeClass = classNames({ active: postState.isLiked, StoryFooter__link: true });
     const rebloggedClass = classNames({ active: postState.isReblogged, StoryFooter__link: true });
 
@@ -114,7 +103,9 @@ class StoryFooter extends React.Component {
                 'StoryFooter__payout--rejected': payout.isPayoutDeclined,
               })}
             >
-              {payoutValue}
+              <USDDisplay
+                value={payout.cashoutInTime ? payout.potentialPayout : payout.pastPayouts}
+              />
             </span>
           </Tooltip>
           {post.percent_steem_dollars === 0 &&
@@ -143,7 +134,8 @@ class StoryFooter extends React.Component {
               </div>
             }
           >
-            {likesValue}
+            <FormattedNumber value={upVotes.length} />
+            <span />
           </Tooltip>
         </span>
         <Tooltip title={intl.formatMessage({ id: 'comment', defaultMessage: 'Comment' })}>
@@ -158,7 +150,7 @@ class StoryFooter extends React.Component {
           </Link>
         </Tooltip>
         <span className="StoryFooter__number">
-          {commentsValue}
+          <FormattedNumber value={post.children} />
         </span>
         {post.parent_author === '' && <Tooltip
           title={intl.formatMessage({
diff --git a/src/components/UserMenu.js b/src/components/UserMenu.js
index aa1841e6..e801e42e 100644
--- a/src/components/UserMenu.js
+++ b/src/components/UserMenu.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import numeral from 'numeral';
+import { FormattedMessage, FormattedNumber } from 'react-intl';
 import { Menu } from 'antd';
 import './UserMenu.less';
 
@@ -41,9 +40,6 @@ class UserMenu extends React.Component {
   };
 
   render() {
-    const followersValue = numeral(this.props.followers).format('0,0');
-    const followingValue = numeral(this.props.following).format('0,0');
-
     return (
       <div className="UserMenu">
         <div className="container topnav-layout">
@@ -62,11 +58,15 @@ class UserMenu extends React.Component {
             </Menu.Item>
             <Menu.Item key="followers" className="UserMenu__item">
               <FormattedMessage id="followers" defaultMessage="Followers" />
-              <span className="UserMenu__badge">{followersValue}</span>
+              <span className="UserMenu__badge">
+                <FormattedNumber value={this.props.followers} />
+              </span>
             </Menu.Item>
             <Menu.Item key="followed" className="UserMenu__item">
               <FormattedMessage id="following" defaultMessage="Following" />
-              <span className="UserMenu__badge">{followingValue}</span>
+              <span className="UserMenu__badge">
+                <FormattedNumber value={this.props.following} />
+              </span>
             </Menu.Item>
           </Menu>
         </div>
diff --git a/src/components/Utils/USDDisplay.js b/src/components/Utils/USDDisplay.js
new file mode 100644
index 00000000..e9553727
--- /dev/null
+++ b/src/components/Utils/USDDisplay.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedNumber } from 'react-intl';
+
+// eslint-disable-next-line react/style-prop-object
+const USDDisplay = ({ value }) => <FormattedNumber value={value} style="currency" currency="USD" />;
+
+USDDisplay.propTypes = {
+  value: PropTypes.number,
+};
+
+USDDisplay.defaultProps = {
+  value: 0,
+};
+
+export default USDDisplay;
diff --git a/src/locales/en.json b/src/locales/en.json
index 9b748f10..27658148 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -35,6 +35,7 @@
   "remove_from_favorites":"Remove from favorites",
   "like":"Like",
   "dislike":"Dislike",
+  "and_more_amount": "and {amount} more",
   "comment":"Comment",
   "comment_placeholder":"Write a comment",
   "comment_collapsed":"Comment collapsed",
@@ -130,4 +131,4 @@
   "rank_dolphin":"Dolphin",
   "rank_orca":"Orca",
   "rank_whale":"Whale"
-}
\ No newline at end of file
+}
diff --git a/src/tags/Tag.js b/src/tags/Tag.js
index 28b9c6be..4d82486e 100644
--- a/src/tags/Tag.js
+++ b/src/tags/Tag.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import numeral from 'numeral';
+import { FormattedNumber } from 'react-intl';
 import { Link } from 'react-router-dom';
+import USDDisplay from '../components/Utils/USDDisplay';
 import FavoriteButton from '../components/FavoriteButton';
 
 const Tag = ({ tag, favorited, addCategoryFavorite, removeCategoryFavorite }) =>
@@ -24,8 +25,8 @@ const Tag = ({ tag, favorited, addCategoryFavorite, removeCategoryFavorite }) =>
         />
       </h1>
       <h2>
-        <i className="iconfont icon-activity" /> {numeral(tag.comments).format('0,0')}{' '}
-        <i className="iconfont icon-collection" /> {numeral(tag.total_payouts).format('$0,0')}
+        <i className="iconfont icon-activity" /> <FormattedNumber value={tag.comments} />{' '}
+        <i className="iconfont icon-collection" /> <USDDisplay value={tag.total_payouts} />
       </h2>
     </div>
   </div>);
diff --git a/src/user/UserTransfers.js b/src/user/UserTransfers.js
index af9652f6..d15bc11e 100644
--- a/src/user/UserTransfers.js
+++ b/src/user/UserTransfers.js
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { FormattedMessage } from 'react-intl';
-import numeral from 'numeral';
 import { formatter } from 'steem';
 import steemconnect from 'sc2-sdk';
 import { connect } from 'react-redux';
@@ -164,19 +163,19 @@ export default class UserTransfers extends React.Component {
               <li className="col-lg-3">
                 <h3>Steem</h3>
                 <h2>
-                  {numeral(account.balance).format('0,0.00')}
+                  {account.balance}
                 </h2>
               </li>
               <li className="col-lg-3">
                 <h3>Steem Power</h3>
                 <h2>
-                  {numeral(power).format('0,0.00')}
+                  {power}
                 </h2>
               </li>
               <li className="col-lg-3">
                 <h3>Steem Dollars</h3>
                 <h2>
-                  {numeral(account.sbd_balance).format('$0,0.00')}
+                  {account.sbd_balance}
                 </h2>
               </li>
               <li className="col-lg-3">
@@ -184,7 +183,7 @@ export default class UserTransfers extends React.Component {
                   <FormattedMessage id="estimated_value" defaultMessage="Total ≈" />
                 </h3>
                 <h2>
-                  {numeral(dollar).format('$0,0.00')}
+                  {dollar}
                 </h2>
               </li>
             </ul>
diff --git a/src/wallet/Transfer.js b/src/wallet/Transfer.js
index b8c18b52..867ac142 100644
--- a/src/wallet/Transfer.js
+++ b/src/wallet/Transfer.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
-import numeral from 'numeral';
 import Textarea from 'react-textarea-autosize';
 
 import { getAuthenticatedUser } from '../reducers';
@@ -108,9 +107,9 @@ export default class Transfer extends React.Component {
                 Balance{' '}
                 <a
                   role="presentation"
-                  onClick={() => this.setState({ amount: numeral(balance).format('0.000') })}
+                  onClick={() => this.setState({ amount: balance })}
                 >
-                  {numeral(balance).format('0,0.000')}
+                  {balance}
                 </a>
                 {` ${currency}`}
               </h4>


Test patch:
diff --git a/src/stories/__snapshots__/stories.test.js.snap b/src/stories/__snapshots__/stories.test.js.snap
index 55e5cbc2..362ae79c 100644
--- a/src/stories/__snapshots__/stories.test.js.snap
+++ b/src/stories/__snapshots__/stories.test.js.snap
@@ -1129,7 +1129,9 @@ exports[`Storyshots Profile UserMenu 1`] = `
           <span
             className="UserMenu__badge"
           >
-            0
+            <span>
+              0
+            </span>
           </span>
         </li>
         <li
@@ -1149,7 +1151,9 @@ exports[`Storyshots Profile UserMenu 1`] = `
           <span
             className="UserMenu__badge"
           >
-            244
+            <span>
+              244
+            </span>
           </span>
         </li>
       </ul>
@@ -2056,7 +2060,9 @@ exports[`Storyshots Story Full story 1`] = `
           onMouseLeave={[Function]}
           onTouchStart={undefined}
         >
-          $111.76
+          <span>
+            $111.76
+          </span>
         </span>
       </span>
       <a
@@ -2088,7 +2094,10 @@ exports[`Storyshots Story Full story 1`] = `
           onMouseLeave={[Function]}
           onTouchStart={undefined}
         >
-          133
+          <span>
+            133
+          </span>
+          <span />
         </span>
       </span>
       <a
@@ -2109,7 +2118,9 @@ exports[`Storyshots Story Full story 1`] = `
       <span
         className="StoryFooter__number"
       >
-        18
+        <span>
+          18
+        </span>
       </span>
       <a
         className="StoryFooter__link"
@@ -2313,7 +2324,9 @@ exports[`Storyshots Story Full story with embed 1`] = `
           onMouseLeave={[Function]}
           onTouchStart={undefined}
         >
-          $737.54
+          <span>
+            $737.54
+          </span>
         </span>
       </span>
       <a
@@ -2345,7 +2358,10 @@ exports[`Storyshots Story Full story with embed 1`] = `
           onMouseLeave={[Function]}
           onTouchStart={undefined}
         >
-          658
+          <span>
+            658
+          </span>
+          <span />
         </span>
       </span>
       <a
@@ -2366,7 +2382,9 @@ exports[`Storyshots Story Full story with embed 1`] = `
       <span
         className="StoryFooter__number"
       >
-        57
+        <span>
+          57
+        </span>
       </span>
       <a
         className="StoryFooter__link"
@@ -2525,7 +2543,9 @@ exports[`Storyshots Story Inline story 1`] = `
             onMouseLeave={[Function]}
             onTouchStart={undefined}
           >
-            $111.76
+            <span>
+              $111.76
+            </span>
           </span>
         </span>
         <a
@@ -2557,7 +2577,10 @@ exports[`Storyshots Story Inline story 1`] = `
             onMouseLeave={[Function]}
             onTouchStart={undefined}
           >
-            133
+            <span>
+              133
+            </span>
+            <span />
           </span>
         </span>
         <a
@@ -2578,7 +2601,9 @@ exports[`Storyshots Story Inline story 1`] = `
         <span
           className="StoryFooter__number"
         >
-          18
+          <span>
+            18
+          </span>
         </span>
         <a
           className="StoryFooter__link"
@@ -2747,7 +2772,9 @@ exports[`Storyshots Story Inline story with embed 1`] = `
             onMouseLeave={[Function]}
             onTouchStart={undefined}
           >
-            $737.54
+            <span>
+              $737.54
+            </span>
           </span>
         </span>
         <a
@@ -2779,7 +2806,10 @@ exports[`Storyshots Story Inline story with embed 1`] = `
             onMouseLeave={[Function]}
             onTouchStart={undefined}
           >
-            658
+            <span>
+              658
+            </span>
+            <span />
           </span>
         </span>
         <a
@@ -2800,7 +2830,9 @@ exports[`Storyshots Story Inline story with embed 1`] = `
         <span
           className="StoryFooter__number"
         >
-          57
+          <span>
+            57
+          </span>
         </span>
         <a
           className="StoryFooter__link"