From 82aad709121c44c58632a0e609922709ef93ac2c Mon Sep 17 00:00:00 2001
From: Bilal Catic <bilal.catic@hotmail.com>
Date: Tue, 18 Jun 2019 15:27:18 +0200
Subject: [PATCH] create and use component for member incidents

---
 .../components/MemberIncidentsTable/index.js  | 93 +++++++++++++++++++
 client/src/scenes/IncidentsReport/index.js    | 78 +---------------
 2 files changed, 96 insertions(+), 75 deletions(-)
 create mode 100644 client/src/components/MemberIncidentsTable/index.js

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 <div style={{ textAlign: columnContentsAlignment }}>{cellValue}</div>
+                    }
+                });
+            }
+        });
+    }
+
+    return (
+        <div>
+            <h4>{title}</h4>
+            <Loader active={loading} />
+            {
+                !loading && incidents &&
+                <ReactTable
+                    data={incidents}
+                    multiSort={false}
+                    columns={columns}
+                />
+            }
+        </div>
+    );
+};
+
+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 <div style={{ textAlign: columnContentsAlignment }}>{cellValue}</div>
-                        }
-                    });
-                }
-            });
-        }
-
         return (
             <Container>
                 <MainMenu/>
@@ -88,15 +24,7 @@ class IncidentsReport extends Component {
                 <hr/>
                 <DateRangePicker buttonLabel="Show report" onDatesUpdate={this.onDatesUpdate.bind(this)} />
                 <br/>
-                <Loader active={pendingIncidents} />
-                {
-                    !pendingIncidents && incidents &&
-                    <ReactTable
-                        data={incidents}
-                        multiSort={false}
-                        columns={columns}
-                    />
-                }
+                <MemberIncidentsTable loading={pendingIncidents} incidents={incidents} />
             </Container>
         );
     }