convert uploadmanuscript to statefull componet add state to handle complete of upload

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

-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