Removed monthlyExpensesComplete from initial state, moved into API call

• Removed:
- monthlyExpensesComplete from initial state, moved into API call
- set up expenses to read from redux for Progress panel/injection

app/javascript/gabsocial/components/panel/progress_panel.js

@@ -1,11 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
 import { injectIntl, defineMessages } from 'react-intl'
-import { monthlyExpensesComplete } from '../../initial_state'
 import {
   URL_DISSENTER_SHOP,
   URL_DISSENTER_SHOP_DONATIONS,
 } from '../../constants'
+import { fetchExpenses } from '../../actions/expenses'
 import PanelLayout from './panel_layout';
 import ProgressBar from '../progress_bar'
 import Button from '../button'
@@ -14,12 +15,17 @@ import Icon from '../icon'
 
 class ProgressPanel extends React.PureComponent {
 
+  componentDidMount() {
+    if (!this.props.isFetched) {
+      this.props.onFetchExpenses()
+    }
+  }
+
   render() {
-    const { intl } = this.props
+    const { intl, value, isFetched } = this.props
 
-    if (!monthlyExpensesComplete) return null
+    if (value === 0 && !isFetched) return null
 
-    const value = Math.min(parseFloat(monthlyExpensesComplete), 100)
     const subtitle = (
       <div className={[_s.d, _s.flexRow, _s.aiCenter, _s.jcCenter].join(' ')}>
         <Text color='secondary' size='small' weight='bold' className={_s.mrAuto}>
@@ -46,7 +52,7 @@ class ProgressPanel extends React.PureComponent {
       >
         <div className={[_s.d, _s.px15, _s.pb15, _s.pt5].join(' ')}>
           <ProgressBar
-            progress={monthlyExpensesComplete}
+            progress={value}
             title={intl.formatMessage(messages.progressTitle, { value })}
             href={URL_DISSENTER_SHOP}
           />
@@ -64,8 +70,22 @@ const messages = defineMessages({
   donationTitle: { id: 'make_donation', defaultMessage: 'Make a Donation' },
 })
 
+const mapStateToProps = (state) => ({
+  isFetched: state.getIn(['expenses', 'fetched'], false),
+  value: state.getIn(['expenses', 'value'], 0),
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  onFetchExpenses() {
+    dispatch(fetchExpenses())
+  },
+})
+
 ProgressPanel.propTypes = {
   intl: PropTypes.object.isRequired,
+  isFetched: PropTypes.bool.isRequired,
+  value: PropTypes.number.isRequired,
+  onFetchExpenses: PropTypes.func.isRequired,
 }
 
-export default injectIntl(ProgressPanel)
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ProgressPanel))