upload, parse and store door lock entries

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

@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import {Form} from "semantic-ui-react";
+
+import { uploadDoorLockData } from "../../../store/actions";
+
+class FileUpload extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            file: null,
+        };
+
+        this.onFileChange = this.onFileChange.bind(this);
+        this.onUploadClick = this.onUploadClick.bind(this);
+    }
+
+    onFileChange(event) {
+        const file = event.target.files[0];
+        this.setState({file});
+    };
+
+    onUploadClick() {
+        const { uploadDoorLockData } = this.props;
+        const { file } = this.state;
+
+        if (file) {
+            uploadDoorLockData(file);
+        }
+    };
+
+    render() {
+        return (
+            <div>
+                <Form.Input
+                    fluid
+                    required
+                    label="Select DLock file"
+                    type="file"
+                    accept=".csv"
+                    onChange={this.onFileChange}
+                />
+                <Form.Button onClick={this.onUploadClick}>Upload</Form.Button>
+            </div>
+        );
+    }
+}
+
+const mapDispatchToProps = (dispatch) => ({
+    uploadDoorLockData: (doorLockDataFile) => uploadDoorLockData(dispatch, doorLockDataFile)
+});
+
+export default connect(null, mapDispatchToProps)(FileUpload);

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

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { Loader, Message } from 'semantic-ui-react';
+
+class UploadResults extends Component {
+    render(){
+        const {pending, result, error} = this.props;
+
+        const parserErrors = result && result.parserErrors && result.parserErrors.length > 0 ? result.parserErrors : null;
+        const parsedDataCount = result && result.parsedData && result.parsedData.length > 0 ? result.parsedData.length : null;
+
+        return (
+            <div>
+            {
+                pending && <Loader active />
+            }
+            <br/>
+            {
+                error &&
+                <Message negative>
+                    <Message.Header>Upload failed</Message.Header>
+                    <p>There was error uploading file</p>
+                </Message>
+            }
+            <br/>
+            {
+                !error && parsedDataCount &&
+                <Message positive>
+                    <Message.Header>Upload complete</Message.Header>
+                    <p>{parsedDataCount} entries successfully inserted</p>
+                    {parserErrors && <p style={{ color: 'red' }}>Some entries could not be parsed. Details are shown below</p>}
+                </Message>
+            }
+            <br/>
+            {
+                !error && parserErrors && parserErrors.map((parserError, index) => {
+                    return (
+                        <div key={`message-${index}`}>
+                            <Message negative>
+                                <Message.Header>{parserError.error}</Message.Header>
+                                <p>{JSON.stringify(parserError.details)}</p>
+                                <p>File : {parserError.file}</p>
+                            </Message>
+                            <br/>
+                        </div>
+                    );
+                })
+            }
+            </div>
+        )
+    }
+}
+
+const mapStateToProps = (state) => ({
+    pending: state.doorLockData.pending,
+    result: state.doorLockData.result,
+    error: state.doorLockData.error,
+
+});
+
+export default connect(mapStateToProps)(UploadResults);

client/src/scenes/UploadDLockData/index.js

@@ -1,39 +1,22 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-
+import React from 'react';
 import { Container, Form } from "semantic-ui-react";
 
 import MainMenu from '../../components/MainMenu';
-import { uploadDoorLockData } from "../../store/actions";
+import FileUpload from './components/FileUpload';
+import UploadResults from './components/UploadResults';
 
-class UploadDLockData extends Component {
-
-    render () {
-        return (
-            <Container>
-                <MainMenu/>
-                <h3>DLock Data</h3>
-                <hr/>
-                <Form>
-                    <Form.Input
-                        fluid
-                        required
-                        label="Select DLock file"
-                        type="file"
-                    />
-                    <Form.Button onClick={this.props.uploadDoorLockData}>Upload</Form.Button>
-                </Form>
-            </Container>
-        );
-    }
+function UploadDLockData() {
+    return (
+        <Container>
+            <MainMenu/>
+            <h3>DLock Data</h3>
+            <hr/>
+            <Form>
+                <FileUpload/>
+            </Form>
+            <UploadResults/>
+        </Container>
+    );
 }
 
-const mapStateToProps = (state) => ({
-
-});
-
-const mapDispatchToProps = (dispatch) => ({
-    uploadDoorLockData: () => uploadDoorLockData(dispatch),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(UploadDLockData);
+export default UploadDLockData;