feat: Comma separate active donations number

client/src/components/Supporters.js

@@ -2,6 +2,7 @@ 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 './supporters.css';
@@ -36,7 +37,9 @@ function Supporters({ isDonating, activeDonations }) {
               ? "Thanks for being a supporter! Do you know anyone who's " +
                 'interested in technology? Encourage them to join the ' +
                 '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.'}
           </p>
         </b>

client/src/utils/index.js

@@ -20,3 +20,26 @@ 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 } from './';
+import { getShortIdFromSlug, commaNumber } from './';
 
 describe('client/src utilities', () => {
   describe('getShortIdFromSlug', () => {
@@ -42,4 +42,35 @@ 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'
+      );
+    });
+
+  });
 });