generate practice summary report; send report to frontend

client/src/scenes/MemberPracticeSummaryReport/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { Container, Button } from 'semantic-ui-react';
+import { Container, Button, Loader } from 'semantic-ui-react';
 
 import MainMenu from '../../components/MainMenu';
 
@@ -8,20 +8,24 @@ import { fetchMemberPracticeSummaryReport } from '../../store/actions';
 
 class MemberPracticeSummaryReport extends Component {
     render () {
-        const { fetchMemberPracticeSummaryReport } = this.props;
+        const { fetchMemberPracticeSummaryReport, pendingReport } = this.props;
         return (
             <Container>
                 <MainMenu/>
                 <h3>Member Practice Summary Report</h3>
                 <hr/>
                 <br/>
-                <Button onClick={fetchMemberPracticeSummaryReport}>Generate Report</Button>
+                <Loader active={pendingReport} />
+                <Button disabled={pendingReport} onClick={fetchMemberPracticeSummaryReport}>Generate Report</Button>
             </Container>
         );
     }
 }
 
-const mapStateToProps = (state) => ({});
+const mapStateToProps = (state) => ({
+    pendingReport: state.memberPracticeSummaryReport.pending,
+});
+
 const mapDispatchToProps = (dispatch) => ({
     fetchMemberPracticeSummaryReport: () => fetchMemberPracticeSummaryReport(dispatch),
 });