aboutsummaryrefslogtreecommitdiff
path: root/src/pages/FeedPage/PollSubmissionImage.tsx
diff options
context:
space:
mode:
authoreug-vs <eug-vs@keemail.me>2020-08-10 00:28:39 +0300
committereug-vs <eug-vs@keemail.me>2020-08-10 00:28:39 +0300
commit7ba15a22d1bd57e7c26ff2d5fccf5505aaf8619e (patch)
tree8a71d8dd4bf89f09f14aee2636f519572e95f891 /src/pages/FeedPage/PollSubmissionImage.tsx
parentdfa6f0a8d1415539e1ff6a3ca848627bbe87b470 (diff)
downloadwhich-ui-7ba15a22d1bd57e7c26ff2d5fccf5505aaf8619e.tar.gz
refactor: move pages -> containers
Diffstat (limited to 'src/pages/FeedPage/PollSubmissionImage.tsx')
-rw-r--r--src/pages/FeedPage/PollSubmissionImage.tsx87
1 files changed, 0 insertions, 87 deletions
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;