From 551928f9fe5542dd91c9a8578124b4fb05fb9be2 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 22 Aug 2020 00:43:22 +0300 Subject: refactor: rewrite FileUpload without react-sage --- src/components/FileUpload/FileUpload.tsx | 30 +++++++++++++++++++++--------- 1 file changed, 21 insertions(+), 9 deletions(-) (limited to 'src') diff --git a/src/components/FileUpload/FileUpload.tsx b/src/components/FileUpload/FileUpload.tsx index 67d280d..1c05e7f 100644 --- a/src/components/FileUpload/FileUpload.tsx +++ b/src/components/FileUpload/FileUpload.tsx @@ -1,5 +1,5 @@ -import React, { useEffect } from 'react'; -import { useFilePicker, utils } from 'react-sage'; +import React, { useRef } from 'react'; +import { utils } from 'react-sage'; import Button from '@material-ui/core/Button'; import CloudUpload from '@material-ui/icons/CloudUpload'; @@ -9,20 +9,25 @@ interface PropTypes { const FileUpload: React.FC = ({ callback, children }) => { - const { files, onClick, HiddenFileInput } = useFilePicker(); + const inputRef = useRef(null); - useEffect(() => { + const handleChange = (event: React.ChangeEvent) => { + const files = event.target?.files; if (files?.length) { const file = files[0]; utils.loadFile(file).then(url => callback(url, file)); - } - }, [files, callback]); + }; + }; + + const handleClick = () => { + if (inputRef?.current) inputRef.current.click(); + }; const child = children && React.Children.toArray(children)[0]; const defaultButton = ( ); - const child = children && React.Children.toArray(children)[0]; + const child = children && React.Children.only(children); return ( <> diff --git a/src/components/FileUpload/FileUpload.tsx b/src/components/FileUpload/FileUpload.tsx index 1c05e7f..6a31656 100644 --- a/src/components/FileUpload/FileUpload.tsx +++ b/src/components/FileUpload/FileUpload.tsx @@ -23,7 +23,7 @@ const FileUpload: React.FC = ({ callback, children }) => { if (inputRef?.current) inputRef.current.click(); }; - const child = children && React.Children.toArray(children)[0]; + const child = children && React.Children.only(children); const defaultButton = ( - - - ); -}; - -export default PollSubmission; diff --git a/src/containers/Feed/PollSubmissionImage.tsx b/src/containers/Feed/PollSubmissionImage.tsx deleted file mode 100644 index cd67847..0000000 --- a/src/containers/Feed/PollSubmissionImage.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import { useFilePicker, utils } from 'react-sage'; -import { makeStyles } from '@material-ui/core/styles'; -import CloudUploadIcon from '@material-ui/icons/CloudUpload'; -import { CardActionArea, CardMedia, Typography } from '@material-ui/core'; -import CancelOutlinedIcon from '@material-ui/icons/CancelOutlined'; - -interface PropTypes { - file: File | undefined; - setFile: (file: File | undefined) => void; -} - -const useStyles = makeStyles({ - root: { - display: 'flex', - justifyContent: 'center', - flexDirection: 'column', - alignItems: 'center' - }, - clearIcon: { - opacity: '.5', - fontSize: 50 - }, - media: { - height: '100%', - width: '100%', - display: 'flex', - justifyContent: 'center', - alignItems: 'center' - }, - text: { - textAlign: 'center' - } -}); - - -const PollSubmissionImage: React.FC = ({ file, setFile }) => { - const classes = useStyles(); - const { files, onClick, HiddenFileInput } = useFilePicker(); - const [url, setUrl] = useState(); - const [isMediaHover, setIsMediaHover] = useState(false); - - const handleMouseEnter = (): void => { - setIsMediaHover(true); - }; - - const handleMouseLeave = (): void => { - setIsMediaHover(false); - }; - - useEffect(() => { - if (files?.length) { - const chosenFile = files[0]; - setFile(chosenFile); - utils.loadFile(chosenFile).then(result => setUrl(result)); - } - }, [files, setFile]); - - - const handleClick = () => { - if (file) { - setFile(undefined); - } else onClick(); - }; - - - const Upload = ( - <> - - Upload an image - - - ); - - const Media = ( - - {isMediaHover && } - - ); - - return ( - <> - - {file ? (url && Media) : Upload} - - - ); -}; - -export default PollSubmissionImage; -- cgit v1.2.3 From 668c9f4841e7118b98bb31d8e68640689be99830 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 22 Aug 2020 13:54:56 +0300 Subject: refactor!: simplify file operations --- src/components/FileUpload/FileUpload.tsx | 8 +-- src/containers/PollCreation/ImageInput.tsx | 10 ++-- src/containers/PollCreation/PollCreation.tsx | 2 +- src/containers/PollCreation/useS3Preupload.ts | 40 +++++++++++++++ src/containers/Profile/ProfileInfo.tsx | 23 +++++---- src/hooks/useS3Preupload.tsx | 73 --------------------------- src/utils/files.ts | 29 ----------- src/utils/getLocalFileUrl.ts | 15 ++++++ src/utils/uploadFileToS3.ts | 57 +++++++++++++++++++++ 9 files changed, 135 insertions(+), 122 deletions(-) create mode 100644 src/containers/PollCreation/useS3Preupload.ts delete mode 100644 src/hooks/useS3Preupload.tsx delete mode 100644 src/utils/files.ts create mode 100644 src/utils/getLocalFileUrl.ts create mode 100644 src/utils/uploadFileToS3.ts (limited to 'src') diff --git a/src/components/FileUpload/FileUpload.tsx b/src/components/FileUpload/FileUpload.tsx index d455f62..961fa9a 100644 --- a/src/components/FileUpload/FileUpload.tsx +++ b/src/components/FileUpload/FileUpload.tsx @@ -1,10 +1,9 @@ import React, { useRef } from 'react'; import Button from '@material-ui/core/Button'; import CloudUpload from '@material-ui/icons/CloudUpload'; -import { getLocalFileUrl } from '../../utils/files'; interface PropTypes { - callback: (fileUrl: string, file: File) => void; + callback: (file: File) => void; } @@ -13,10 +12,7 @@ const FileUpload: React.FC = ({ callback, children }) => { const handleChange = (event: React.ChangeEvent) => { const files = event.target?.files; - if (files?.length) { - const file = files[0]; - getLocalFileUrl(file).then(url => callback(url, file)); - }; + if (files?.length) callback(files[0]); }; const handleClick = () => { diff --git a/src/containers/PollCreation/ImageInput.tsx b/src/containers/PollCreation/ImageInput.tsx index 475d527..e807865 100644 --- a/src/containers/PollCreation/ImageInput.tsx +++ b/src/containers/PollCreation/ImageInput.tsx @@ -10,6 +10,7 @@ import { Check, CancelOutlined } from '@material-ui/icons'; import AttachLink from '../../components/AttachLink/AttachLink'; import FileUpload from '../../components/FileUpload/FileUpload'; import BackgroundImage from '../../components/Image/BackgroundImage'; +import getLocalFileUrl from '../../utils/getLocalFileUrl'; interface PropTypes { callback: (file?: File | string) => void; @@ -59,9 +60,12 @@ const ImageInput: React.FC = ({ callback, progress }) => { callback(undefined); }; - const childrenCallback = (fileUrl: string, file?: File) => { - setUrl(fileUrl); - callback(file || fileUrl); + const childrenCallback = (value: File | string) => { + if (value instanceof File) { + getLocalFileUrl(value).then(localUrl => setUrl(localUrl)); + } else setUrl(value); + + callback(value); }; const Upload = ( diff --git a/src/containers/PollCreation/PollCreation.tsx b/src/containers/PollCreation/PollCreation.tsx index 03ab905..87bdcf7 100644 --- a/src/containers/PollCreation/PollCreation.tsx +++ b/src/containers/PollCreation/PollCreation.tsx @@ -12,12 +12,12 @@ import { } from '@material-ui/core'; import { useSnackbar } from 'notistack'; +import useS3Preupload from './useS3Preupload'; import ImageInput from './ImageInput'; import UserStrip from '../../components/UserStrip/UserStrip'; import { post } from '../../requests'; import { useAuth } from '../../hooks/useAuth'; import { useFeed } from '../../hooks/APIClient'; -import useS3Preupload from '../../hooks/useS3Preupload'; const useStyles = makeStyles(theme => ({ diff --git a/src/containers/PollCreation/useS3Preupload.ts b/src/containers/PollCreation/useS3Preupload.ts new file mode 100644 index 0000000..ef3a408 --- /dev/null +++ b/src/containers/PollCreation/useS3Preupload.ts @@ -0,0 +1,40 @@ +import { useState, useCallback, useMemo } from 'react'; +import uploadFileToS3 from '../../utils/uploadFileToS3'; + + +interface Hook { + setValue: (value: File | string | undefined) => void; + isReady: boolean; + resolve: () => Promise; + progress: number; +} + +export default (): Hook => { + const [url, setUrl] = useState(); + const [file, setFile] = useState(); + const [progress, setProgress] = useState(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 => { + if (file) return uploadFileToS3(file, quality, setProgress); + return url || ''; + }, [file, url]); + + return { + setValue, + isReady, + resolve, + progress + }; +}; diff --git a/src/containers/Profile/ProfileInfo.tsx b/src/containers/Profile/ProfileInfo.tsx index c9831f3..fbd6272 100644 --- a/src/containers/Profile/ProfileInfo.tsx +++ b/src/containers/Profile/ProfileInfo.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useCallback } from 'react'; import { Badge, Typography } from '@material-ui/core/'; import { makeStyles } from '@material-ui/core/styles'; import { User } from 'which-types'; @@ -6,10 +6,11 @@ import CameraAltIcon from '@material-ui/icons/CameraAlt'; import VerifiedIcon from '@material-ui/icons/CheckCircleOutline'; import Skeleton from '@material-ui/lab/Skeleton'; import Highlight from './Highlight'; -import AttachLink from '../../components/AttachLink/AttachLink'; +import FileUpload from '../../components/FileUpload/FileUpload'; import Avatar from '../../components/Avatar/Avatar'; import { patch } from '../../requests'; import { useAuth } from '../../hooks/useAuth'; +import uploadFileToS3 from '../../utils/uploadFileToS3'; interface PropTypes { @@ -88,14 +89,16 @@ const ProfileInfo: React.FC = ({ }) => { const classes = useStyles(); const { user } = useAuth(); + const dateSince = new Date(userInfo?.createdAt || '').toLocaleDateString(); - const patchAvatar = (url: string) => { - const id = user?._id; - patch(`/users/${id}`, { avatarUrl: url }).then(res => { - setUserInfo(res.data); - }); - }; + const handleUpdateAvatar = useCallback(async (file: File) => { + if (user) { + uploadFileToS3(file, 1) + .then(avatarUrl => patch(`/users/${user._id}`, { avatarUrl })) + .then(response => setUserInfo(response.data)); + } + }, [user, setUserInfo]); return (
@@ -104,7 +107,7 @@ const ProfileInfo: React.FC = ({ ? : userInfo?._id === user?._id ? ( - +
= ({
- + ) : } diff --git a/src/hooks/useS3Preupload.tsx b/src/hooks/useS3Preupload.tsx deleted file mode 100644 index 9516459..0000000 --- a/src/hooks/useS3Preupload.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { useState, useCallback, useMemo } from 'react'; -import axios from 'axios'; -import Bluebird from 'bluebird'; -import { get } from '../requests'; -import { compressFile } from '../utils/files'; - -interface ProgressEvent { - loaded: number; - total: number; -} - -interface Hook { - setValue: (value: File | string | undefined) => void; - isReady: boolean; - resolve: () => Promise; - progress: number; -} - -export default (): Hook => { - const [url, setUrl] = useState(); - const [file, setFile] = useState(); - const [progress, setProgress] = useState(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 handleUploadProgress = useCallback((progressEvent: ProgressEvent): void => { - // 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 (quality?: number): Promise => { - if (file) { - const config = { - headers: { 'Content-Type': 'image/png' }, - onUploadProgress: handleUploadProgress - }; - - 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)]) - .then(([response, compressedFile]) => { - const uploadUrl = response.data; - return axios.put(uploadUrl, compressedFile, config); - }) - .then(response => { - setProgress(100); - const uri = response.config.url; - return uri ? uri.slice(0, uri.indexOf('?')) : ''; - }); - } - setProgress(100); - return url || ''; - }, [file, handleUploadProgress, url]); - - return { - setValue, - isReady, - resolve, - progress - }; -}; diff --git a/src/utils/files.ts b/src/utils/files.ts deleted file mode 100644 index 5d16fdb..0000000 --- a/src/utils/files.ts +++ /dev/null @@ -1,29 +0,0 @@ -import Compressor from 'compressorjs'; - - -export const getLocalFileUrl = (file: File): Promise => { - return new Promise((resolve, reject) => { - const reader = new FileReader(); - - reader.addEventListener('load', () => { - if (typeof reader.result === 'string') resolve(reader.result); - }, false); - - reader.addEventListener('error', () => { - reject(new Error('Error reading the file')) - }, false ); - - if (file) reader.readAsDataURL(file); - }); -}; - -export const compressFile = (file: File, quality = 0.6): Promise => { - return new Promise((resolve, reject) => { - return new Compressor(file, { - success: result => resolve(result), - error: err => reject(err), - quality - }); - }); -}; - diff --git a/src/utils/getLocalFileUrl.ts b/src/utils/getLocalFileUrl.ts new file mode 100644 index 0000000..1469804 --- /dev/null +++ b/src/utils/getLocalFileUrl.ts @@ -0,0 +1,15 @@ +export default (file: File): Promise => { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + + reader.addEventListener('load', () => { + if (typeof reader.result === 'string') resolve(reader.result); + }, false); + + reader.addEventListener('error', () => { + reject(new Error('Error reading the file')); + }, false); + + if (file) reader.readAsDataURL(file); + }); +}; diff --git a/src/utils/uploadFileToS3.ts b/src/utils/uploadFileToS3.ts new file mode 100644 index 0000000..de1b1aa --- /dev/null +++ b/src/utils/uploadFileToS3.ts @@ -0,0 +1,57 @@ +import Compressor from 'compressorjs'; +import axios from 'axios'; +import Bluebird from 'bluebird'; +import { get } from '../requests'; + +interface ProgressEvent { + loaded: number; + total: number; +} + +const compressFile = (file: File, quality = 0.6): Promise => { + return new Promise((resolve, reject) => { + if (quality === 1) resolve(file); + else return new Compressor(file, { + success: result => resolve(result), + error: err => reject(err), + quality + }); + }); +}; + +export default ( + file: File, + quality?: number, + setProgress?: (progress: number) => void +): Promise => { + + const onUploadProgress = (progressEvent: ProgressEvent): void => { + if (setProgress) { + // Only allow upload progress reach 95%, and set 100% when request is resolved + const progress = Math.round((progressEvent.loaded * 95) / progressEvent.total); + setProgress(progress); + } + }; + + const config = { + headers: { 'Content-Type': 'image/png' }, + 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)]) + .then(([response, compressedFile]) => { + const uploadUrl = response.data; + return axios.put(uploadUrl, compressedFile, config); + }) + .then(response => { + if (setProgress) setProgress(100); + const uri = response.config.url; + return uri ? uri.slice(0, uri.indexOf('?')) : ''; + }); +}; + -- cgit v1.2.3 From 66e1dfd1b726aa465969d0b7d028db8b0dfa1d0e Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 22 Aug 2020 14:16:36 +0300 Subject: fix: resolve eslint errors --- src/containers/PollCreation/PollCreation.tsx | 23 ++++++++---------- src/containers/PollCreation/useS3Preupload.ts | 35 +++++++++------------------ src/utils/uploadFileToS3.ts | 20 ++++++--------- 3 files changed, 30 insertions(+), 48 deletions(-) (limited to 'src') 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 && }
- - + +
{ - progressLeft || progressRight + leftProgress || rightProgress ? : (
) : } @@ -134,7 +144,7 @@ const ProfileInfo: React.FC = ({ : ( {userInfo?.username} - {userInfo?.verified && } + {userInfo?.verified && } ) } -- cgit v1.2.3