From 81fa77b8a5c5fa3c0cf72b71734c74ed9c7ad476 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 7 Jun 2020 11:25:48 -0500
Subject: [PATCH] TimelineQueueButtonHeader: Make more i18n friendly

---
 app/soapbox/components/status_list.js         | 13 ++++++++++--
 .../timeline_queue_button_header.js           | 21 +++++++------------
 app/soapbox/features/notifications/index.js   |  7 ++++++-
 3 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/app/soapbox/components/status_list.js b/app/soapbox/components/status_list.js
index 455596e93..a21884810 100644
--- a/app/soapbox/components/status_list.js
+++ b/app/soapbox/components/status_list.js
@@ -1,6 +1,6 @@
 import { debounce } from 'lodash';
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, defineMessages } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import StatusContainer from '../containers/status_container';
@@ -9,6 +9,10 @@ import LoadGap from './load_gap';
 import ScrollableList from './scrollable_list';
 import TimelineQueueButtonHeader from './timeline_queue_button_header';
 
+const messages = defineMessages({
+  queue: { id: 'status_list.queue_label', defaultMessage: 'Click to see {count} new {count, plural, one {post} other {posts}}' },
+});
+
 export default class StatusList extends ImmutablePureComponent {
 
   static propTypes = {
@@ -138,7 +142,12 @@ export default class StatusList extends ImmutablePureComponent {
     }
 
     return [
-      <TimelineQueueButtonHeader key='timeline-queue-button-header' onClick={this.handleDequeueTimeline} count={totalQueuedItemsCount} itemType='post' />,
+      <TimelineQueueButtonHeader
+        key='timeline-queue-button-header'
+        onClick={this.handleDequeueTimeline}
+        count={totalQueuedItemsCount}
+        message={messages.queue}
+      />,
       <ScrollableList key='scrollable-list' {...other} isLoading={isLoading} showLoading={isLoading && statusIds.size === 0} onLoadMore={onLoadMore && this.handleLoadOlder} ref={this.setRef}>
         {scrollableContent}
       </ScrollableList>,
diff --git a/app/soapbox/components/timeline_queue_button_header.js b/app/soapbox/components/timeline_queue_button_header.js
index d0f29862c..bdefda10e 100644
--- a/app/soapbox/components/timeline_queue_button_header.js
+++ b/app/soapbox/components/timeline_queue_button_header.js
@@ -1,24 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import { shortNumberFormat } from '../utils/numbers';
+import { injectIntl } from 'react-intl';
 import classNames from 'classnames';
 
-export default class TimelineQueueButtonHeader extends React.PureComponent {
+export default @injectIntl
+class TimelineQueueButtonHeader extends React.PureComponent {
 
   static propTypes = {
     onClick: PropTypes.func.isRequired,
     count: PropTypes.number,
-    itemType: PropTypes.string,
+    message: PropTypes.object.isRequired,
+    intl: PropTypes.object.isRequired,
   };
 
   static defaultProps = {
     count: 0,
-    itemType: 'item',
   };
 
   render() {
-    const { count, itemType, onClick } = this.props;
+    const { count, message, onClick, intl } = this.props;
 
     const classes = classNames('timeline-queue-header', {
       'hidden': (count <= 0),
@@ -27,14 +27,7 @@ export default class TimelineQueueButtonHeader extends React.PureComponent {
     return (
       <div className={classes}>
         <a className='timeline-queue-header__btn' onClick={onClick}>
-          {(count > 0) && <FormattedMessage
-            id='timeline_queue.label'
-            defaultMessage='Click to see {count} new {type}'
-            values={{
-              count: shortNumberFormat(count),
-              type: count === 1 ? itemType : `${itemType}s`,
-            }}
-          />}
+          {(count > 0) && intl.formatMessage(message, { count })}
         </a>
       </div>
     );
diff --git a/app/soapbox/features/notifications/index.js b/app/soapbox/features/notifications/index.js
index 34fe4a700..88a980369 100644
--- a/app/soapbox/features/notifications/index.js
+++ b/app/soapbox/features/notifications/index.js
@@ -23,6 +23,7 @@ import { getSettings } from 'soapbox/actions/settings';
 
 const messages = defineMessages({
   title: { id: 'column.notifications', defaultMessage: 'Notifications' },
+  queue: { id: 'notifications.queue_label', defaultMessage: 'Click to see {count} new {count, plural, one {notification} other {notifications}}' },
 });
 
 const getNotifications = createSelector([
@@ -182,7 +183,11 @@ class Notifications extends React.PureComponent {
           <ColumnSettingsContainer />
         </ColumnHeader>
         {filterBarContainer}
-        <TimelineQueueButtonHeader onClick={this.handleDequeueNotifications} count={totalQueuedNotificationsCount} itemType='notification' />
+        <TimelineQueueButtonHeader
+          onClick={this.handleDequeueNotifications}
+          count={totalQueuedNotificationsCount}
+          message={messages.queue}
+        />
         {scrollContainer}
       </Column>
     );