From 606d6297a8ace3e2e93b3ecb80e989a0a3a3c99c Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 2 Jun 2022 20:59:34 -0500
Subject: [PATCH] TimelineQueueButtonHeader: use shortNumberFormat

---
 .../components/__tests__/timeline_queue_button_header.test.js | 4 ++--
 app/soapbox/components/timeline_queue_button_header.tsx       | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/components/__tests__/timeline_queue_button_header.test.js b/app/soapbox/components/__tests__/timeline_queue_button_header.test.js
index 155179551..bc011d309 100644
--- a/app/soapbox/components/__tests__/timeline_queue_button_header.test.js
+++ b/app/soapbox/components/__tests__/timeline_queue_button_header.test.js
@@ -33,7 +33,7 @@ describe('<TimelineQueueButtonHeader />', () => {
       undefined,
       { timelines: fromJS({ home: { totalQueuedItemsCount: 1 } }) },
     );
-    expect(screen.getByText('Click to see 1 new post', { hidden: true })).toBeInTheDocument();
+    expect(screen.getByText(/Click to see\s+1\s+new post/, { hidden: true })).toBeInTheDocument();
 
     render(
       <TimelineQueueButtonHeader
@@ -45,6 +45,6 @@ describe('<TimelineQueueButtonHeader />', () => {
       undefined,
       { timelines: fromJS({ home: { totalQueuedItemsCount: 9999999 } }) },
     );
-    expect(screen.getByText('Click to see 9999999 new posts', { hidden: true })).toBeInTheDocument();
+    expect(screen.getByText(/10.*M/, { hidden: true })).toBeInTheDocument();
   });
 });
diff --git a/app/soapbox/components/timeline_queue_button_header.tsx b/app/soapbox/components/timeline_queue_button_header.tsx
index 122841a0c..292368571 100644
--- a/app/soapbox/components/timeline_queue_button_header.tsx
+++ b/app/soapbox/components/timeline_queue_button_header.tsx
@@ -6,6 +6,7 @@ import { useIntl, MessageDescriptor } from 'react-intl';
 import Icon from 'soapbox/components/icon';
 import { Text } from 'soapbox/components/ui';
 import { useAppSelector, useSettings } from 'soapbox/hooks';
+import { shortNumberFormat } from 'soapbox/utils/numbers';
 
 interface ITimelineQueueButtonHeader {
   onClick: () => void,
@@ -73,7 +74,7 @@ const TimelineQueueButtonHeader: React.FC<ITimelineQueueButtonHeader> = ({
 
         {(count > 0) && (
           <Text theme='inherit' size='sm'>
-            {intl.formatMessage(message, { count })}
+            {intl.formatMessage(message, { count: shortNumberFormat(count) })}
           </Text>
         )}
       </a>