Fix for loading

client/src/scenes/IncidentsReport/index.js

@@ -5,26 +5,50 @@ import { Container } from 'semantic-ui-react';
 import MainMenu from '../../components/MainMenu';
 import DateRangePicker from '../../components/DateRangePicker';
 import MemberIncidentsTables from '../../components/MemberIncidentsTables';
+import GenerateFeesInORDButton from '../../components/GenerateFeesInORDButton';
 
-import { fetchIncidents } from '../../store/actions';
+import { fetchIncidents, addFeesToOrd } from '../../store/actions';
 
 class IncidentsReport extends Component {
-    onDatesUpdate(dateRange) {
+    state = {dateRange: null};
+
+    onDatesUpdate = (dateRange) => {
         const { fetchIncidents } = this.props;
+
+        this.setState({dateRange});
         fetchIncidents(dateRange);
-    }
+    };
 
     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) => {
+                membersMap[incident.memberId] = true;
+            });
+        }
+        const memberIds = Object.keys(membersMap) || [];
 
         return (
             <Container>
                 <MainMenu/>
                 <h3>Incidents Report</h3>
                 <hr/>
-                <DateRangePicker buttonLabel="Show report" onDatesUpdate={this.onDatesUpdate.bind(this)} />
+                <DateRangePicker buttonLabel="Show report" onDatesUpdate={this.onDatesUpdate} inlineButton />
                 <br/>
-                <MemberIncidentsTables pendingIncidents={pendingIncidents} incidents={incidents} />
+                <GenerateFeesInORDButton
+                    memberIds={memberIds}
+                    disabled={loading}
+                    dateRange={dateRange}
+                />
+                <br/><br/>
+                <hr/>
+                <br/>
+                <MemberIncidentsTables pendingIncidents={loading} incidents={incidents} />
             </Container>
         );
     }
@@ -33,10 +57,12 @@ class IncidentsReport extends Component {
 const mapStateToProps = (state) => ({
     pendingIncidents: state.incidentsReport.pending,
     incidents: state.incidentsReport.result,
+    pendingAddFeesStatus: state.addFeesStatus.pending,
 });
 
 const mapDispatchToProps = (dispatch) => ({
     fetchIncidents: (dateRange) => fetchIncidents(dispatch, dateRange),
+    addFeesToOrd: (dateRange, memberIds) => addFeesToOrd(dispatch, dateRange, memberIds),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(IncidentsReport);

client/src/scenes/PracticeSummaryReport/index.js

@@ -1,12 +1,13 @@
 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';
 import MemberSelector from './components/MemberSelector';
 import MemberSummary from './components/MemberSummary';
 import MemberIncidentsTables from '../../components/MemberIncidentsTables';
+import GenerateFeesInORDButton from '../../components/GenerateFeesInORDButton';
 
 import { fetchMemberIncidents } from '../../store/actions';
 
@@ -39,8 +40,12 @@ class PracticeSummaryReport extends Component {
     }
 
     render () {
-        const { memberIncidents, loading } = this.props;
-        const { memberId } = this.state;
+        const { memberIncidents, loadingMemberIncidents, loadingAddFeesStatus } = this.props;
+        const { memberId, dateRange } = this.state;
+
+        const loading = loadingAddFeesStatus || loadingMemberIncidents;
+
+        const addFeesButtonDisabled = !memberId || !dateRange || loading;
 
         return (
             <Container>
@@ -64,6 +69,16 @@ class PracticeSummaryReport extends Component {
                             />
                         </Grid.Column>
                     </Grid.Row>
+                    <Grid.Row>
+                        <Grid.Column>
+                            <GenerateFeesInORDButton
+                                singleMember
+                                disabled={addFeesButtonDisabled}
+                                dateRange={dateRange}
+                                memberIds={[memberId]}
+                            />
+                        </Grid.Column>
+                    </Grid.Row>
                     <Grid.Row/>
                     <Grid.Row>
                         <Grid.Column>
@@ -78,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) => ({