diff options
Diffstat (limited to 'src/pages/FeedPage/PollSubmission.tsx')
-rw-r--r-- | src/pages/FeedPage/PollSubmission.tsx | 49 |
1 files changed, 25 insertions, 24 deletions
diff --git a/src/pages/FeedPage/PollSubmission.tsx b/src/pages/FeedPage/PollSubmission.tsx index 9b1ac95..16c8350 100644 --- a/src/pages/FeedPage/PollSubmission.tsx +++ b/src/pages/FeedPage/PollSubmission.tsx @@ -7,18 +7,17 @@ import { ClickAwayListener, Divider } from '@material-ui/core'; -import { User, Poll } from 'which-types'; +import { User, Poll, Which } from 'which-types'; import PollSubmissionImage from './PollSubmissionImage'; import UserStrip from '../../components/UserStrip/UserStrip'; import { post } from '../../requests'; import { Contents } from './types'; - interface PropTypes{ user: User; - polls: Poll[]; - setPolls: (newPoll: Poll[])=> void; + addPoll: (poll: Poll) => void; } + const useStyles = makeStyles(theme => ({ root: { height: theme.spacing(50), @@ -26,30 +25,32 @@ const useStyles = makeStyles(theme => ({ } })); -const PollSubmission: React.FC<PropTypes> = ({ user, polls, setPolls }) => { +const emptyContents: Contents = { + left: { url: '' }, + right: { url: '' } +}; + +const PollSubmission: React.FC<PropTypes> = ({ user, addPoll }) => { const classes = useStyles(); const [expanded, setExpanded] = useState(false); - const [contents, setContents] = useState<Contents>({ - left: { - url: '' - }, - right: { - url: '' - } - }); + const [contents, setContents] = useState<Contents>(emptyContents); + + const readyToSubmit = contents.left.url && contents.right.url; + + const setUrl = (which: Which) => (url: string): void => { + setContents({ ...contents, [which]: { url } }); + }; const handleClickAway = () => { setExpanded(false); }; const handleClick = () => { - if (expanded) { - if (contents.left.url && contents.right.url) { - post('/polls/', { authorId: user._id, contents }).then(res => { - polls.unshift({ ...res.data }); - setPolls([...polls]); - }); - } + if (expanded && readyToSubmit) { + post('/polls/', { authorId: user._id, contents }).then(response => { + addPoll(response.data); + }); + setContents({ ...emptyContents }); } setExpanded(!expanded); }; @@ -61,18 +62,18 @@ const PollSubmission: React.FC<PropTypes> = ({ user, polls, setPolls }) => { <UserStrip user={user} info="" navigate={() => {}} /> <Divider /> <div className={classes.root}> - <PollSubmissionImage which="left" setContents={setContents} contents={contents} /> - <PollSubmissionImage which="right" setContents={setContents} contents={contents} /> + <PollSubmissionImage url={contents.left.url} setUrl={setUrl('left')} /> + <PollSubmissionImage url={contents.right.url} setUrl={setUrl('right')} /> </div> </Collapse> <Button color="primary" - disabled={expanded && !(contents.left.url && contents.right.url)} + disabled={expanded && !readyToSubmit} variant={expanded ? 'contained' : 'outlined'} onClick={handleClick} fullWidth > - {expanded ? 'Submit' : 'Create a Poll' } + {expanded ? 'Submit' : 'Create a Poll'} </Button> </Card> </ClickAwayListener> |