diff options
Diffstat (limited to 'src/pages/FeedPage')
-rw-r--r-- | src/pages/FeedPage/FeedPage.tsx | 10 | ||||
-rw-r--r-- | src/pages/FeedPage/PollSubmission.tsx | 12 | ||||
-rw-r--r-- | src/pages/FeedPage/PollSubmissionImage.tsx | 5 |
3 files changed, 19 insertions, 8 deletions
diff --git a/src/pages/FeedPage/FeedPage.tsx b/src/pages/FeedPage/FeedPage.tsx index d29103a..0b7d44a 100644 --- a/src/pages/FeedPage/FeedPage.tsx +++ b/src/pages/FeedPage/FeedPage.tsx @@ -1,12 +1,12 @@ import React, { useState, useEffect } from 'react'; import { Poll } from 'which-types'; +import { Container } from '@material-ui/core/'; import Feed from '../../components/Feed/Feed'; import { get } from '../../requests'; import PollSubmission from './PollSubmission'; import { useAuth } from '../../hooks/useAuth'; - const FeedPage: React.FC = () => { const [polls, setPolls] = useState<Poll[]>([]); const { isAuthenticated } = useAuth(); @@ -19,15 +19,15 @@ const FeedPage: React.FC = () => { const addPoll = (poll: Poll): void => { polls.unshift(poll); - setPolls([...polls]); + setPolls([]); + setPolls(polls); }; - return ( - <> + <Container maxWidth="sm" disableGutters> {isAuthenticated() && <PollSubmission addPoll={addPoll} />} <Feed polls={polls} /> - </> + </Container> ); }; diff --git a/src/pages/FeedPage/PollSubmission.tsx b/src/pages/FeedPage/PollSubmission.tsx index 18f029c..347eecc 100644 --- a/src/pages/FeedPage/PollSubmission.tsx +++ b/src/pages/FeedPage/PollSubmission.tsx @@ -8,6 +8,7 @@ import { Divider } from '@material-ui/core'; import { Poll, Which } from 'which-types'; +import { useSnackbar } from 'notistack'; import PollSubmissionImage from './PollSubmissionImage'; import UserStrip from '../../components/UserStrip/UserStrip'; import { post } from '../../requests'; @@ -20,6 +21,9 @@ interface PropTypes{ const useStyles = makeStyles(theme => ({ root: { + marginBottom: theme.spacing(4) + }, + images: { height: theme.spacing(50), display: 'flex' } @@ -34,6 +38,7 @@ const PollSubmission: React.FC<PropTypes> = ({ addPoll }) => { const classes = useStyles(); const [expanded, setExpanded] = useState(false); const [contents, setContents] = useState<Contents>(emptyContents); + const { enqueueSnackbar } = useSnackbar(); const { user } = useAuth(); const readyToSubmit = contents.left.url && contents.right.url; @@ -50,6 +55,9 @@ const PollSubmission: React.FC<PropTypes> = ({ addPoll }) => { if (expanded && readyToSubmit) { post('/polls/', { contents }).then(response => { addPoll(response.data); + enqueueSnackbar('Your poll has been successfully created!', { + variant: 'success' + }); }); setContents({ ...emptyContents }); } @@ -58,11 +66,11 @@ const PollSubmission: React.FC<PropTypes> = ({ addPoll }) => { return ( <ClickAwayListener onClickAway={handleClickAway}> - <Card> + <Card className={classes.root}> <Collapse in={expanded} timeout="auto" unmountOnExit> {user && <UserStrip user={user} info="" />} <Divider /> - <div className={classes.root}> + <div className={classes.images}> <PollSubmissionImage url={contents.left.url} setUrl={setUrl('left')} /> <PollSubmissionImage url={contents.right.url} setUrl={setUrl('right')} /> </div> diff --git a/src/pages/FeedPage/PollSubmissionImage.tsx b/src/pages/FeedPage/PollSubmissionImage.tsx index a8ec437..8835989 100644 --- a/src/pages/FeedPage/PollSubmissionImage.tsx +++ b/src/pages/FeedPage/PollSubmissionImage.tsx @@ -28,6 +28,9 @@ const useStyles = makeStyles({ display: 'flex', justifyContent: 'center', alignItems: 'center' + }, + text: { + textAlign: 'center' } }); @@ -56,7 +59,7 @@ const PollSubmissionImage: React.FC<PropTypes> = ({ url, setUrl }) => { const Upload = ( <> <CloudUploadIcon fontSize="large" color="primary" /> - <Typography variant="h5"> Upload an image </Typography> + <Typography variant="h5" className={classes.text}> Upload an image </Typography> </> ); |