aboutsummaryrefslogtreecommitdiff
path: root/src/pages/FeedPage
diff options
context:
space:
mode:
Diffstat (limited to 'src/pages/FeedPage')
-rw-r--r--src/pages/FeedPage/FeedPage.tsx27
-rw-r--r--src/pages/FeedPage/PollSubmission.tsx92
-rw-r--r--src/pages/FeedPage/PollSubmissionImage.tsx87
-rw-r--r--src/pages/FeedPage/types.ts7
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;
-}