feat: Create and use dynamic active donation counts

client/src/components/Supporters.js

@@ -6,9 +6,12 @@ import FullWidthRow from '../components/helpers/FullWidthRow';
 
 import './supporters.css';
 
-const propTypes = { isDonating: PropTypes.bool.isRequired };
+const propTypes = {
+  activeDonations: PropTypes.number.isRequired,
+  isDonating: PropTypes.bool.isRequired
+};
 
-function Supporters({ isDonating }) {
+function Supporters({ isDonating, activeDonations }) {
   return (
     <Fragment>
       <FullWidthRow>
@@ -16,10 +19,10 @@ function Supporters({ isDonating }) {
       </FullWidthRow>
       <FullWidthRow>
         <div id='supporter-progress-wrapper'>
-          <ProgressBar max={10000} now={400} />
+          <ProgressBar max={10000} now={activeDonations} />
           <div id='progress-label-wrapper'>
             <span className='progress-label'>
-              4000 supporters out of 10,000 goal
+              {activeDonations} supporters out of 10,000 goal
             </span>
           </div>
         </div>

client/src/pages/welcome.js

@@ -14,13 +14,15 @@ import Supporters from '../components/Supporters';
 import {
   userSelector,
   userFetchStateSelector,
-  isSignedInSelector
+  isSignedInSelector,
+  activeDonationsSelector
 } from '../redux';
 import { randomQuote } from '../utils/get-words';
 
 import './welcome.css';
 
 const propTypes = {
+  activedonations: PropTypes.number,
   fetchState: PropTypes.shape({
     pending: PropTypes.bool,
     complete: PropTypes.bool,
@@ -42,7 +44,13 @@ const mapStateToProps = createSelector(
   userFetchStateSelector,
   isSignedInSelector,
   userSelector,
-  (fetchState, isSignedIn, user) => ({ fetchState, isSignedIn, user })
+  activeDonationsSelector,
+  (fetchState, isSignedIn, user, activeDonations) => ({
+    activeDonations,
+    fetchState,
+    isSignedIn,
+    user
+  })
 );
 const mapDispatchToProps = dispatch => bindActionCreators({}, dispatch);
 
@@ -57,7 +65,8 @@ function Welcome({
     completedCertCount = 0,
     completedLegacyCertCount: completedLegacyCerts = 0,
     isDonating
-  }
+  },
+  activeDonations
 }) {
   if (pending && !complete) {
     return (
@@ -94,7 +103,10 @@ function Welcome({
             </Col>
           </Row>
           <Spacer />
-          <Supporters isDonating={isDonating} />
+          <Supporters
+            activeDonations={activeDonations}
+            isDonating={isDonating}
+          />
           <Spacer size={2} />
           <Row>
             <Col sm={8} smOffset={2} xs={12}>

client/src/redux/fetch-user-saga.js

@@ -16,10 +16,12 @@ function* fetchSessionUser() {
   }
   try {
     const {
-      data: { user = {}, result = '' }
+      data: { user = {}, result = '', sessionMeta = {} }
     } = yield call(getSessionUser);
     const appUser = user[result] || {};
-    yield put(fetchUserComplete({ user: appUser, username: result }));
+    yield put(
+      fetchUserComplete({ user: appUser, username: result, sessionMeta })
+    );
   } catch (e) {
     yield put(fetchUserError(e));
   }

client/src/redux/index.js

@@ -39,6 +39,7 @@ const initialState = {
   userProfileFetchState: {
     ...defaultFetchState
   },
+  sessionMeta: {},
   showDonationModal: false,
   isOnline: true
 };
@@ -158,6 +159,13 @@ export const userSelector = state => {
   return state[ns].user[username] || {};
 };
 
+export const sessionMetaSelector = state => state[ns].sessionMeta;
+export const activeDonationsSelector = state =>
+// this default is mostly for development where there are likely no donators
+// in the local db
+// If we see this in production then things are getting weird
+  sessionMetaSelector(state).activeDonations || 4040;
+
 function spreadThePayloadOnUser(state, payload) {
   return {
     ...state,
@@ -181,7 +189,10 @@ export const reducer = handleActions(
       ...state,
       userProfileFetchState: { ...defaultFetchState }
     }),
-    [types.fetchUserComplete]: (state, { payload: { user, username } }) => ({
+    [types.fetchUserComplete]: (
+      state,
+      { payload: { user, username, sessionMeta } }
+    ) => ({
       ...state,
       user: {
         ...state.user,
@@ -193,6 +204,10 @@ export const reducer = handleActions(
         complete: true,
         errored: false,
         error: null
+      },
+      sessionMeta: {
+        ...state.sessionMeta,
+        ...sessionMeta
       }
     }),
     [types.fetchUserError]: (state, { payload }) => ({