feat: show upload progress

3 files changed, 37 insertions, 10 deletions

diff --git a/src/containers/PollCreation/PollCreation.tsx b/src/containers/PollCreation/PollCreation.tsx
index e613afd..e350179 100644
--- a/src/containers/PollCreation/PollCreation.tsx
+++ b/src/containers/PollCreation/PollCreation.tsx
@@ -73,17 +73,17 @@ const PollCreation: React.FC = () => {
         {user && <UserStrip user={user} info="" />}
         <Divider />
         <div className={classes.images}>
-          <PollCreationImage callback={setLeft} />
-          <PollCreationImage callback={setRight} />
+          <PollCreationImage callback={setLeft} progress={progressLeft} />
+          <PollCreationImage callback={setRight} progress={progressRight} />
         </div>
         <Button
           color="primary"
-          disabled={!(isLeftReady && isRightReady)}
+          disabled={!(isLeftReady && isRightReady) || Boolean(progressLeft || progressRight)}
           variant="contained"
           onClick={handleClick}
           fullWidth
         >
-          Submit
+          {(progressLeft || progressRight) ? 'Waiting for upload' : 'Submit'}
         </Button>
       </Card>
     </Container>
diff --git a/src/containers/PollCreation/PollCreationImage.tsx b/src/containers/PollCreation/PollCreationImage.tsx
index 1200b11..d619a8e 100644
--- a/src/containers/PollCreation/PollCreationImage.tsx
+++ b/src/containers/PollCreation/PollCreationImage.tsx
@@ -3,15 +3,17 @@ import { makeStyles } from '@material-ui/core/styles';
 import {
   CardActionArea,
   CardMedia,
-  Typography
+  Typography,
+  CircularProgress
 } from '@material-ui/core';
-import ClearIcon from '@material-ui/icons/CancelOutlined';
+import { Check, CancelOutlined } from '@material-ui/icons';
 
 import AttachLink from '../../components/AttachLink/AttachLink';
 import FileUpload from '../../components/FileUpload/FileUpload';
 
 interface PropTypes {
   callback: (file?: File | string) => void;
+  progress?: number;
 }
 
 const useStyles = makeStyles({
@@ -32,11 +34,25 @@ const useStyles = makeStyles({
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center'
+  },
+  darkOverlay: {
+    backgroundColor: 'rgba(0, 0, 0, 0.45)',
+    color: 'white',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    transitionDuration: '0.5s'
+  },
+  invisible: {
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+  },
+  icon: {
+    color: 'white'
   }
 });
 
 
-const PollCreationImage: React.FC<PropTypes> = ({ callback }) => {
+const PollCreationImage: React.FC<PropTypes> = ({ callback, progress }) => {
   const classes = useStyles();
   const [url, setUrl] = useState<string>();
 
@@ -59,9 +75,17 @@ const PollCreationImage: React.FC<PropTypes> = ({ callback }) => {
   );
 
   const Media = (
-    <CardActionArea onClick={handleClear} className={classes.root}>
+    <CardActionArea onClick={handleClear} className={classes.root} disabled={Boolean(progress)}>
       <CardMedia image={url} className={classes.media}>
-        <ClearIcon className={classes.clearIcon} />
+        <div className={`${classes.media} ${classes.darkOverlay} ${progress === 100 && classes.invisible}`}>
+          {
+            progress
+            ? progress < 100
+              ? <CircularProgress variant="static" value={progress} className={classes.icon} />
+              : <Check className={classes.icon} fontSize="large" />
+            : <CancelOutlined className={classes.icon} fontSize="large" />
+          }
+        </div>
       </CardMedia>
     </CardActionArea>
   );
diff --git a/src/hooks/useS3Preupload.tsx b/src/hooks/useS3Preupload.tsx
index aeb1d65..64db942 100644
--- a/src/hooks/useS3Preupload.tsx
+++ b/src/hooks/useS3Preupload.tsx
@@ -41,7 +41,10 @@ export default () => {
           const { config: { url } } = response;
           return url ? url.slice(0, url.indexOf('?')) : '';
         });
-    } else return url || '';
+    } else {
+      setProgress(100);
+      return url || '';
+    }
   }, [file, handleUploadProgress, url]);
 
   return { setValue, isReady, resolve, progress };