fix: Use built-ins to format numbers

client/src/components/Supporters.js

@@ -2,7 +2,6 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Button, ProgressBar } from '@freecodecamp/react-bootstrap';
 
-import { commaNumber } from '../utils';
 import FullWidthRow from '../components/helpers/FullWidthRow';
 import Spacer from '../components/helpers/Spacer';
 
@@ -13,7 +12,11 @@ const propTypes = {
   isDonating: PropTypes.bool.isRequired
 };
 
+const supporterGoal = 10000;
+const supportersLocale = supporterGoal.toLocaleString();
+
 function Supporters({ isDonating, activeDonations }) {
+  const donationsLocale = activeDonations.toLocaleString();
   return (
     <Fragment>
       <FullWidthRow>
@@ -24,7 +27,7 @@ function Supporters({ isDonating, activeDonations }) {
           <ProgressBar max={10000} now={activeDonations} />
           <div id='progress-label-wrapper'>
             <span className='progress-label'>
-              {commaNumber(activeDonations)} supporters out of 10,000 supporter
+              {donationsLocale} supporters out of {supportersLocale} supporter
               goal
             </span>
           </div>
@@ -46,9 +49,7 @@ function Supporters({ isDonating, activeDonations }) {
                 them to join the community.
               </Fragment>
             ) : (
-              `Join ${commaNumber(
+              `Join ${donationsLocale} supporters. Your $5 / month donation will help ` +
-                activeDonations
-              )} supporters. Your $5 / month donation will help ` +
               'keep tech education free and open.'
             )}
           </p>

client/src/utils/index.js

@@ -20,26 +20,3 @@ export const getShortIdFromSlug = (slug = '') => {
   const [, maybeShortId = ''] = operableSlug.split('--');
   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}`;
-}

client/src/utils/utils.test.js

@@ -8,7 +8,7 @@ import {
   mockId
 } from '../__mocks__/news-article';
 
-import { getShortIdFromSlug, commaNumber } from './';
+import { getShortIdFromSlug } from './';
 
 describe('client/src utilities', () => {
   describe('getShortIdFromSlug', () => {
@@ -42,35 +42,4 @@ describe('client/src utilities', () => {
       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'
-      );
-    });
-
-  });
 });