aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package-lock.json2
-rw-r--r--package.json2
-rw-r--r--src/containers/Page/Page.tsx6
-rw-r--r--src/containers/PollCreation/ImageInput.tsx (renamed from src/containers/PollCreation/PollCreationImage.tsx)14
-rw-r--r--src/containers/PollCreation/PollCreation.tsx33
-rw-r--r--src/containers/PollCreation/types.ts7
-rw-r--r--src/hooks/useS3Preupload.tsx39
7 files changed, 58 insertions, 45 deletions
diff --git a/package-lock.json b/package-lock.json
index c01707b..d0b962b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "which",
- "version": "1.1.0",
+ "version": "1.2.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index a18e64d..c2d414f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "which",
- "version": "1.1.0",
+ "version": "1.2.0",
"homepage": "https://which-ecosystem.github.io/",
"dependencies": {
"@material-ui/core": "^4.10.1",
diff --git a/src/containers/Page/Page.tsx b/src/containers/Page/Page.tsx
index c876dae..023d86e 100644
--- a/src/containers/Page/Page.tsx
+++ b/src/containers/Page/Page.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect } from 'react';
+import React, { Suspense, useEffect } from 'react';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { useMediaQuery } from '@material-ui/core';
import { SnackbarProvider } from 'notistack';
@@ -17,7 +17,7 @@ const PollCreation = React.lazy(() => import('../PollCreation/PollCreation'));
const useStyles = makeStyles(theme => ({
root: {
[theme.breakpoints.down('sm')]: {
- margin: theme.spacing(12, 0, 12, 0)
+ margin: theme.spacing(10, 0, 12, 0)
},
[theme.breakpoints.up('md')]: {
margin: theme.spacing(15, 5, 8, 5)
@@ -36,7 +36,7 @@ const Page: React.FC = () => {
return history.listen(() => {
window.scrollTo(0, 0);
});
- }, [history])
+ }, [history]);
return (
<SnackbarProvider
diff --git a/src/containers/PollCreation/PollCreationImage.tsx b/src/containers/PollCreation/ImageInput.tsx
index d619a8e..cc60478 100644
--- a/src/containers/PollCreation/PollCreationImage.tsx
+++ b/src/containers/PollCreation/ImageInput.tsx
@@ -44,7 +44,7 @@ const useStyles = makeStyles({
transitionDuration: '0.5s'
},
invisible: {
- backgroundColor: 'rgba(0, 0, 0, 0)',
+ backgroundColor: 'rgba(0, 0, 0, 0)'
},
icon: {
color: 'white'
@@ -52,7 +52,7 @@ const useStyles = makeStyles({
});
-const PollCreationImage: React.FC<PropTypes> = ({ callback, progress }) => {
+const ImageInput: React.FC<PropTypes> = ({ callback, progress }) => {
const classes = useStyles();
const [url, setUrl] = useState<string>();
@@ -80,10 +80,10 @@ const PollCreationImage: React.FC<PropTypes> = ({ callback, progress }) => {
<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" />
+ ? progress < 100
+ ? <CircularProgress variant="static" value={progress} className={classes.icon} />
+ : <Check className={classes.icon} fontSize="large" />
+ : <CancelOutlined className={classes.icon} fontSize="large" />
}
</div>
</CardMedia>
@@ -93,4 +93,4 @@ const PollCreationImage: React.FC<PropTypes> = ({ callback, progress }) => {
return url ? Media : Upload;
};
-export default PollCreationImage;
+export default ImageInput;
diff --git a/src/containers/PollCreation/PollCreation.tsx b/src/containers/PollCreation/PollCreation.tsx
index e350179..107314a 100644
--- a/src/containers/PollCreation/PollCreation.tsx
+++ b/src/containers/PollCreation/PollCreation.tsx
@@ -5,11 +5,12 @@ import {
Button,
Card,
Divider,
- Container
+ Container,
+ LinearProgress
} from '@material-ui/core';
import { useSnackbar } from 'notistack';
-import PollCreationImage from './PollCreationImage';
+import ImageInput from './ImageInput';
import UserStrip from '../../components/UserStrip/UserStrip';
import { post } from '../../requests';
import { useAuth } from '../../hooks/useAuth';
@@ -73,18 +74,24 @@ const PollCreation: React.FC = () => {
{user && <UserStrip user={user} info="" />}
<Divider />
<div className={classes.images}>
- <PollCreationImage callback={setLeft} progress={progressLeft} />
- <PollCreationImage callback={setRight} progress={progressRight} />
+ <ImageInput callback={setLeft} progress={progressLeft} />
+ <ImageInput callback={setRight} progress={progressRight} />
</div>
- <Button
- color="primary"
- disabled={!(isLeftReady && isRightReady) || Boolean(progressLeft || progressRight)}
- variant="contained"
- onClick={handleClick}
- fullWidth
- >
- {(progressLeft || progressRight) ? 'Waiting for upload' : 'Submit'}
- </Button>
+ {
+ progressLeft || progressRight
+ ? <LinearProgress color="primary" />
+ : (
+ <Button
+ color="primary"
+ disabled={!(isLeftReady && isRightReady)}
+ variant="contained"
+ onClick={handleClick}
+ fullWidth
+ >
+ Submit
+ </Button>
+ )
+ }
</Card>
</Container>
);
diff --git a/src/containers/PollCreation/types.ts b/src/containers/PollCreation/types.ts
deleted file mode 100644
index 24ace4e..0000000
--- a/src/containers/PollCreation/types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export interface ImageData {
- url: string;
-}
-export interface Contents {
- left: ImageData;
- right: ImageData;
-}
diff --git a/src/hooks/useS3Preupload.tsx b/src/hooks/useS3Preupload.tsx
index 64db942..3c98e9a 100644
--- a/src/hooks/useS3Preupload.tsx
+++ b/src/hooks/useS3Preupload.tsx
@@ -1,19 +1,28 @@
import { useState, useCallback, useMemo } from 'react';
-import { get } from '../requests';
import axios from 'axios';
+import { get } from '../requests';
+
+
+interface ProgressEvent {
+ loaded: number;
+ total: number;
+}
+interface Hook {
+ setValue: (value: File | string | undefined) => void;
+ isReady: boolean;
+ resolve: () => Promise<string>;
+ progress: number;
+}
-export default () => {
+export default (): Hook => {
const [url, setUrl] = useState<string>();
const [file, setFile] = useState<File>();
const [progress, setProgress] = useState<number>(0);
const isReady = useMemo(() => Boolean(file || url), [file, url]);
-
- console.log({ file, url })
-
- const setValue = useCallback((value: File | string | undefined): void => {
+ const setValue: Hook['setValue'] = useCallback(value => {
if (value instanceof File) {
setFile(value);
setUrl(undefined);
@@ -23,7 +32,7 @@ export default () => {
}
}, [setUrl, setFile]);
- const handleUploadProgress = useCallback((progressEvent: any) => {
+ const handleUploadProgress = useCallback((progressEvent: ProgressEvent): void => {
setProgress(Math.round((progressEvent.loaded * 100) / progressEvent.total));
}, [setProgress]);
@@ -38,14 +47,18 @@ export default () => {
.then(response => response.data)
.then(uploadUrl => axios.put(uploadUrl, file, config))
.then(response => {
- const { config: { url } } = response;
- return url ? url.slice(0, url.indexOf('?')) : '';
+ const uri = response.config.url;
+ return uri ? uri.slice(0, uri.indexOf('?')) : '';
});
- } else {
- setProgress(100);
- return url || '';
}
+ setProgress(100);
+ return url || '';
}, [file, handleUploadProgress, url]);
- return { setValue, isReady, resolve, progress };
+ return {
+ setValue,
+ isReady,
+ resolve,
+ progress
+ };
};
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-23 05:09:17 +0000