From e2bf7240095318646e694deef485a0d9ff6fbd25 Mon Sep 17 00:00:00 2001
From: Giannis Kopanas <jkopanas@gmail.com>
Date: Wed, 10 Jan 2018 15:59:59 +0200
Subject: [PATCH] convert uploadmanuscript to statefull componet add state to
handle complete of upload
---
.../src/components/UploadManuscript.js | 88 ++++++++++++-------
1 file changed, 56 insertions(+), 32 deletions(-)
diff --git a/packages/component-dashboard/src/components/UploadManuscript.js b/packages/component-dashboard/src/components/UploadManuscript.js
index 0c66d43e0..23ef788fd 100644
--- a/packages/component-dashboard/src/components/UploadManuscript.js
+++ b/packages/component-dashboard/src/components/UploadManuscript.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Component } from 'react'
import Dropzone from 'react-dropzone'
import classnames from 'classnames'
import { Icon } from '@pubsweet/ui'
@@ -7,39 +7,63 @@ import classes from './UploadManuscript.local.scss'
const isIdle = conversion =>
!(conversion.converting || conversion.complete || conversion.error)
-const UploadManuscript = ({ uploadManuscript, conversion }) => (
- <Dropzone
- accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
- className={classes.dropzone}
- onDrop={uploadManuscript}
- >
- <div className={classes.root}>
- <div
- className={classnames({
- [classes.idle]: isIdle(conversion),
- [classes.converting]: conversion.converting,
- [classes.error]: conversion.error,
- [classes.complete]: conversion.complete,
- })}
+class UploadManuscript extends Component {
+ constructor(props) {
+ super(props)
+ this.state = {
+ complete: props.conversion.complete,
+ }
+ }
+
+ componentDidMount() {
+ if (this.state.complete === true) {
+ setTimeout(() => {
+ this.setState({
+ complete: false,
+ })
+ }, 3000)
+ }
+ }
+
+ render() {
+ const { uploadManuscript, conversion } = this.props
+ return (
+ <Dropzone
+ accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+ className={classes.dropzone}
+ onDrop={uploadManuscript}
>
- <span className={classes.icon}>
- <Icon color="var(--color-primary)">
- {conversion.complete ? 'check_circle' : 'plus_circle'}
- </Icon>
- </span>
- </div>
+ <div className={classes.root}>
+ <div
+ className={classnames({
+ [classes.idle]: isIdle(conversion),
+ [classes.converting]: conversion.converting,
+ [classes.error]: conversion.error,
+ [classes.complete]: conversion.complete,
+ })}
+ >
+ <span className={classes.icon}>
+ <Icon color="var(--color-primary)">
+ {this.state.complete ? 'check_circle' : 'plus_circle'}
+ </Icon>
+ </span>
+ </div>
- <div className={classes.main}>
- {conversion.error ? (
- <div className={classes.error}>{conversion.error.message}</div>
- ) : (
- <div className={classes.info}>
- {conversion.complete ? 'Submission created' : 'Create submission'}
+ <div className={classes.main}>
+ {conversion.error ? (
+ <div className={classes.error}>{conversion.error.message}</div>
+ ) : (
+ <div className={classes.info}>
+ {this.state.complete
+ ? 'Submission created'
+ : 'Create submission'}
+ </div>
+ )}
</div>
- )}
- </div>
- </div>
- </Dropzone>
-)
+ </div>
+ </Dropzone>
+ )
+ }
+}
export default UploadManuscript
--
GitLab