old-crm-integration/client/src/scenes/IncidentsReport/index.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Container } from 'semantic-ui-react';

import MainMenu from '../../components/MainMenu';
import MonthSelector from '../../components/MonthSelector';
import MemberIncidentsTables from '../../components/MemberIncidentsTables';
import GenerateFeesInORDButton from '../../components/GenerateFeesInORDButton';

import { fetchIncidents } from '../../store/actions';

class IncidentsReport extends Component {
    state = {dateRange: null};

    onDatesUpdate = (dateRange) => {
        const { fetchIncidents } = this.props;

        this.setState({dateRange});
        fetchIncidents(dateRange);
    };

    render () {
        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;
            });
        }

        return (
            <Container>
                <MainMenu/>
                <h3>Incidents Report</h3>
                <hr/>
                <MonthSelector buttonLabel="Show report" onDatesUpdate={this.onDatesUpdate} inlineButton />
                <br/>
                <GenerateFeesInORDButton
                    disabled={loading}
                    dateRange={dateRange}
                />
                <br/><br/>
                <hr/>
                <br/>
                <MemberIncidentsTables pendingIncidents={loading} incidents={incidents} />
            </Container>
        );
    }
}

const mapStateToProps = (state) => ({
    pendingIncidents: state.incidentsReport.pending,
    incidents: state.incidentsReport.result,
    pendingAddFeesStatus: state.addFeesStatus.pending,
});

const mapDispatchToProps = (dispatch) => ({
    fetchIncidents: (dateRange) => fetchIncidents(dispatch, dateRange)
});

export default connect(mapStateToProps, mapDispatchToProps)(IncidentsReport);