aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authoreug-vs <eug-vs@keemail.me>2020-08-22 14:16:36 +0300
committereug-vs <eug-vs@keemail.me>2020-08-22 14:16:36 +0300
commit66e1dfd1b726aa465969d0b7d028db8b0dfa1d0e (patch)
tree5ca16294d065cb03aad357f65f2995c842ab8df4
parent668c9f4841e7118b98bb31d8e68640689be99830 (diff)
downloadwhich-ui-66e1dfd1b726aa465969d0b7d028db8b0dfa1d0e.tar.gz
fix: resolve eslint errors
-rw-r--r--src/containers/PollCreation/PollCreation.tsx23
-rw-r--r--src/containers/PollCreation/useS3Preupload.ts35
-rw-r--r--src/utils/uploadFileToS3.ts20
3 files changed, 30 insertions, 48 deletions
diff --git a/src/containers/PollCreation/PollCreation.tsx b/src/containers/PollCreation/PollCreation.tsx
index 87bdcf7..ecc6757 100644
--- a/src/containers/PollCreation/PollCreation.tsx
+++ b/src/containers/PollCreation/PollCreation.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable */
import React from 'react';
import Bluebird from 'bluebird';
import { useHistory } from 'react-router-dom';
@@ -38,23 +37,21 @@ const PollCreation: React.FC = () => {
const { user } = useAuth();
const { mutate: updateFeed } = useFeed();
const {
- setValue: setLeft,
- progress: progressLeft,
+ file: left,
+ setFile: setLeft,
resolve: resolveLeft,
- isReady: isLeftReady
+ progress: leftProgress
} = useS3Preupload();
const {
- setValue: setRight,
- progress: progressRight,
+ file: right,
+ setFile: setRight,
resolve: resolveRight,
- isReady: isRightReady
+ progress: rightProgress
} = useS3Preupload();
const handleClick = async () => {
try {
const [leftUrl, rightUrl] = await Bluebird.all([resolveLeft(), resolveRight()]);
- console.log('leftUrl', leftUrl);
- console.log('rightUrl', rightUrl);
const contents = {
left: { url: leftUrl },
@@ -79,16 +76,16 @@ const PollCreation: React.FC = () => {
{user && <UserStrip user={user} info="" />}
<Divider />
<div className={classes.images}>
- <ImageInput callback={setLeft} progress={progressLeft} />
- <ImageInput callback={setRight} progress={progressRight} />
+ <ImageInput callback={setLeft} progress={leftProgress} />
+ <ImageInput callback={setRight} progress={rightProgress} />
</div>
{
- progressLeft || progressRight
+ leftProgress || rightProgress
? <LinearProgress color="primary" />
: (
<Button
color="primary"
- disabled={!(isLeftReady && isRightReady)}
+ disabled={!(left && right)}
variant="contained"
onClick={handleClick}
fullWidth
diff --git a/src/containers/PollCreation/useS3Preupload.ts b/src/containers/PollCreation/useS3Preupload.ts
index ef3a408..0e2a8c4 100644
--- a/src/containers/PollCreation/useS3Preupload.ts
+++ b/src/containers/PollCreation/useS3Preupload.ts
@@ -1,39 +1,28 @@
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback } from 'react';
import uploadFileToS3 from '../../utils/uploadFileToS3';
-
interface Hook {
- setValue: (value: File | string | undefined) => void;
- isReady: boolean;
+ file: File | string | undefined;
+ setFile: (value: File | string | undefined) => void;
resolve: () => Promise<string>;
progress: number;
}
export default (): Hook => {
- const [url, setUrl] = useState<string>();
- const [file, setFile] = useState<File>();
+ const [file, setFile] = useState<File | string>();
const [progress, setProgress] = useState<number>(0);
- const isReady = useMemo(() => Boolean(file || url), [file, url]);
-
- const setValue: Hook['setValue'] = useCallback(value => {
- if (value instanceof File) {
- setFile(value);
- setUrl(undefined);
- } else {
- setUrl(value);
- setFile(undefined);
- }
- }, [setUrl, setFile]);
-
const resolve = useCallback(async (quality?: number): Promise<string> => {
- if (file) return uploadFileToS3(file, quality, setProgress);
- return url || '';
- }, [file, url]);
+ // Indicate start
+ setProgress(0.01);
+
+ if (file instanceof File) return uploadFileToS3(file, quality, setProgress);
+ return file || '';
+ }, [file]);
return {
- setValue,
- isReady,
+ file,
+ setFile,
resolve,
progress
};
diff --git a/src/utils/uploadFileToS3.ts b/src/utils/uploadFileToS3.ts
index de1b1aa..d91dac5 100644
--- a/src/utils/uploadFileToS3.ts
+++ b/src/utils/uploadFileToS3.ts
@@ -8,10 +8,13 @@ interface ProgressEvent {
total: number;
}
+type SetProgress = (progress: number) => void;
+
+
const compressFile = (file: File, quality = 0.6): Promise<File | Blob> => {
return new Promise((resolve, reject) => {
- if (quality === 1) resolve(file);
- else return new Compressor(file, {
+ if (quality === 1) return resolve(file);
+ return new Compressor(file, {
success: result => resolve(result),
error: err => reject(err),
quality
@@ -19,16 +22,12 @@ const compressFile = (file: File, quality = 0.6): Promise<File | Blob> => {
});
};
-export default (
- file: File,
- quality?: number,
- setProgress?: (progress: number) => void
-): Promise<string> => {
-
+export default (file: File, quality?: number, setProgress?: SetProgress): Promise<string> => {
const onUploadProgress = (progressEvent: ProgressEvent): void => {
if (setProgress) {
+ const { loaded, total } = progressEvent;
// Only allow upload progress reach 95%, and set 100% when request is resolved
- const progress = Math.round((progressEvent.loaded * 95) / progressEvent.total);
+ const progress = Math.round((loaded * 95) / total);
setProgress(progress);
}
};
@@ -38,9 +37,6 @@ export default (
onUploadProgress
};
- // Indicate start
- if (setProgress) setProgress(0.01);
-
// Add querystring to avoid caching request in some browsers, see
// https://stackoverflow.com/questions/59339561/safari-skipping-xmlhttprequests
return Bluebird.all([get(`/files?key=${file.name}`), compressFile(file, quality)])