TimelineQueueButtonHeader: Make more i18n friendly

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>
     );