diff --git a/app/javascript/gabsocial/actions/expenses.js b/app/javascript/gabsocial/actions/expenses.js new file mode 100644 index 00000000..b7ff97c0 --- /dev/null +++ b/app/javascript/gabsocial/actions/expenses.js @@ -0,0 +1,35 @@ +import api from '../api' +import { me } from '../initial_state' + +export const EXPENSES_FETCH_REQUEST = 'EXPENSES_FETCH_REQUEST' +export const EXPENSES_FETCH_SUCCESS = 'EXPENSES_FETCH_SUCCESS' +export const EXPENSES_FETCH_FAIL = 'EXPENSES_FETCH_FAIL' + +/** + * Fetch monthly expenses completion + */ +export const fetchExpenses = () => (dispatch, getState) => { + if (!me) return + + dispatch(fetchExpensesRequest()) + + api(getState).get('/api/v1/expenses').then((response) => { + dispatch(fetchExpensesSuccess(response.data.expenses)) + }).catch((error) => { + dispatch(fetchExpensesFail(error)) + }) +} + +const fetchExpensesRequest = () => ({ + type: EXPENSES_FETCH_REQUEST, +}) + +const fetchExpensesSuccess = (value) => ({ + type: EXPENSES_FETCH_SUCCESS, + value, +}) + +const fetchExpensesFail = (error, listType) => ({ + type: EXPENSES_FETCH_FAIL, + error, +}) \ No newline at end of file diff --git a/app/javascript/gabsocial/components/panel/progress_panel.js b/app/javascript/gabsocial/components/panel/progress_panel.js index 96a59f8b..3e9062d8 100644 --- a/app/javascript/gabsocial/components/panel/progress_panel.js +++ b/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 = (