Show incident report (without filtering for now)

client/src/scenes/Home/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-import { Container, Form } from "semantic-ui-react";
+import { Container, Form } from 'semantic-ui-react';
 
 import MainMenu from '../../components/MainMenu';
 

client/src/scenes/IncidentsReport/index.js

@@ -0,0 +1,108 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { Container, Loader } from 'semantic-ui-react';
+import ReactTable from 'react-table';
+import 'react-table/react-table.css';
+
+import MainMenu from '../../components/MainMenu';
+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() {
+        const { fetchIncidents } = this.props;
+        fetchIncidents();
+    }
+
+    render () {
+        const { pendingIncidents, incidents } = this.props;
+
+        const columns = [];
+        if (incidents && incidents.length > 0){
+            const incidentHeaders = Object.keys(incidentsReportHeaderTitles);
+
+            incidentHeaders.forEach((header) => {
+                const columnTitle = incidentsReportHeaderTitles[header];
+
+                if (columnTitle){
+                    const columnAlignments = {
+                        left: 'left',
+                        right: 'right',
+                    };
+                    let columnContentsAlignment = columnAlignments.left;
+
+                    columns.push({
+                        Header: incidentsReportHeaderTitles[header],
+                        accessor: header,
+                        Cell: props => {
+                            let cellValue;
+
+                            switch (props.column.id) {
+                                case 'incidentType':
+                                    cellValue = incidentDescriptions[props.value];
+                                    break;
+                                case 'incidentLevel':
+                                    cellValue = incidentLevelDescriptions[props.value];
+                                    break;
+
+                                case 'feeDescription':
+                                    const { incidentType, incidentLevel, timeIntervalsToCharge } = props.row['_original'];
+                                    switch (incidentType) {
+                                        case UNLOCKED_INCIDENT:
+                                            cellValue = `${incidentLevelDescriptions[incidentLevel]}`;
+                                            break;
+                                        case UNSCHEDULED_INCIDENT:
+                                            cellValue = `${timeIntervalsToCharge} x 5 min`;
+                                            break;
+                                    }
+                                    break;
+
+                                case 'totalChargeFee':
+                                    const totalFee = props.value ? props.value : props.row['_original'].incidentPrice;
+                                    const totalFeeFormatted = parseFloat(totalFee).toFixed(2);
+                                    cellValue = `$ ${totalFeeFormatted}`;
+                                    columnContentsAlignment = columnAlignments.right;
+                                    break;
+
+                                default:
+                                    cellValue = props.value;
+                            }
+
+                            return <div style={{ textAlign: columnContentsAlignment }}>{cellValue}</div>
+                        }
+                    });
+                }
+            });
+        }
+
+        return (
+            <Container>
+                <MainMenu/>
+                <h3>Incidents Report</h3>
+                <hr/>
+                <Loader active={pendingIncidents} />
+                {
+                    !pendingIncidents && incidents &&
+                    <ReactTable
+                        data={incidents}
+                        multiSort={false}
+                        columns={columns}
+                    />
+                }
+            </Container>
+        );
+    }
+}
+
+const mapStateToProps = (state) => ({
+    pendingIncidents: state.incidentsReport.pending,
+    incidents: state.incidentsReport.result,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+    fetchIncidents: () => fetchIncidents(dispatch),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(IncidentsReport);

client/src/scenes/NotFound/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import MainMenu from "../../components/MainMenu";
+import MainMenu from '../../components/MainMenu';
 
 export default function NotFound () {
     return (

client/src/scenes/UploadDLockData/components/FileUpload.js

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { Form } from "semantic-ui-react";
+import { Form } from 'semantic-ui-react';
 
 import UnknownMapping from './UnknownMapping';
 
-import { uploadDoorLockData, fetchMappings } from "../../../store/actions";
+import { uploadDoorLockData, fetchMappings } from '../../../store/actions';
 
 class FileUpload extends Component {
     constructor(props) {

client/src/scenes/UploadDLockData/components/UnknownMapping.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import {Button, Dropdown, Message} from "semantic-ui-react";
+import {Button, Dropdown, Message} from 'semantic-ui-react';
 import Fuse from 'fuse.js';
-import { addNewMapping } from "../../../store/actions";
+import { addNewMapping } from '../../../store/actions';
 
 class UnknownMapping extends Component {
     constructor(props) {

client/src/scenes/UploadDLockData/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Container, Form } from "semantic-ui-react";
+import { Container, Form } from 'semantic-ui-react';
 
 import MainMenu from '../../components/MainMenu';
 import FileUpload from './components/FileUpload';