From 66d628ff2fecac43186d4da177d3a2e69e5e706d Mon Sep 17 00:00:00 2001
From: Mrugesh Mohapatra <me@raisedadead.com>
Date: Thu, 7 Feb 2019 21:59:01 +0530
Subject: [PATCH] fix(donate): extract active donors from selectors

---
 .../Donation/components/DonateText.js         | 58 ++++++++++++-------
 client/src/components/Supporters.js           |  4 +-
 2 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/client/src/components/Donation/components/DonateText.js b/client/src/components/Donation/components/DonateText.js
index 90e9221b73..4a2a0dddf0 100644
--- a/client/src/components/Donation/components/DonateText.js
+++ b/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);
diff --git a/client/src/components/Supporters.js b/client/src/components/Supporters.js
index ac03a07731..71e9ed1d23 100644
--- a/client/src/components/Supporters.js
+++ b/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>