From 49464ad4cc5bb56395b84b167aa6dc397b38d977 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Mon, 25 Apr 2022 11:08:32 -0400
Subject: [PATCH] Add support for formatting numbers in millions

---
 app/soapbox/utils/__tests__/numbers-test.js  | Bin 488 -> 0 bytes
 app/soapbox/utils/__tests__/numbers-test.tsx |  37 +++++++++++++++++++
 app/soapbox/utils/numbers.tsx                |   4 +-
 3 files changed, 40 insertions(+), 1 deletion(-)
 delete mode 100644 app/soapbox/utils/__tests__/numbers-test.js
 create mode 100644 app/soapbox/utils/__tests__/numbers-test.tsx

diff --git a/app/soapbox/utils/__tests__/numbers-test.js b/app/soapbox/utils/__tests__/numbers-test.js
deleted file mode 100644
index 86923a781f82cfc0c3e474918e80b2370a1b87c0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 488
zcma*j!3u&v6a~<|U-5P`17$OqPbF%Rv}hIe2bIq-bc}J7BK-H-6cQM-Klj4DMRlu<
zg(novR$ID|*=Eo~Zt4n{@6U8woyat7;dz!C%h|wj!6v{3ELZUK0O)?Bv*km;Boo57
z^_sXfEs4blQ*JDjv62ynj;&J_;amo&lEkfFNsOgJj3nY*#Q{ccxugqE)!|s~yX)>D
iH|aV3=JI3NjPBNLS$_Wc3tOF0UTDgk^e^h)zrO%mOqmA&

diff --git a/app/soapbox/utils/__tests__/numbers-test.tsx b/app/soapbox/utils/__tests__/numbers-test.tsx
new file mode 100644
index 0000000000..63c45b26b0
--- /dev/null
+++ b/app/soapbox/utils/__tests__/numbers-test.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { render, screen } from '../../jest/test-helpers';
+import { isIntegerId, shortNumberFormat } from '../numbers';
+
+test('isIntegerId()', () => {
+  expect(isIntegerId('0')).toBe(true);
+  expect(isIntegerId('1')).toBe(true);
+  expect(isIntegerId('508107650')).toBe(true);
+  expect(isIntegerId('-1764036199')).toBe(true);
+  expect(isIntegerId('106801667066418367')).toBe(true);
+  expect(isIntegerId('9v5bmRalQvjOy0ECcC')).toBe(false);
+  expect(isIntegerId(null)).toBe(false);
+  expect(isIntegerId(undefined)).toBe(false);
+});
+
+describe('shortNumberFormat', () => {
+  test('handles non-numbers', () => {
+    render(<div data-testid='num'>{shortNumberFormat('not-number')}</div>, null, null);
+    expect(screen.getByTestId('num')).toHaveTextContent('•');
+  });
+
+  test('formats numbers under 1,000', () => {
+    render(<div data-testid='num'>{shortNumberFormat(555)}</div>, null, null);
+    expect(screen.getByTestId('num')).toHaveTextContent('555');
+  });
+
+  test('formats numbers under 1,000,000', () => {
+    render(<div data-testid='num'>{shortNumberFormat(5555)}</div>, null, null);
+    expect(screen.getByTestId('num')).toHaveTextContent('5.6K');
+  });
+
+  test('formats numbers over 1,000,000', () => {
+    render(<div data-testid='num'>{shortNumberFormat(5555555)}</div>, null, null);
+    expect(screen.getByTestId('num')).toHaveTextContent('5.6M');
+  });
+});
diff --git a/app/soapbox/utils/numbers.tsx b/app/soapbox/utils/numbers.tsx
index 457b69f844..ba5e3cbe40 100644
--- a/app/soapbox/utils/numbers.tsx
+++ b/app/soapbox/utils/numbers.tsx
@@ -10,8 +10,10 @@ export const shortNumberFormat = (number: any): React.ReactNode => {
 
   if (number < 1000) {
     return <FormattedNumber value={number} />;
-  } else {
+  } else if (number < 1000000) {
     return <span><FormattedNumber value={number / 1000} maximumFractionDigits={1} />K</span>;
+  } else {
+    return <span><FormattedNumber value={number / 1000000} maximumFractionDigits={1} />M</span>;
   }
 };