display upload errors, unknown members

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

@@ -31,6 +31,7 @@ class FileUpload extends Component {
     };
 
     render() {
+        const { pending } = this.props;
         return (
             <div>
                 <Form.Input
@@ -41,14 +42,18 @@ class FileUpload extends Component {
                     accept=".csv"
                     onChange={this.onFileChange}
                 />
-                <Form.Button onClick={this.onUploadClick}>Upload</Form.Button>
+                <Form.Button onClick={this.onUploadClick} disabled={pending} >Upload</Form.Button>
             </div>
         );
     }
 }
 
+const mapStateToProps = (state) => ({
+    pending: state.doorLockData.pending,
+});
+
 const mapDispatchToProps = (dispatch) => ({
     uploadDoorLockData: (doorLockDataFile) => uploadDoorLockData(dispatch, doorLockDataFile)
 });
 
-export default connect(null, mapDispatchToProps)(FileUpload);
+export default connect(mapStateToProps, mapDispatchToProps)(FileUpload);

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

@@ -1,13 +1,58 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { Loader, Message } from 'semantic-ui-react';
+import { Loader, Message, Tab, Label, Menu } 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;
+        const parsedEntries = result && result.parsedData ? result.parsedData : [];
+        const errorEntries = result && result.parserErrors ? result.parserErrors : [];
+        const unknownMembers = result && result.unknownMembers ? result.unknownMembers : [];
+
+        const renderParsedEntriesTab = () => {
+            return (
+                <div>
+                    <br/>
+                    <Message positive>
+                        <p>{parsedEntries.length} entries successfully parsed</p>
+                    </Message>
+                </div>
+            );
+        };
+
+        const renderErrorTabResults = (results) => {
+            return (
+                <div>
+                    <br/>
+                    {
+                        results.map((entry, index) => {
+                            return (
+                                <div key={`error-${entry.error}-${index}`}>
+                                    <br/>
+                                    <Message negative>
+                                        <Message.Header>{entry.error}</Message.Header>
+                                        <p>{JSON.stringify(entry.details)}</p>
+                                        <p>File : {entry.file}</p>
+                                    </Message>
+                                </div>
+                            );
+                        })
+                    }
+                </div>
+            );
+        };
+
+        const parsedEntriesTabTitle = (<Menu.Item key="parsed-entries">Parsed Entries<Label>{parsedEntries.length}</Label></Menu.Item>);
+        const errorEntriesTabTitle = (<Menu.Item key="error-entries">Error Entries<Label>{errorEntries.length}</Label></Menu.Item>);
+        const unknownMembersTabTitle = (<Menu.Item key="unknown-members">Unknown Members<Label>{unknownMembers.length}</Label></Menu.Item>);
+
+        const panes = [
+            {menuItem: parsedEntriesTabTitle, render: renderParsedEntriesTab},
+            {menuItem: errorEntriesTabTitle, render: () => renderErrorTabResults(errorEntries)},
+            {menuItem: unknownMembersTabTitle, render: () => renderErrorTabResults(unknownMembers)}
+        ];
+
 
         return (
             <div>
@@ -16,36 +61,16 @@ class UploadResults extends Component {
             }
             <br/>
             {
-                error &&
-                <Message negative>
-                    <Message.Header>Upload failed</Message.Header>
-                    <p>There was error uploading file</p>
-                </Message>
+                !pending && !error && result &&
+                <Tab panes={panes}/>
             }
-            <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>}
+                !pending && error &&
+                <Message>
+                    <Message.Header>Upload Failed</Message.Header>
+                    <p>{error.data}</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>
         )
     }

client/src/store/reducers/doorLockReducers.js

@@ -6,7 +6,7 @@ import {
 
 const initialState = {
     pending: false,
-    result: {},
+    result: null,
     error: null,
 };