feat: Comma separate active donations number
This commit is contained in:
committed by
mrugesh mohapatra
parent
db4bb351d4
commit
4a9d22cee0
@ -2,6 +2,7 @@ import React, { Fragment } from 'react';
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { Button, ProgressBar } from '@freecodecamp/react-bootstrap';
|
import { Button, ProgressBar } from '@freecodecamp/react-bootstrap';
|
||||||
|
|
||||||
|
import { commaNumber } from '../utils';
|
||||||
import FullWidthRow from '../components/helpers/FullWidthRow';
|
import FullWidthRow from '../components/helpers/FullWidthRow';
|
||||||
|
|
||||||
import './supporters.css';
|
import './supporters.css';
|
||||||
@ -36,7 +37,9 @@ function Supporters({ isDonating, activeDonations }) {
|
|||||||
? "Thanks for being a supporter! Do you know anyone who's " +
|
? "Thanks for being a supporter! Do you know anyone who's " +
|
||||||
'interested in technology? Encourage them to join the ' +
|
'interested in technology? Encourage them to join the ' +
|
||||||
'community as well.'
|
'community as well.'
|
||||||
: 'Join 4,000 supporters. Your $5 / month donation will help ' +
|
: `Join ${commaNumber(
|
||||||
|
activeDonations
|
||||||
|
)} supporters. Your $5 / month donation will help ` +
|
||||||
'keep tech education free and open.'}
|
'keep tech education free and open.'}
|
||||||
</p>
|
</p>
|
||||||
</b>
|
</b>
|
||||||
|
@ -20,3 +20,26 @@ export const getShortIdFromSlug = (slug = '') => {
|
|||||||
const [, maybeShortId = ''] = operableSlug.split('--');
|
const [, maybeShortId = ''] = operableSlug.split('--');
|
||||||
return maybeShortId.replace(/\/*$/, '');
|
return maybeShortId.replace(/\/*$/, '');
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export function commaNumber(num) {
|
||||||
|
if (typeof num !== 'number') {
|
||||||
|
console.warn(
|
||||||
|
'Expected a Number to be passed to `commaNumber`, instead received %s',
|
||||||
|
typeof num
|
||||||
|
);
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
const stringNum = String(num).replace(/^-/, '');
|
||||||
|
const isNegative = num < 0;
|
||||||
|
const commaSpearated = stringNum
|
||||||
|
.split('')
|
||||||
|
.reverse()
|
||||||
|
.reduce((string, current, index, thisArray) => {
|
||||||
|
const withComma =
|
||||||
|
string.replace(/,/g, '').length % 3 === 0 &&
|
||||||
|
index !== 0 &&
|
||||||
|
index !== thisArray.length;
|
||||||
|
return `${withComma ? `${current},` : current}${string}`;
|
||||||
|
}, '');
|
||||||
|
return `${isNegative ? '-' : ''}${commaSpearated}`;
|
||||||
|
}
|
||||||
|
@ -8,7 +8,7 @@ import {
|
|||||||
mockId
|
mockId
|
||||||
} from '../__mocks__/news-article';
|
} from '../__mocks__/news-article';
|
||||||
|
|
||||||
import { getShortIdFromSlug } from './';
|
import { getShortIdFromSlug, commaNumber } from './';
|
||||||
|
|
||||||
describe('client/src utilities', () => {
|
describe('client/src utilities', () => {
|
||||||
describe('getShortIdFromSlug', () => {
|
describe('getShortIdFromSlug', () => {
|
||||||
@ -42,4 +42,35 @@ describe('client/src utilities', () => {
|
|||||||
expect(result).toEqual(mockId);
|
expect(result).toEqual(mockId);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('commaNumber', () => {
|
||||||
|
it('returns a string', () => {
|
||||||
|
expect(typeof commaNumber(1)).toEqual('string');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns a comma separated number, positive', () => {
|
||||||
|
expect.assertions(6);
|
||||||
|
expect(commaNumber(1000)).toEqual('1,000');
|
||||||
|
expect(commaNumber(10000)).toEqual('10,000');
|
||||||
|
expect(commaNumber(100000)).toEqual('100,000');
|
||||||
|
expect(commaNumber(1000000)).toEqual('1,000,000');
|
||||||
|
expect(commaNumber(1234567890)).toEqual('1,234,567,890');
|
||||||
|
expect(commaNumber(Number.MAX_SAFE_INTEGER)).toEqual(
|
||||||
|
'9,007,199,254,740,991'
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns a comma separated number, negative', () => {
|
||||||
|
expect.assertions(6);
|
||||||
|
expect(commaNumber(-1000)).toEqual('-1,000');
|
||||||
|
expect(commaNumber(-10000)).toEqual('-10,000');
|
||||||
|
expect(commaNumber(-100000)).toEqual('-100,000');
|
||||||
|
expect(commaNumber(-1000000)).toEqual('-1,000,000');
|
||||||
|
expect(commaNumber(-1234567890)).toEqual('-1,234,567,890');
|
||||||
|
expect(commaNumber(Number.MIN_SAFE_INTEGER)).toEqual(
|
||||||
|
'-9,007,199,254,740,991'
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
Reference in New Issue
Block a user