Add processing for upload dlock

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

@@ -4,7 +4,7 @@ import { Form } from 'semantic-ui-react';
 
 import UnknownMapping from './UnknownMapping';
 
-import { uploadDoorLockData, fetchMappings } from '../../../store/actions';
+import { uploadDoorLockData, fetchMappings, checkProcessing } from '../../../store/actions';
 
 class FileUpload extends Component {
     constructor(props) {
@@ -20,8 +20,9 @@ class FileUpload extends Component {
     }
 
     componentDidMount() {
-        const { fetchMappings } = this.props;
+        const { fetchMappings, checkProcessing } = this.props;
         fetchMappings();
+        checkProcessing();
     }
 
     componentWillReceiveProps(nextProps, nextContext) {
@@ -36,6 +37,7 @@ class FileUpload extends Component {
         this.setState({unknownMappings: filteredUnknownMappings});
     }
 
+
     extractMappingFromFileName(fileName) {
         const contentBetweenBracketsRegex = /\[(.*?)\]/;
         const rawContent = fileName.match(contentBetweenBracketsRegex)[1];
@@ -52,7 +54,11 @@ class FileUpload extends Component {
 
         const { existingMappings } = mappings;
 
-        return existingMappings.find(mapping => (mapping.officeSlug === officeSlug) && (mapping.resourceSlug === resourceSlug));
+        if (existingMappings && Array.isArray(existingMappings)){
+            return existingMappings.find(mapping => (mapping.officeSlug === officeSlug) && (mapping.resourceSlug === resourceSlug));
+        }else{
+            return false;
+        }
     }
 
     onFileChange(event) {
@@ -85,14 +91,24 @@ class FileUpload extends Component {
         }
     };
 
+    refreshProcessingStatus = (event) => {
+        event.preventDefault();
+        const { checkProcessing } = this.props;
+        checkProcessing();
+    };
+
     render() {
-        const { pendingUpload } = this.props;
+        const { pendingUpload, pendingStatus, processingStatus } = this.props;
         const { unknownMappings, files } = this.state;
 
-        const uploadDisabled = pendingUpload || unknownMappings.length > 0 || !files;
+        const processing = processingStatus && processingStatus.processing ? processingStatus.processing : false;
+
+        const uploadDisabled = pendingStatus || processing || pendingUpload || unknownMappings.length > 0 || !files;
 
         return (
             <div>
+                {processing && <p style={{ color: 'red' }}>Processing in progress. Please try again in a few minutes</p>}
+                {processing && <Form.Button onClick={this.refreshProcessingStatus}>Refresh</Form.Button>}
                 <Form.Input
                     fluid
                     required
@@ -121,11 +137,14 @@ const mapStateToProps = (state) => ({
     pendingMappings: state.mappingsData.pending,
     mappings: state.mappingsData.result,
     addedMapping: state.addMapping.result,
+    pendingStatus: state.checkProcessing.pending,
+    processingStatus: state.checkProcessing.result,
 });
 
 const mapDispatchToProps = (dispatch) => ({
     uploadDoorLockData: (doorLockDataFiles) => uploadDoorLockData(dispatch, doorLockDataFiles),
     fetchMappings: () => fetchMappings(dispatch),
+    checkProcessing: () => checkProcessing(dispatch),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(FileUpload);

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

@@ -2,7 +2,20 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { Loader, Message, Tab, Label, Menu } from 'semantic-ui-react';
 
+import { checkProcessing } from '../../../store/actions';
+
 class UploadResults extends Component {
+
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        const previousPending = prevProps.pending ? prevProps.pending : false;
+        const newPending = this.props.pending ? this.props.pending : false;
+
+        if (previousPending && !newPending){
+            const { checkProcessing } = this.props;
+            checkProcessing();
+        }
+    }
+
     render(){
         const {pending, result, error} = this.props;
 
@@ -80,7 +93,10 @@ const mapStateToProps = (state) => ({
     pending: state.doorLockData.pending,
     result: state.doorLockData.result,
     error: state.doorLockData.error,
-
 });
 
-export default connect(mapStateToProps)(UploadResults);
+const mapDispatchToProps = (dispatch) => ({
+    checkProcessing: () => checkProcessing(dispatch),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(UploadResults);