From fdf826bf38b967d2f4346e9ee5950e157f0f0beb Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 22 Aug 2020 01:23:08 +0300 Subject: feat!: remove unused components --- src/containers/Feed/PollSubmission.tsx | 102 ---------------------------- src/containers/Feed/PollSubmissionImage.tsx | 95 -------------------------- 2 files changed, 197 deletions(-) delete mode 100644 src/containers/Feed/PollSubmission.tsx delete mode 100644 src/containers/Feed/PollSubmissionImage.tsx (limited to 'src/containers') diff --git a/src/containers/Feed/PollSubmission.tsx b/src/containers/Feed/PollSubmission.tsx deleted file mode 100644 index faaf2bd..0000000 --- a/src/containers/Feed/PollSubmission.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import React, { useState } from 'react'; -import { makeStyles } from '@material-ui/core/styles'; -import Collapse from '@material-ui/core/Collapse'; -import { - Button, - Card, - ClickAwayListener, - Divider -} from '@material-ui/core'; -import { Poll } from 'which-types'; -import { useSnackbar } from 'notistack'; -import axios from 'axios'; - -import PollSubmissionImage from './PollSubmissionImage'; -import UserStrip from '../../components/UserStrip/UserStrip'; -import { get, post } from '../../requests'; -import { useAuth } from '../../hooks/useAuth'; - -interface PropTypes{ - addPoll: (poll: Poll) => void; -} - -const useStyles = makeStyles(theme => ({ - root: { - marginBottom: theme.spacing(4) - }, - images: { - height: theme.spacing(50), - display: 'flex' - } -})); - -const PollSubmission: React.FC = ({ addPoll }) => { - const classes = useStyles(); - const [expanded, setExpanded] = useState(false); - const [left, setLeft] = useState(); - const [right, setRight] = useState(); - const { enqueueSnackbar } = useSnackbar(); - const { user } = useAuth(); - - const readyToSubmit = left && right; - - const handleClickAway = () => { - setExpanded(false); - }; - - const uploadImage = (file?: File) => { - const headers = { 'Content-Type': 'image/png' }; - return get('/files') - .then(response => response.data) - .then(uploadUrl => axios.put(uploadUrl, file, { headers })) - .then(response => { - const { config: { url } } = response; - return url && url.slice(0, url.indexOf('.png') + 4); - }); - }; - - const handleClick = async () => { - if (expanded && readyToSubmit) { - const [leftUrl, rightUrl] = await Promise.all([uploadImage(left), uploadImage(right)]); - - const contents = { - left: { url: leftUrl }, - right: { url: rightUrl } - }; - - post('/polls/', { contents }).then(response => { - addPoll(response.data); - enqueueSnackbar('Your poll has been successfully created!', { - variant: 'success' - }); - }); - } - setExpanded(!expanded); - }; - - return ( - - - - {user && } - -
- - -
- - - - - ); -}; - -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/containers/PollCreation/ImageInput.tsx | 10 +++++-- src/containers/PollCreation/PollCreation.tsx | 2 +- src/containers/PollCreation/useS3Preupload.ts | 40 +++++++++++++++++++++++++++ src/containers/Profile/ProfileInfo.tsx | 23 ++++++++------- 4 files changed, 61 insertions(+), 14 deletions(-) create mode 100644 src/containers/PollCreation/useS3Preupload.ts (limited to 'src/containers') 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 ? ( - +
= ({
- + ) : } -- 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 +++++++++------------------ 2 files changed, 22 insertions(+), 36 deletions(-) (limited to 'src/containers') 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