add loading while adding fees to ORD

client/src/scenes/IncidentsReport/index.js

@@ -20,9 +20,11 @@ class IncidentsReport extends Component {
     };
 
     render () {
-        const { pendingIncidents, incidents } = this.props;
+        const { pendingIncidents, incidents, pendingAddFeesStatus } = this.props;
         const { dateRange } = this.state;
 
+        const loading = pendingIncidents || pendingAddFeesStatus;
+
         const membersMap = {};
         if (incidents && Array.isArray(incidents)) {
             incidents.forEach((incident) => {
@@ -40,13 +42,13 @@ class IncidentsReport extends Component {
                 <br/>
                 <GenerateFeesInORDButton
                     memberIds={memberIds}
-                    disabled={pendingIncidents}
+                    disabled={loading}
                     dateRange={dateRange}
                 />
                 <br/><br/>
                 <hr/>
                 <br/>
-                <MemberIncidentsTables pendingIncidents={pendingIncidents} incidents={incidents} />
+                <MemberIncidentsTables pendingIncidents={loading} incidents={incidents} />
             </Container>
         );
     }
@@ -55,6 +57,7 @@ class IncidentsReport extends Component {
 const mapStateToProps = (state) => ({
     pendingIncidents: state.incidentsReport.pending,
     incidents: state.incidentsReport.result,
+    pendingAddFeesStatus: state.addFeesStatus.pending,
 });
 
 const mapDispatchToProps = (dispatch) => ({

client/src/scenes/PracticeSummaryReport/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import {Container, Grid} from 'semantic-ui-react';
+import { Container, Grid } from 'semantic-ui-react';
 
 import MainMenu from '../../components/MainMenu';
 import DateRangePicker from '../../components/DateRangePicker';
@@ -9,7 +9,7 @@ import MemberSummary from './components/MemberSummary';
 import MemberIncidentsTables from '../../components/MemberIncidentsTables';
 import GenerateFeesInORDButton from '../../components/GenerateFeesInORDButton';
 
-import { fetchMemberIncidents, addFeesToOrd } from '../../store/actions';
+import { fetchMemberIncidents } from '../../store/actions';
 
 class PracticeSummaryReport extends Component {
     constructor(props){
@@ -40,9 +40,11 @@ class PracticeSummaryReport extends Component {
     }
 
     render () {
-        const { memberIncidents, loading } = this.props;
+        const { memberIncidents, loadingMemberIncidents, loadingAddFeesStatus } = this.props;
         const { memberId, dateRange } = this.state;
 
+        const loading = loadingAddFeesStatus || loadingMemberIncidents;
+
         const addFeesButtonDisabled = !memberId || !dateRange || loading;
 
         return (
@@ -91,7 +93,8 @@ class PracticeSummaryReport extends Component {
 
 const mapStateToProps = (state) => ({
     memberIncidents: state.memberIncidents.result,
-    loading: state.memberIncidents.pending,
+    loadingMemberIncidents: state.memberIncidents.pending,
+    loadingAddFeesStatus: state.addFeesStatus.pending,
 });
 
 const mapDispatchToProps = (dispatch) => ({

client/src/store/reducers/addFeesToOrdReducer.js

@@ -0,0 +1,38 @@
+import {
+    ADD_FEES_TO_ORD_PENDING,
+    ADD_FEES_TO_ORD_SUCCESS,
+    ADD_FEES_TO_ORD_FAILED,
+} from '../constants';
+
+const initialState = {
+    pending: false,
+    result: null,
+    error: null,
+};
+
+export const addFeesStatus = (state, action) => {
+  state = state || initialState;
+  action = action || {};
+
+  switch(action.type){
+      case ADD_FEES_TO_ORD_PENDING:
+          return Object.assign({}, state, {
+              pending: true,
+              error: null,
+          });
+      case ADD_FEES_TO_ORD_SUCCESS:
+          return Object.assign({}, state, {
+              pending: false,
+              result: action.payload,
+              error: null,
+          });
+      case ADD_FEES_TO_ORD_FAILED:
+          return Object.assign({}, state, {
+              pending: false,
+              result: {},
+              error: action.payload,
+          });
+      default:
+          return state;
+  }
+};

client/src/store/reducers/index.js

@@ -6,6 +6,7 @@ import { addMapping } from './addMappingReducer';
 import { incidentsReport } from './incidentsReportReducer';
 import { membersList } from './membersListReducer';
 import { memberIncidents} from './memberIncidentsReducer';
+import { addFeesStatus } from './addFeesToOrdReducer';
 
 export const rootReducer = combineReducers({
     doorLockData,
@@ -14,5 +15,6 @@ export const rootReducer = combineReducers({
     incidentsReport,
     membersList,
     memberIncidents,
+    addFeesStatus,
 });