diff options
Diffstat (limited to 'src/pages/FeedPage')
-rw-r--r-- | src/pages/FeedPage/FeedPage.tsx | 27 | ||||
-rw-r--r-- | src/pages/FeedPage/PollSubmission.tsx | 92 | ||||
-rw-r--r-- | src/pages/FeedPage/PollSubmissionImage.tsx | 87 | ||||
-rw-r--r-- | src/pages/FeedPage/types.ts | 7 |
4 files changed, 0 insertions, 213 deletions
diff --git a/src/pages/FeedPage/FeedPage.tsx b/src/pages/FeedPage/FeedPage.tsx deleted file mode 100644 index da0fb2a..0000000 --- a/src/pages/FeedPage/FeedPage.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { Poll } from 'which-types'; -import { Container } from '@material-ui/core/'; - -import Feed from '../../components/Feed/Feed'; -import PollSubmission from './PollSubmission'; -import { useAuth } from '../../hooks/useAuth'; -import { useFeed } from '../../hooks/APIClient'; - -const FeedPage: React.FC = () => { - const { data, mutate } = useFeed(); - const { isAuthenticated } = useAuth(); - - const addPoll = (poll: Poll): void => { - mutate([poll, ...data], true); - }; - - return ( - <Container maxWidth="sm" disableGutters> - {isAuthenticated && <PollSubmission addPoll={addPoll} />} - <Feed polls={data} /> - </Container> - ); -}; - -export default FeedPage; - diff --git a/src/pages/FeedPage/PollSubmission.tsx b/src/pages/FeedPage/PollSubmission.tsx deleted file mode 100644 index 347eecc..0000000 --- a/src/pages/FeedPage/PollSubmission.tsx +++ /dev/null @@ -1,92 +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, Which } from 'which-types'; -import { useSnackbar } from 'notistack'; -import PollSubmissionImage from './PollSubmissionImage'; -import UserStrip from '../../components/UserStrip/UserStrip'; -import { post } from '../../requests'; -import { Contents } from './types'; -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 emptyContents: Contents = { - left: { url: '' }, - right: { url: '' } -}; - -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; - - const setUrl = (which: Which) => (url: string): void => { - setContents({ ...contents, [which]: { url } }); - }; - - const handleClickAway = () => { - setExpanded(false); - }; - - const handleClick = () => { - if (expanded && readyToSubmit) { - post('/polls/', { contents }).then(response => { - addPoll(response.data); - enqueueSnackbar('Your poll has been successfully created!', { - variant: 'success' - }); - }); - setContents({ ...emptyContents }); - } - setExpanded(!expanded); - }; - - return ( - <ClickAwayListener onClickAway={handleClickAway}> - <Card className={classes.root}> - <Collapse in={expanded} timeout="auto" unmountOnExit> - {user && <UserStrip user={user} info="" />} - <Divider /> - <div className={classes.images}> - <PollSubmissionImage url={contents.left.url} setUrl={setUrl('left')} /> - <PollSubmissionImage url={contents.right.url} setUrl={setUrl('right')} /> - </div> - </Collapse> - <Button - color="primary" - disabled={expanded && !readyToSubmit} - variant={expanded ? 'contained' : 'outlined'} - onClick={handleClick} - fullWidth - > - {expanded ? 'Submit' : 'Create a Poll'} - </Button> - </Card> - </ClickAwayListener> - ); -}; - -export default PollSubmission; diff --git a/src/pages/FeedPage/PollSubmissionImage.tsx b/src/pages/FeedPage/PollSubmissionImage.tsx deleted file mode 100644 index 8835989..0000000 --- a/src/pages/FeedPage/PollSubmissionImage.tsx +++ /dev/null @@ -1,87 +0,0 @@ -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 UploadImage from '../../components/UploadImage/UploadImage'; - -interface PropTypes { - url: string; - setUrl: (url: string) => 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<PropTypes> = ({ url, setUrl }) => { - const classes = useStyles(); - const [isModalOpen, setIsModalOpen] = useState(false); - const [isMediaHover, setIsMediaHover] = useState(false); - - const handleClick = (): void => { - if (!isModalOpen) { - if (url) setUrl(''); - else setIsModalOpen(!isModalOpen); - } - }; - - const handleMouseEnter = (): void => { - setIsMediaHover(true); - }; - - const handleMouseLeave = (): void => { - setIsMediaHover(false); - }; - - - const Upload = ( - <> - <CloudUploadIcon fontSize="large" color="primary" /> - <Typography variant="h5" className={classes.text}> Upload an image </Typography> - </> - ); - - const Media = ( - <CardMedia - image={url} - className={classes.media} - onMouseEnter={handleMouseEnter} - onMouseLeave={handleMouseLeave} - > - {isMediaHover && <CancelOutlinedIcon className={classes.clearIcon} />} - </CardMedia> - ); - - return ( - <> - <CardActionArea onClick={handleClick} className={classes.root}> - {url ? Media : Upload} - </CardActionArea> - <UploadImage isOpen={isModalOpen} setIsOpen={setIsModalOpen} callback={setUrl} /> - </> - ); -}; - -export default PollSubmissionImage; diff --git a/src/pages/FeedPage/types.ts b/src/pages/FeedPage/types.ts deleted file mode 100644 index 24ace4e..0000000 --- a/src/pages/FeedPage/types.ts +++ /dev/null @@ -1,7 +0,0 @@ -export interface ImageData { - url: string; -} -export interface Contents { - left: ImageData; - right: ImageData; -} |