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),
 });

client/src/store/actions/integrationActions.js

@@ -115,9 +115,11 @@ export const checkProcessing = (dispatch) => {
 
 export const fetchMemberPracticeSummaryReport = (dispatch) => {
     dispatch({type: FETCH_MEMBER_PRACTICE_SUMMARY_REPORT_PENDING});
-    API.get('integration/report/practiceSummary')
+    API.get('integration/report/practiceSummary', {
+        responseType: 'blob',
+    })
         .then(response => {
-            dispatch({type: FETCH_MEMBER_PRACTICE_SUMMARY_REPORT_SUCCESS, payload: response.data});
+            dispatch({type: FETCH_MEMBER_PRACTICE_SUMMARY_REPORT_SUCCESS, payload: response});
         })
         .catch(error => {
             dispatch({type: FETCH_MEMBER_PRACTICE_SUMMARY_REPORT_FAILED, payload: error.response});

client/src/store/reducers/fetchMemberPracticeSummaryReportReducer.js

@@ -0,0 +1,45 @@
+import {
+    FETCH_MEMBER_PRACTICE_SUMMARY_REPORT_PENDING,
+    FETCH_MEMBER_PRACTICE_SUMMARY_REPORT_SUCCESS,
+    FETCH_MEMBER_PRACTICE_SUMMARY_REPORT_FAILED,
+} from '../constants';
+
+const initialState = {
+    pending: false,
+    result: null,
+    error: null,
+};
+
+export const memberPracticeSummaryReport = (state, action) => {
+    state = state || initialState;
+    action = action || {};
+
+    switch(action.type){
+        case FETCH_MEMBER_PRACTICE_SUMMARY_REPORT_PENDING:
+            return Object.assign({}, state, {
+                pending: true,
+                error: null,
+            });
+        case FETCH_MEMBER_PRACTICE_SUMMARY_REPORT_SUCCESS:
+            const url = window.URL.createObjectURL(new Blob([action.payload.data]));
+            const link = document.createElement('a');
+            link.href = url;
+            link.setAttribute('download', 'Member Practice Summary Report.xlsx');
+            document.body.appendChild(link);
+            link.click();
+
+            return Object.assign({}, state, {
+                pending: false,
+                result: null,
+                error: null,
+            });
+        case FETCH_MEMBER_PRACTICE_SUMMARY_REPORT_FAILED:
+            return Object.assign({}, state, {
+                pending: false,
+                result: {},
+                error: action.payload,
+            });
+        default:
+            return state;
+    }
+};

client/src/store/reducers/index.js

@@ -8,6 +8,7 @@ import { membersList } from './membersListReducer';
 import { memberIncidents} from './memberIncidentsReducer';
 import { addFeesStatus } from './addFeesToOrdReducer';
 import { checkProcessing } from './checkProcessingReducer';
+import { memberPracticeSummaryReport} from './fetchMemberPracticeSummaryReportReducer';
 
 export const rootReducer = combineReducers({
     doorLockData,
@@ -18,5 +19,6 @@ export const rootReducer = combineReducers({
     memberIncidents,
     addFeesStatus,
     checkProcessing,
+    memberPracticeSummaryReport,
 });