Merge pull request #89 from which-ecosystem/bugs

Bug fixes

4 files changed, 17 insertions, 9 deletions

diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx
index 1898716..716736f 100644
--- a/src/components/Image/Image.tsx
+++ b/src/components/Image/Image.tsx
@@ -15,6 +15,9 @@ interface PropTypes {
 type Status = 'success' | 'loading' | 'error';
 
 const useStyles = makeStyles(theme => ({
+  image: {
+    imageOrientation: 'from-image'
+  },
   container: {
     width: '100%',
     height: '100%',
@@ -71,7 +74,7 @@ const Image: React.FC<PropTypes> = React.memo(({
     <img
       src={src}
       alt={alt}
-      className={`${className} ${classes[status]}`}
+      className={`${classes.image} ${classes[status]} ${className}`}
       style={{ transition }}
       onLoad={handleLoad}
       onError={handleError}
diff --git a/src/components/PollsList/RenderItem.tsx b/src/components/PollsList/RenderItem.tsx
index 5123bca..beed259 100644
--- a/src/components/PollsList/RenderItem.tsx
+++ b/src/components/PollsList/RenderItem.tsx
@@ -35,7 +35,7 @@ const RenderItem: React.FC<PropTypes> = React.memo(({
   }, [mutate, index, polls]);
 
   return (
-    <div key={_key} style={style}>
+    <div key={`${_key}-${poll._id}`} style={style}>
       <PollCard poll={poll} setPoll={setPoll} />
     </div>
   );
diff --git a/src/containers/PollCreation/PollCreation.tsx b/src/containers/PollCreation/PollCreation.tsx
index 107314a..489c12a 100644
--- a/src/containers/PollCreation/PollCreation.tsx
+++ b/src/containers/PollCreation/PollCreation.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import Bluebird from 'bluebird';
 import { useHistory } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
 import {
@@ -49,21 +50,22 @@ const PollCreation: React.FC = () => {
   } = useS3Preupload();
 
   const handleClick = async () => {
-    if (isLeftReady && isRightReady) {
-      const [leftUrl, rightUrl] = await Promise.all([resolveLeft(), resolveRight()]);
+    try {
+      const [leftUrl, rightUrl] = await Bluebird.all([resolveLeft(), resolveRight()]);
 
       const contents = {
         left: { url: leftUrl },
         right: { url: rightUrl }
       };
 
+      history.push('/feed');
+
       post('/polls/', { contents }).then(() => {
         updateFeed();
-        enqueueSnackbar('Your poll has been successfully created!', {
-          variant: 'success'
-        });
+        enqueueSnackbar('Your poll has been successfully created!', { variant: 'success' });
       });
-
+    } catch (error) {
+      enqueueSnackbar('Failed to create a poll. Please, try again.', { variant: 'error' });
       history.push('/feed');
     }
   };
diff --git a/src/hooks/useS3Preupload.tsx b/src/hooks/useS3Preupload.tsx
index 3c98e9a..3545cd5 100644
--- a/src/hooks/useS3Preupload.tsx
+++ b/src/hooks/useS3Preupload.tsx
@@ -33,7 +33,8 @@ export default (): Hook => {
   }, [setUrl, setFile]);
 
   const handleUploadProgress = useCallback((progressEvent: ProgressEvent): void => {
-    setProgress(Math.round((progressEvent.loaded * 100) / progressEvent.total));
+    // Only allow upload progress reach 95%, and set 100% when request is resolved
+    setProgress(Math.round((progressEvent.loaded * 95) / progressEvent.total));
   }, [setProgress]);
 
   const resolve = useCallback(async (): Promise<string> => {
@@ -43,10 +44,12 @@ export default (): Hook => {
         onUploadProgress: handleUploadProgress
       };
 
+      setProgress(0.01);
       return get('/files')
         .then(response => response.data)
         .then(uploadUrl => axios.put(uploadUrl, file, config))
         .then(response => {
+          setProgress(100);
           const uri = response.config.url;
           return uri ? uri.slice(0, uri.indexOf('?')) : '';
         });