changing redux actions and states of uploading manuscript

packages/component-dashboard/src/components/UploadManuscript.js

@@ -4,23 +4,45 @@ import classnames from 'classnames'
 import { Icon } from '@pubsweet/ui'
 import classes from './UploadManuscript.local.scss'
 
-const isIdle = conversion =>
-  !(conversion.converting || conversion.complete || conversion.error)
+const isIdle = conversion => !(conversion.converting || conversion.error)
 
 class UploadManuscript extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      complete: props.conversion.complete,
+      completed: false,
+      error: false,
     }
+    this.showErrorAndHide = this.showErrorAndHide.bind(this)
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.conversion.complete === true) {
+    if (
+      this.props.conversion.converting !== nextProps.conversion.converting &&
+      this.props.conversion.converting === true
+    ) {
       this.setState({
-        complete: true,
+        completed: true,
+        error: false,
       })
     }
+
+    if (nextProps.conversion.error !== undefined) {
+      this.showErrorAndHide()
+    }
+  }
+
+  showErrorAndHide() {
+    this.setState({
+      error: true,
+      completed: false,
+    })
+    setTimeout(() => {
+      this.setState({
+        error: false,
+        completed: false,
+      })
+    }, 3000)
   }
 
   render() {
@@ -36,23 +58,22 @@ class UploadManuscript extends Component {
             className={classnames({
               [classes.idle]: isIdle(conversion),
               [classes.converting]: conversion.converting,
-              [classes.error]: conversion.error,
-              [classes.complete]: conversion.complete,
+              [classes.error]: this.state.error,
             })}
           >
             <span className={classes.icon}>
               <Icon color="var(--color-primary)">
-                {this.state.complete ? 'check_circle' : 'plus_circle'}
+                {this.state.completed ? 'check_circle' : 'plus_circle'}
               </Icon>
             </span>
           </div>
 
           <div className={classes.main}>
-            {conversion.error ? (
+            {this.state.error ? (
               <div className={classes.error}>{conversion.error.message}</div>
             ) : (
               <div className={classes.info}>
-                {this.state.complete
+                {this.state.completed
                   ? 'Submission created'
                   : 'Create submission'}
               </div>

packages/component-dashboard/src/redux/conversion.js

@@ -8,7 +8,6 @@ import { generateTitle, extractTitle } from '../lib/title'
 export const UPLOAD_MANUSCRIPT_REQUEST = 'UPLOAD_MANUSCRIPT_REQUEST'
 export const UPLOAD_MANUSCRIPT_SUCCESS = 'UPLOAD_MANUSCRIPT_SUCCESS'
 export const UPLOAD_MANUSCRIPT_FAILURE = 'UPLOAD_MANUSCRIPT_FAILURE'
-export const INITIAL_MANUSCRIPT = 'INITIAL_MANUSCRIPT'
 
 /* actions */
 
@@ -40,6 +39,11 @@ export const uploadManuscript = (acceptedFiles, history) => dispatch => {
 
   request.addEventListener('load', event => {
     if (request.status >= 400) {
+      dispatch(
+        uploadManuscriptFailure({
+          message: 'There was an error uploading the file',
+        }),
+      )
       throw new Error('There was an error uploading the file')
     }
 
@@ -88,9 +92,6 @@ export const uploadManuscript = (acceptedFiles, history) => dispatch => {
               }/submit`
               // redirect after a short delay
               window.setTimeout(() => {
-                dispatch({
-                  type: INITIAL_MANUSCRIPT,
-                })
                 history.push(route)
               }, 2000)
             })
@@ -98,7 +99,6 @@ export const uploadManuscript = (acceptedFiles, history) => dispatch => {
         )
       })
       .catch(error => {
-        console.error(error)
         dispatch(uploadManuscriptFailure(error))
         throw error // rethrow
       })
@@ -108,35 +108,26 @@ export const uploadManuscript = (acceptedFiles, history) => dispatch => {
 /* reducer */
 
 const initialState = {
-  complete: false,
   converting: false,
-  error: false,
+  error: undefined,
 }
 
 export default (state = initialState, action) => {
   switch (action.type) {
     case UPLOAD_MANUSCRIPT_REQUEST:
       return {
-        complete: false,
         converting: true,
         error: undefined,
       }
 
-    case INITIAL_MANUSCRIPT:
-      return {
-        complete: false,
-        converting: false,
-      }
-
     case UPLOAD_MANUSCRIPT_SUCCESS:
       return {
-        complete: true,
         converting: false,
+        error: undefined,
       }
 
     case UPLOAD_MANUSCRIPT_FAILURE:
       return {
-        complete: false,
         converting: false,
         error: action.error,
       }