diff --git a/client/src/components/MemberIncidentsTable/index.js b/client/src/components/MemberIncidentsTable/index.js
new file mode 100644
index 0000000..1586abf
--- /dev/null
+++ b/client/src/components/MemberIncidentsTable/index.js
@@ -0,0 +1,93 @@
+import React from 'react';
+import { Loader } from 'semantic-ui-react';
+import ReactTable from 'react-table';
+import 'react-table/react-table.css';
+
+import {incidentsReportHeaderTitles} from '../../constants/menuItems';
+import {
+ incidentDescriptions,
+ incidentLevelDescriptions,
+ UNLOCKED_INCIDENT,
+ UNSCHEDULED_INCIDENT
+} from '../../constants/enums';
+
+
+const MemberIncidentsTable = props => {
+ const { loading, incidents, title } = 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;
+ default:
+ cellValue = '';
+ 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
{cellValue}
+ }
+ });
+ }
+ });
+ }
+
+ return (
+
+
{title}
+
+ {
+ !loading && incidents &&
+
+ }
+
+ );
+};
+
+export default MemberIncidentsTable;
diff --git a/client/src/scenes/IncidentsReport/index.js b/client/src/scenes/IncidentsReport/index.js
index 4317159..6501d47 100644
--- a/client/src/scenes/IncidentsReport/index.js
+++ b/client/src/scenes/IncidentsReport/index.js
@@ -1,15 +1,12 @@
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 { Container } from 'semantic-ui-react';
import MainMenu from '../../components/MainMenu';
import DateRangePicker from '../../components/DateRangePicker';
+import MemberIncidentsTable from '../../components/MemberIncidentsTable';
import { fetchIncidents } from '../../store/actions';
-import { incidentsReportHeaderTitles } from '../../constants/menuItems';
-import { incidentDescriptions, incidentLevelDescriptions, UNSCHEDULED_INCIDENT, UNLOCKED_INCIDENT } from '../../constants/enums';
class IncidentsReport extends Component {
onDatesUpdate(dateRange) {
@@ -20,67 +17,6 @@ class IncidentsReport extends Component {
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;
- default:
- cellValue = '';
- 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 {cellValue}
- }
- });
- }
- });
- }
-
return (
@@ -88,15 +24,7 @@ class IncidentsReport extends Component {
-
- {
- !pendingIncidents && incidents &&
-
- }
+
);
}