diff --git a/app/soapbox/features/account/components/header.tsx b/app/soapbox/features/account/components/header.tsx index 57b0c4084..3f4d239bf 100644 --- a/app/soapbox/features/account/components/header.tsx +++ b/app/soapbox/features/account/components/header.tsx @@ -17,10 +17,9 @@ import { initReport } from 'soapbox/actions/reports'; import { setSearchAccount } from 'soapbox/actions/search'; import { getSettings } from 'soapbox/actions/settings'; import snackbar from 'soapbox/actions/snackbar'; -import Avatar from 'soapbox/components/avatar'; import Badge from 'soapbox/components/badge'; import StillImage from 'soapbox/components/still_image'; -import { HStack, IconButton, Menu, MenuButton, MenuItem, MenuList, MenuLink, MenuDivider } from 'soapbox/components/ui'; +import { HStack, IconButton, Menu, MenuButton, MenuItem, MenuList, MenuLink, MenuDivider, Avatar } from 'soapbox/components/ui'; import SvgIcon from 'soapbox/components/ui/icon/svg-icon'; import MovedNote from 'soapbox/features/account_timeline/components/moved_note'; import ActionButton from 'soapbox/features/ui/components/action-button'; @@ -757,7 +756,8 @@ const Header: React.FC = ({ account }) => {
diff --git a/app/soapbox/utils/__tests__/numbers.test.tsx b/app/soapbox/utils/__tests__/numbers.test.tsx index a0edf41fe..39c33c2eb 100644 --- a/app/soapbox/utils/__tests__/numbers.test.tsx +++ b/app/soapbox/utils/__tests__/numbers.test.tsx @@ -27,11 +27,77 @@ describe('shortNumberFormat', () => { test('formats numbers under 1,000,000', () => { render(
{shortNumberFormat(5555)}
, undefined, null); - expect(screen.getByTestId('num')).toHaveTextContent('5.6K'); + expect(screen.getByTestId('num')).toHaveTextContent('5.55k'); }); test('formats numbers over 1,000,000', () => { render(
{shortNumberFormat(5555555)}
, undefined, null); - expect(screen.getByTestId('num')).toHaveTextContent('5.6M'); + expect(screen.getByTestId('num')).toHaveTextContent('5.55M'); + }); + + test('formats a multitude of numbers', () => { + let result = render(
{shortNumberFormat(0)}
, undefined, null); + expect(screen.getByTestId('num')).toHaveTextContent('0'); + result.unmount(); + + result = render(
{shortNumberFormat(1)}
); + expect(screen.getByTestId('num')).toHaveTextContent('1'); + result.unmount(); + + result = render(
{shortNumberFormat(999)}
, undefined, null); + expect(screen.getByTestId('num')).toHaveTextContent('999'); + result.unmount(); + + result = render(
{shortNumberFormat(1000)}
, undefined, null); + expect(screen.getByTestId('num')).toHaveTextContent('1k'); + result.unmount(); + + result = render(
{shortNumberFormat(1001)}
, undefined, null); + expect(screen.getByTestId('num')).toHaveTextContent('1k'); + result.unmount(); + + result = render(
{shortNumberFormat(1005)}
, undefined, null); + expect(screen.getByTestId('num')).toHaveTextContent('1k'); + result.unmount(); + + result = render(
{shortNumberFormat(1006)}
, undefined, null); + expect(screen.getByTestId('num')).toHaveTextContent('1k'); + result.unmount(); + + result = render(
{shortNumberFormat(1010)}
, undefined, null); + expect(screen.getByTestId('num')).toHaveTextContent('1.01k'); + result.unmount(); + + result = render(
{shortNumberFormat(1530)}
, undefined, null); + expect(screen.getByTestId('num')).toHaveTextContent('1.53k'); + result.unmount(); + + result = render(
{shortNumberFormat(10530)}
, undefined, null); + expect(screen.getByTestId('num')).toHaveTextContent('10.5k'); + result.unmount(); + + result = render(
{shortNumberFormat(999500)}
, undefined, null); + expect(screen.getByTestId('num')).toHaveTextContent('999k'); + result.unmount(); + + result = render(
{shortNumberFormat(999999)}
, undefined, null); + expect(screen.getByTestId('num')).toHaveTextContent('999k'); + result.unmount(); + + result = render(
{shortNumberFormat(999499)}
, undefined, null); + expect(screen.getByTestId('num')).toHaveTextContent('999k'); + result.unmount(); + + result = render(
{shortNumberFormat(1000000)}
, undefined, null); + expect(screen.getByTestId('num')).toHaveTextContent('1M'); + result.unmount(); + + result = render(
{shortNumberFormat(3905558)}
, undefined, null); + expect(screen.getByTestId('num')).toHaveTextContent('3.9M'); + result.unmount(); + + result = render(
{shortNumberFormat(1031511)}
, undefined, null); + expect(screen.getByTestId('num')).toHaveTextContent('1.03M'); + result.unmount(); }); }); diff --git a/app/soapbox/utils/numbers.tsx b/app/soapbox/utils/numbers.tsx index db04b30d2..a93169da2 100644 --- a/app/soapbox/utils/numbers.tsx +++ b/app/soapbox/utils/numbers.tsx @@ -4,17 +4,41 @@ import { FormattedNumber } from 'react-intl'; /** Check if a value is REALLY a number. */ export const isNumber = (value: unknown): value is number => typeof value === 'number' && !isNaN(value); +const roundDown = (num: number) => { + if (num >= 100 && num < 1000) { + num = Math.floor(num); + } + + const n = Number(num.toFixed(2)); + return (n > num) ? n - (1 / (Math.pow(10, 2))) : n; +}; + /** Display a number nicely for the UI, eg 1000 becomes 1K. */ export const shortNumberFormat = (number: any): React.ReactNode => { if (!isNumber(number)) return '•'; - if (number < 1000) { - return ; - } else if (number < 1000000) { - return K; - } else { - return M; + let value = number; + let factor: string = ''; + if (number >= 1000 && number < 1000000) { + factor = 'k'; + value = roundDown(value / 1000); + } else if (number >= 1000000) { + factor = 'M'; + value = roundDown(value / 1000000); } + + return ( + + + {factor} + + ); }; /** Check if an entity ID is an integer (eg not a FlakeId). */