diff options
author | eug-vs <eug-vs@keemail.me> | 2020-08-22 14:16:36 +0300 |
---|---|---|
committer | eug-vs <eug-vs@keemail.me> | 2020-08-22 14:16:36 +0300 |
commit | 66e1dfd1b726aa465969d0b7d028db8b0dfa1d0e (patch) | |
tree | 5ca16294d065cb03aad357f65f2995c842ab8df4 | |
parent | 668c9f4841e7118b98bb31d8e68640689be99830 (diff) | |
download | which-ui-66e1dfd1b726aa465969d0b7d028db8b0dfa1d0e.tar.gz |
fix: resolve eslint errors
-rw-r--r-- | src/containers/PollCreation/PollCreation.tsx | 23 | ||||
-rw-r--r-- | src/containers/PollCreation/useS3Preupload.ts | 35 | ||||
-rw-r--r-- | src/utils/uploadFileToS3.ts | 20 |
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)]) |