From 4a9d22cee0c0fb9c3aa2324fae0bc323ef7d5b20 Mon Sep 17 00:00:00 2001
From: Bouncey <staylor1012@gmail.com>
Date: Fri, 30 Nov 2018 11:36:38 +0000
Subject: [PATCH] feat: Comma separate active donations number

---
 client/src/components/Supporters.js |  5 ++++-
 client/src/utils/index.js           | 23 ++++++++++++++++++++
 client/src/utils/utils.test.js      | 33 ++++++++++++++++++++++++++++-
 3 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Supporters.js b/client/src/components/Supporters.js
index 0e82edae1c..f66f2d48c0 100644
--- a/client/src/components/Supporters.js
+++ b/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>
diff --git a/client/src/utils/index.js b/client/src/utils/index.js
index 84b6546c43..62fd627bfe 100644
--- a/client/src/utils/index.js
+++ 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}`;
+}
diff --git a/client/src/utils/utils.test.js b/client/src/utils/utils.test.js
index a63e70a792..6bf7dc80c6 100644
--- a/client/src/utils/utils.test.js
+++ b/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'
+      );
+    });
+
+  });
 });