aboutsummaryrefslogtreecommitdiff
path: root/src/containers
diff options
context:
space:
mode:
Diffstat (limited to 'src/containers')
-rw-r--r--src/containers/Page/Page.tsx2
-rw-r--r--src/containers/PollCreation/PollCreation.tsx36
-rw-r--r--src/containers/PollCreation/PollCreationImage.tsx85
-rw-r--r--src/containers/Profile/ProfileInfo.tsx15
4 files changed, 57 insertions, 81 deletions
diff --git a/src/containers/Page/Page.tsx b/src/containers/Page/Page.tsx
index 19cf6aa..848ca1d 100644
--- a/src/containers/Page/Page.tsx
+++ b/src/containers/Page/Page.tsx
@@ -36,7 +36,7 @@ const Page: React.FC = () => {
preventDuplicate
maxSnack={isMobile ? 1 : 3}
anchorOrigin={{
- vertical: isMobile ? 'top' : 'bottom',
+ vertical: 'top',
horizontal: 'right'
}}
>
diff --git a/src/containers/PollCreation/PollCreation.tsx b/src/containers/PollCreation/PollCreation.tsx
index 7501d3a..64ab7fd 100644
--- a/src/containers/PollCreation/PollCreation.tsx
+++ b/src/containers/PollCreation/PollCreation.tsx
@@ -1,4 +1,5 @@
import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
import { makeStyles } from '@material-ui/core/styles';
import {
Button,
@@ -6,7 +7,6 @@ import {
Divider,
Container
} from '@material-ui/core';
-import { Poll } from 'which-types';
import { useSnackbar } from 'notistack';
import axios from 'axios';
@@ -14,10 +14,7 @@ import PollCreationImage from './PollCreationImage';
import UserStrip from '../../components/UserStrip/UserStrip';
import { get, post } from '../../requests';
import { useAuth } from '../../hooks/useAuth';
-
-interface PropTypes{
- addPoll: (poll: Poll) => void;
-}
+import { useFeed } from '../../hooks/APIClient';
const useStyles = makeStyles(theme => ({
root: {
@@ -29,41 +26,50 @@ const useStyles = makeStyles(theme => ({
}
}));
-const PollCreation: React.FC<PropTypes> = ({ addPoll }) => {
+const PollCreation: React.FC = () => {
const classes = useStyles();
- const [left, setLeft] = useState<File>();
- const [right, setRight] = useState<File>();
+ const history = useHistory();
+ const [left, setLeft] = useState<File | string>();
+ const [right, setRight] = useState<File | string>();
const { enqueueSnackbar } = useSnackbar();
const { user } = useAuth();
+ const { mutate: updateFeed } = useFeed();
const readyToSubmit = left && right;
- const uploadImage = (file?: File) => {
+ const uploadFile = (file: File): Promise<string> => {
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);
+ return url?.slice(0, url?.indexOf('?')) || '';
});
};
+ const resolveFile = async (file?: File | string): Promise<string> => {
+ if (file instanceof File) return uploadFile(file);
+ return file || '';
+ };
+
const handleClick = async () => {
if (readyToSubmit) {
- const [leftUrl, rightUrl] = await Promise.all([uploadImage(left), uploadImage(right)]);
+ const [leftUrl, rightUrl] = await Promise.all([resolveFile(left), resolveFile(right)]);
const contents = {
left: { url: leftUrl },
right: { url: rightUrl }
};
- post('/polls/', { contents }).then(response => {
- addPoll(response.data);
+ post('/polls/', { contents }).then(() => {
+ updateFeed();
enqueueSnackbar('Your poll has been successfully created!', {
variant: 'success'
});
});
+
+ history.push('/feed');
}
};
@@ -73,8 +79,8 @@ const PollCreation: React.FC<PropTypes> = ({ addPoll }) => {
{user && <UserStrip user={user} info="" />}
<Divider />
<div className={classes.images}>
- <PollCreationImage file={left} setFile={setLeft} />
- <PollCreationImage file={right} setFile={setRight} />
+ <PollCreationImage callback={setLeft} />
+ <PollCreationImage callback={setRight} />
</div>
<Button
color="primary"
diff --git a/src/containers/PollCreation/PollCreationImage.tsx b/src/containers/PollCreation/PollCreationImage.tsx
index d3203a6..1200b11 100644
--- a/src/containers/PollCreation/PollCreationImage.tsx
+++ b/src/containers/PollCreation/PollCreationImage.tsx
@@ -1,13 +1,17 @@
-import React, { useState, useEffect } from 'react';
-import { useFilePicker, utils } from 'react-sage';
+import React, { useState } from 'react';
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';
+import {
+ CardActionArea,
+ CardMedia,
+ Typography
+} from '@material-ui/core';
+import ClearIcon from '@material-ui/icons/CancelOutlined';
+
+import AttachLink from '../../components/AttachLink/AttachLink';
+import FileUpload from '../../components/FileUpload/FileUpload';
interface PropTypes {
- file: File | undefined;
- setFile: (file: File | undefined) => void;
+ callback: (file?: File | string) => void;
}
const useStyles = makeStyles({
@@ -15,7 +19,8 @@ const useStyles = makeStyles({
display: 'flex',
justifyContent: 'center',
flexDirection: 'column',
- alignItems: 'center'
+ alignItems: 'center',
+ width: '50%'
},
clearIcon: {
opacity: '.5',
@@ -27,69 +32,41 @@ const useStyles = makeStyles({
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
- },
- text: {
- textAlign: 'center'
}
});
-const PollCreationImage: React.FC<PropTypes> = ({ file, setFile }) => {
+const PollCreationImage: React.FC<PropTypes> = ({ callback }) => {
const classes = useStyles();
- const { files, onClick, HiddenFileInput } = useFilePicker();
const [url, setUrl] = useState<string>();
- const [isMediaHover, setIsMediaHover] = useState(false);
- const handleMouseEnter = (): void => {
- setIsMediaHover(true);
+ const handleClear = (): void => {
+ setUrl(undefined);
+ callback(undefined);
};
- const handleMouseLeave = (): void => {
- setIsMediaHover(false);
+ const childrenCallback = (fileUrl: string, file?: File) => {
+ setUrl(fileUrl);
+ callback(file || fileUrl);
};
- 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 = (
- <>
- <CloudUploadIcon fontSize="large" color="primary" />
- <Typography variant="h5" className={classes.text}> Upload an image </Typography>
- <HiddenFileInput accept=".jpg, .jpeg, .png, .gif" multiple={false} />
- </>
+ <div className={classes.root}>
+ <FileUpload callback={childrenCallback} />
+ <Typography variant="h6"> or </Typography>
+ <AttachLink callback={childrenCallback} />
+ </div>
);
const Media = (
- <CardMedia
- image={url}
- className={classes.media}
- onMouseEnter={handleMouseEnter}
- onMouseLeave={handleMouseLeave}
- >
- {isMediaHover && <CancelOutlinedIcon className={classes.clearIcon} />}
- </CardMedia>
+ <CardActionArea onClick={handleClear} className={classes.root}>
+ <CardMedia image={url} className={classes.media}>
+ <ClearIcon className={classes.clearIcon} />
+ </CardMedia>
+ </CardActionArea>
);
- return (
- <>
- <CardActionArea onClick={handleClick} className={classes.root}>
- {file ? (url && Media) : Upload}
- </CardActionArea>
- </>
- );
+ return url ? Media : Upload;
};
export default PollCreationImage;
diff --git a/src/containers/Profile/ProfileInfo.tsx b/src/containers/Profile/ProfileInfo.tsx
index 87af99d..82f640d 100644
--- a/src/containers/Profile/ProfileInfo.tsx
+++ b/src/containers/Profile/ProfileInfo.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
import { Badge, Typography } from '@material-ui/core/';
import { makeStyles } from '@material-ui/core/styles';
import { User } from 'which-types';
@@ -6,7 +6,7 @@ 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 UploadImage from '../../components/UploadImage/UploadImage';
+import AttachLink from '../../components/AttachLink/AttachLink';
import Avatar from '../../components/Avatar/Avatar';
import { patch } from '../../requests';
import { useAuth } from '../../hooks/useAuth';
@@ -86,14 +86,9 @@ const ProfileInfo: React.FC<PropTypes> = ({
savedPolls, totalVotes, setUserInfo, userInfo
}) => {
const classes = useStyles();
- const [input, setInput] = useState(false);
const { user } = useAuth();
const dateSince = new Date(userInfo?.createdAt || '').toLocaleDateString();
- const handleClick = () => {
- setInput(!input);
- };
-
const patchAvatar = (url: string) => {
const id = user?._id;
patch(`/users/${id}`, { avatarUrl: url }).then(res => {
@@ -108,7 +103,7 @@ const ProfileInfo: React.FC<PropTypes> = ({
? <Skeleton animation="wave" variant="circle" width={150} height={150} className={classes.avatar} />
: userInfo?._id === user?._id
? (
- <div>
+ <AttachLink callback={patchAvatar}>
<div className={classes.avatarContainer}>
<Badge
overlap="circle"
@@ -116,7 +111,6 @@ const ProfileInfo: React.FC<PropTypes> = ({
vertical: 'bottom',
horizontal: 'right'
}}
- onClick={handleClick}
badgeContent={(
<div className={classes.badge}>
<CameraAltIcon />
@@ -126,8 +120,7 @@ const ProfileInfo: React.FC<PropTypes> = ({
<Avatar className={classes.avatar} user={userInfo} />
</Badge>
</div>
- <UploadImage isOpen={input} setIsOpen={setInput} callback={patchAvatar} />
- </div>
+ </AttachLink>
)
: <Avatar className={classes.avatar} user={userInfo} />
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-31 22:54:47 +0000