diff options
| -rw-r--r-- | package-lock.json | 8 | ||||
| -rw-r--r-- | package.json | 4 | ||||
| -rw-r--r-- | src/components/Image/Image.tsx | 5 | ||||
| -rw-r--r-- | src/components/PollsList/RenderItem.tsx | 2 | ||||
| -rw-r--r-- | src/containers/PollCreation/PollCreation.tsx | 14 | ||||
| -rw-r--r-- | src/hooks/useS3Preupload.tsx | 5 |
6 files changed, 27 insertions, 11 deletions
diff --git a/package-lock.json b/package-lock.json index 4ec8cee..d904501 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "which", - "version": "1.2.2", + "version": "1.2.3", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1607,6 +1607,12 @@ "@babel/types": "^7.3.0" } }, + "@types/bluebird": { + "version": "3.5.32", + "resolved": "https://registry.npmjs.org/@types/bluebird/-/bluebird-3.5.32.tgz", + "integrity": "sha512-dIOxFfI0C+jz89g6lQ+TqhGgPQ0MxSnh/E4xuC0blhFtyW269+mPG5QeLgbdwst/LvdP8o1y0o/Gz5EHXLec/g==", + "dev": true + }, "@types/color-name": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz", diff --git a/package.json b/package.json index 7375c36..8d8843a 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,13 @@ { "name": "which", - "version": "1.2.2", + "version": "1.2.3", "homepage": "https://which-ecosystem.github.io/", "dependencies": { "@material-ui/core": "^4.10.1", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.56", "axios": "^0.19.2", + "bluebird": "^3.7.2", "lodash": "^4.17.15", "notistack": "^0.9.17", "react": "^16.13.1", @@ -41,6 +42,7 @@ ] }, "devDependencies": { + "@types/bluebird": "^3.5.32", "@types/lodash": "^4.14.157", "@types/node": "^12.12.44", "@types/react": "^16.9.35", 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('?')) : ''; }); |