Merge branch 'format-counts' into 'next'

Add support for formatting numbers in millions

See merge request soapbox-pub/soapbox-fe!1257

app/soapbox/utils/__tests__/numbers-test.js

@@ -1,13 +0,0 @@
-import { isIntegerId } 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);
-  expect(isIntegerId()).toBe(false);
-});

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');
+  });
+});

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