diff --git a/packages/component-dashboard/src/components/UploadManuscript.js b/packages/component-dashboard/src/components/UploadManuscript.js index 9568b6c1b72ae8d15d73795eb92f6a87e349d318..d7c195941d584c50345f4db32ba8319721fb9ee6 100644 --- a/packages/component-dashboard/src/components/UploadManuscript.js +++ b/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> diff --git a/packages/component-dashboard/src/redux/conversion.js b/packages/component-dashboard/src/redux/conversion.js index f28d7b5ed77d41eac90a6ba3bd41acf36702791f..7b2563a56b40784f550a8ca44e77a7e40a0b0f73 100644 --- a/packages/component-dashboard/src/redux/conversion.js +++ b/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, }