delete images in poll submission

1 files changed, 28 insertions, 5 deletions

diff --git a/src/pages/FeedPage/PollSubmissionImage.tsx b/src/pages/FeedPage/PollSubmissionImage.tsx
index bf268a3..42389f6 100644
--- a/src/pages/FeedPage/PollSubmissionImage.tsx
+++ b/src/pages/FeedPage/PollSubmissionImage.tsx
@@ -4,6 +4,7 @@ import CloudUploadIcon from '@material-ui/icons/CloudUpload';
 import { CardActionArea, CardMedia } from '@material-ui/core';
 import UploadImage from '../../components/UploadImage/UploadImage';
 import { Contents } from './types';
+import ClearIcon from '@material-ui/icons/Clear';
 
 interface PropTypes {
   contents: Contents;
@@ -18,7 +19,12 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-    cursor: 'pointer'
+    cursor: 'pointer',
+    boxShadow: 'inset 0 0 10px;'
+  },
+  clearIcon: {
+    opacity: '.4',
+    fontSize: 130
   }
 }));
 
@@ -26,9 +32,13 @@ const PollSubmissionImage: React.FC<PropTypes> = ({ setContents, which, contents
   const classes = useStyles();
   const [display, setDisplay] = useState(false);
   const [image, setImage] = useState('');
+  const [clearIconDisplay, setClearIconDisplay] = useState(false);
 
   const handleClick = () => {
-    setDisplay(!display);
+    image === ''
+      ? setDisplay(!display)
+      : patchUrl('');
+
   };
 
   const patchUrl = (url: string) => {
@@ -37,12 +47,25 @@ const PollSubmissionImage: React.FC<PropTypes> = ({ setContents, which, contents
     setContents({...contents});
   };
 
+  const handleMouseEnter = () => {
+    setClearIconDisplay(true);
+  };
+
+  const handleMouseLeave = () => {
+    setClearIconDisplay(false);
+  };
 
   return (
     <>
-      <CardActionArea onClick={handleClick}>
-        <CardMedia className={classes.images} image={image}>
-          <CloudUploadIcon />
+      <CardActionArea onClick={handleClick} >
+        <CardMedia className={classes.images} image={image} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+          {
+            image === ''
+              ? <CloudUploadIcon fontSize='large' color='primary' />
+              : clearIconDisplay
+              ?  <ClearIcon className={classes.clearIcon} color='primary'/>
+              : null
+          }
         </CardMedia>
       </CardActionArea>
       <UploadImage displayD={display} setDisplayD={setDisplay} callback={patchUrl} />