add date range picker to the incidents screen

client/src/scenes/IncidentsReport/index.js

@@ -1,19 +1,20 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { Container, Loader } from 'semantic-ui-react';
+import {Container, Loader} from 'semantic-ui-react';
 import ReactTable from 'react-table';
 import 'react-table/react-table.css';
 
 import MainMenu from '../../components/MainMenu';
+import DateRangePicker from '../../components/DateRangePicker';
+
 import { fetchIncidents } from '../../store/actions';
 import { incidentsReportHeaderTitles } from '../../constants/menuItems';
 import { incidentDescriptions, incidentLevelDescriptions, UNSCHEDULED_INCIDENT, UNLOCKED_INCIDENT } from '../../constants/enums';
 
 class IncidentsReport extends Component {
-
-    componentDidMount() {
+    onDatesUpdate(dateRange) {
         const { fetchIncidents } = this.props;
-        fetchIncidents();
+        fetchIncidents(dateRange);
     }
 
     render () {
@@ -56,6 +57,9 @@ class IncidentsReport extends Component {
                                         case UNSCHEDULED_INCIDENT:
                                             cellValue = `${timeIntervalsToCharge} x 5 min`;
                                             break;
+                                        default:
+                                            cellValue = '';
+                                            break;
                                     }
                                     break;
 
@@ -82,6 +86,8 @@ class IncidentsReport extends Component {
                 <MainMenu/>
                 <h3>Incidents Report</h3>
                 <hr/>
+                <DateRangePicker buttonLabel="Show report" onDatesUpdate={this.onDatesUpdate.bind(this)} />
+                <br/>
                 <Loader active={pendingIncidents} />
                 {
                     !pendingIncidents && incidents &&