fix(donate): extract active donors from selectors

client/src/components/Donation/components/DonateText.js

@@ -1,23 +1,39 @@
-import React, { Component } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
 
-class DonateText extends Component {
-  render() {
-    return (
-      <div className='text-center'>
-        <p>
-          freeCodeCamp.org is a tiny nonprofit that's helping millions of
-          people learn to code for free.
-        </p>
-        <p>
-          Join <strong>4,180</strong> supporters.
-        </p>
-        <p>
-          Your $5 / month donation will help keep tech education free and
-          open.
-        </p>
-      </div>
-    );
-  }
-}
+import { activeDonationsSelector } from '../../../redux';
 
-export default DonateText;
+const propTypes = {
+  activeDonations: PropTypes.number
+};
+
+const mapStateToProps = createSelector(
+  activeDonationsSelector,
+  activeDonations => ({ activeDonations })
+);
+
+const DonateText = ({ activeDonations }) => {
+  const donationsLocale = activeDonations.toLocaleString();
+  return (
+    <div className='text-center'>
+      <p>
+        freeCodeCamp.org is a tiny nonprofit that's helping millions of
+        people learn to code for free.
+      </p>
+      <p>
+        Join <strong>{donationsLocale}</strong> supporters.
+      </p>
+      <p>
+        Your $5 / month donation will help keep tech education free and
+        open.
+      </p>
+    </div>
+  );
+};
+
+DonateText.displayName = 'DonateText';
+DonateText.propTypes = propTypes;
+
+export default connect(mapStateToProps)(DonateText);

client/src/components/Supporters.js

@@ -62,8 +62,8 @@ function Supporters({ isDonating, activeDonations }) {
                 them to join the community.
               </Fragment>
             ) : (
-              `Join ${donationsLocale} supporters. Your $5 / month donation will help ` +
-              'keep tech education free and open.'
+              `Join ${donationsLocale} supporters. Your $5 / month` +
+              'donation will help keep tech education free and open.'
             )}
           </p>
         </b>