fix(donate): extract active donors from selectors

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

@@ -1,7 +1,21 @@
-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() {
+import { activeDonationsSelector } from '../../../redux';
+
+const propTypes = {
+  activeDonations: PropTypes.number
+};
+
+const mapStateToProps = createSelector(
+  activeDonationsSelector,
+  activeDonations => ({ activeDonations })
+);
+
+const DonateText = ({ activeDonations }) => {
+  const donationsLocale = activeDonations.toLocaleString();
   return (
     <div className='text-center'>
       <p>
@@ -9,7 +23,7 @@ class DonateText extends Component {
         people learn to code for free.
       </p>
       <p>
-          Join <strong>4,180</strong> supporters.
+        Join <strong>{donationsLocale}</strong> supporters.
       </p>
       <p>
         Your $5 / month donation will help keep tech education free and
@@ -17,7 +31,9 @@ class DonateText extends Component {
       </p>
     </div>
   );
-  }
-}
+};
 
-export default DonateText;
+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>