aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/UploadImage/UploadImage.tsx16
-rw-r--r--src/pages/FeedPage/PollSubmission.tsx44
-rw-r--r--src/pages/FeedPage/PollSubmissionImage.tsx67
-rw-r--r--src/pages/ProfilePage/ProfileInfo.tsx2
4 files changed, 62 insertions, 67 deletions
diff --git a/src/components/UploadImage/UploadImage.tsx b/src/components/UploadImage/UploadImage.tsx
index 3a58e29..e6f6d05 100644
--- a/src/components/UploadImage/UploadImage.tsx
+++ b/src/components/UploadImage/UploadImage.tsx
@@ -8,23 +8,21 @@ import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
interface PropTypes {
- display: boolean;
- isOpen: (display: boolean) => void;
+ isOpen: boolean;
+ setIsOpen: (value: boolean) => void;
callback: (url: string) => void;
}
-const UploadImage: React.FC<PropTypes> = ({
- display, isOpen, callback
-}) => {
+const UploadImage: React.FC<PropTypes> = ({ setIsOpen, isOpen, callback }) => {
const [url, setUrl] = useState('');
const handleClose = () => {
- isOpen(false);
+ setIsOpen(false);
};
const handleSubmit = () => {
callback(url || '');
- isOpen(false);
+ setIsOpen(false);
};
const handleChange = (event:React.ChangeEvent<HTMLInputElement>) => {
@@ -33,8 +31,8 @@ const UploadImage: React.FC<PropTypes> = ({
return (
<div>
- <Dialog open={display} onClose={handleClose}>
- <DialogTitle id="form-dialog-title">Upload an Image</DialogTitle>
+ <Dialog open={isOpen} onClose={handleClose}>
+ <DialogTitle>Upload an Image</DialogTitle>
<DialogContent>
<DialogContentText>
Unfortunetly we do not support uploading images yet. Please provide a valid URL to your image.
diff --git a/src/pages/FeedPage/PollSubmission.tsx b/src/pages/FeedPage/PollSubmission.tsx
index 56c4242..38f70c3 100644
--- a/src/pages/FeedPage/PollSubmission.tsx
+++ b/src/pages/FeedPage/PollSubmission.tsx
@@ -2,7 +2,10 @@ import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Collapse from '@material-ui/core/Collapse';
import {
- Button, Card, CardMedia, ClickAwayListener, Divider
+ Button,
+ Card,
+ ClickAwayListener,
+ Divider
} from '@material-ui/core';
import { User, Poll } from 'which-types';
import PollSubmissionImage from './PollSubmissionImage';
@@ -14,27 +17,12 @@ import { Contents } from './types';
interface PropTypes{
user: User;
polls: Poll[];
- setPolls: (a:Poll[])=> void;
+ setPolls: (newPoll: Poll[])=> void;
}
const useStyles = makeStyles(theme => ({
root: {
- textAlign: 'center',
- cursor: 'pointer'
- },
- card: {
- height: 400,
- display: 'flex'
- },
- images: {
height: theme.spacing(50),
- width: 300,
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
- cursor: 'pointer'
- },
- button: {
- width: '100%'
+ display: 'flex'
}
}));
@@ -68,21 +56,23 @@ const PollSubmission: React.FC<PropTypes> = ({ user, polls, setPolls }) => {
return (
<ClickAwayListener onClickAway={handleClickAway}>
- <Card className={classes.root}>
+ <Card>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<UserStrip user={user} info="" navigate={() => {}} />
<Divider />
- <CardMedia className={classes.card}>
+ <div className={classes.root}>
<PollSubmissionImage which="left" setContents={setContents} contents={contents} />
<PollSubmissionImage which="right" setContents={setContents} contents={contents} />
- </CardMedia>
+ </div>
</Collapse>
- <Button onClick={handleClick} color="primary" variant={expanded ? "contained" : "outlined" } className={classes.button}>
- {
- !expanded
- ? 'Create a Poll'
- : 'Submit'
- }
+ <Button
+ color="primary"
+ disabled={expanded && !(contents.left.url && contents.right.url)}
+ variant={expanded ? "contained" : "outlined"}
+ onClick={handleClick}
+ fullWidth
+ >
+ {expanded ? 'Submit' : 'Create a Poll' }
</Button>
</Card>
</ClickAwayListener>
diff --git a/src/pages/FeedPage/PollSubmissionImage.tsx b/src/pages/FeedPage/PollSubmissionImage.tsx
index 2dadbee..757083b 100644
--- a/src/pages/FeedPage/PollSubmissionImage.tsx
+++ b/src/pages/FeedPage/PollSubmissionImage.tsx
@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
-import { CardActionArea, CardMedia } from '@material-ui/core';
+import { CardActionArea, CardMedia, Typography } from '@material-ui/core';
import UploadImage from '../../components/UploadImage/UploadImage';
import { Contents } from './types';
import CancelOutlinedIcon from '@material-ui/icons/CancelOutlined';
@@ -13,24 +13,29 @@ interface PropTypes {
}
const useStyles = makeStyles(theme => ({
- images: {
- height: theme.spacing(50),
- width: 300,
+ root: {
display: 'flex',
justifyContent: 'center',
- alignItems: 'center',
- cursor: 'pointer',
- boxShadow: 'inset 0 0 10px;'
+ flexDirection: 'column',
+ alignItems: 'center'
},
clearIcon: {
opacity: '.5',
- fontSize: 100
+ fontSize: 50
+ },
+ media: {
+ height: '100%',
+ width: '100%',
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center'
}
}));
+
const PollSubmissionImage: React.FC<PropTypes> = ({ setContents, which, contents }) => {
const classes = useStyles();
- const [display, setDisplay] = useState(false);
+ const [isModalOpen, setIsModalOpen] = useState(false);
const [image, setImage] = useState('');
const [clearIconDisplay, setClearIconDisplay] = useState(false);
@@ -41,9 +46,7 @@ const PollSubmissionImage: React.FC<PropTypes> = ({ setContents, which, contents
};
const handleClick = () => {
- image === ''
- ? setDisplay(!display)
- : patchUrl('');
+ image ? patchUrl('') : setIsModalOpen(!isModalOpen);
};
const handleMouseEnter = () => {
@@ -54,27 +57,31 @@ const PollSubmissionImage: React.FC<PropTypes> = ({ setContents, which, contents
setClearIconDisplay(false);
};
- return (
+
+ const Upload = (
<>
- <CardActionArea onClick={handleClick}>
- <CardMedia
- className={classes.images}
- image={image}
- onMouseEnter={handleMouseEnter}
- onMouseLeave={handleMouseLeave}
- >
- {
- image === ''
- ? <CloudUploadIcon fontSize="large" color="primary" />
- : clearIconDisplay
- ? <CancelOutlinedIcon className={classes.clearIcon} />
- : null
- }
- </CardMedia>
- </CardActionArea>
- <UploadImage display={display} isOpen={setDisplay} callback={patchUrl} />
+ <CloudUploadIcon fontSize="large" color="primary" />
+ <Typography variant="h5"> Upload an image </Typography>
+ <UploadImage isOpen={isModalOpen} setIsOpen={setIsModalOpen} callback={patchUrl} />
</>
);
+
+ const Media = (
+ <CardMedia
+ image={image}
+ className={classes.media}
+ onMouseEnter={handleMouseEnter}
+ onMouseLeave={handleMouseLeave}
+ >
+ {clearIconDisplay && <CancelOutlinedIcon className={classes.clearIcon} />}
+ </CardMedia>
+ )
+
+ return (
+ <CardActionArea onClick={handleClick} className={classes.root}>
+ {image ? Media : Upload}
+ </CardActionArea>
+ );
};
export default PollSubmissionImage;
diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx
index ec6c387..9fe5912 100644
--- a/src/pages/ProfilePage/ProfileInfo.tsx
+++ b/src/pages/ProfilePage/ProfileInfo.tsx
@@ -121,7 +121,7 @@ const ProfileInfo: React.FC<PropTypes> = ({
<Avatar className={classes.avatar} src={user?.avatarUrl} />
</Badge>
</div>
- <UploadImage display={input} isOpen={setInput} callback={patchAvatar} />
+ <UploadImage isOpen={input} setIsOpen={setInput} callback={patchAvatar} />
</div>
)
: <Avatar className={classes.avatar} src={user?.avatarUrl} />
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-24 01:56:27 +0000