show incidents for selected member and selected dates

client/src/scenes/PracticeSummaryReport/index.js

@@ -8,8 +8,39 @@ import MemberSelector from './components/MemberSelector';
 import MemberSummary from './components/MemberSummary';
 import MemberIncidentsTable from '../../components/MemberIncidentsTable';
 
+import { fetchMemberIncidents } from '../../store/actions';
+
 class PracticeSummaryReport extends Component {
+    constructor(props){
+        super(props);
+
+        this.state = {
+            dateRange: null,
+            memberId: null,
+        };
+    }
+
+    onDateRangeUpdate(dateRange){
+        this.fetchIncidents(dateRange, this.state.memberId);
+        this.setState({dateRange});
+    }
+
+    onMemberSelectionUpdate(memberId){
+        this.fetchIncidents(this.state.dateRange, memberId);
+        this.setState({memberId});
+    }
+
+    fetchIncidents(dateRange, memberId){
+        const { fetchMemberIncidents } = this.props;
+
+        if (dateRange && dateRange.startDate && dateRange.endDate && memberId){
+            fetchMemberIncidents(memberId, dateRange);
+        }
+    }
+
     render () {
+        const { memberIncidents, loading } = this.props;
+
         return (
             <Container>
                 <MainMenu/>
@@ -18,10 +49,10 @@ class PracticeSummaryReport extends Component {
                 <Grid stackable columns="equal">
                     <Grid.Row>
                         <Grid.Column>
-                            <MemberSelector />
+                            <MemberSelector onMemberSelect={this.onMemberSelectionUpdate.bind(this)} />
                         </Grid.Column>
                         <Grid.Column>
-                            <DateRangePicker />
+                            <DateRangePicker onDatesUpdate={this.onDateRangeUpdate.bind(this)}/>
                         </Grid.Column>
                     </Grid.Row>
                     <Grid.Row>
@@ -31,7 +62,11 @@ class PracticeSummaryReport extends Component {
                     </Grid.Row>
                     <Grid.Row>
                         <Grid.Column>
-                            <MemberIncidentsTable title="Incidents list" />
+                            <MemberIncidentsTable
+                                title="Detail list"
+                                incidents={memberIncidents}
+                                loading={loading}
+                            />
                         </Grid.Column>
                     </Grid.Row>
                 </Grid>
@@ -41,9 +76,12 @@ class PracticeSummaryReport extends Component {
 }
 
 const mapStateToProps = (state) => ({
+    memberIncidents: state.memberIncidents.result,
+    loading: state.memberIncidents.pending,
 });
 
 const mapDispatchToProps = (dispatch) => ({
+    fetchMemberIncidents: (memberId, dateRange) => fetchMemberIncidents(dispatch, memberId, dateRange),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(PracticeSummaryReport);