refactor!: improve code quality :recycle:

2 files changed, 54 insertions, 57 deletions

diff --git a/src/pages/FeedPage/PollSubmission.tsx b/src/pages/FeedPage/PollSubmission.tsx
index 56c4242..38f70c3 100644
--- a/src/pages/FeedPage/PollSubmission.tsx
+++ b/src/pages/FeedPage/PollSubmission.tsx
@@ -2,7 +2,10 @@ import React, { useState } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Collapse from '@material-ui/core/Collapse';
 import {
-  Button, Card, CardMedia, ClickAwayListener, Divider
+  Button,
+  Card,
+  ClickAwayListener,
+  Divider
 } from '@material-ui/core';
 import { User, Poll } from 'which-types';
 import PollSubmissionImage from './PollSubmissionImage';
@@ -14,27 +17,12 @@ import { Contents } from './types';
 interface PropTypes{
   user: User;
   polls: Poll[];
-  setPolls: (a:Poll[])=> void;
+  setPolls: (newPoll: Poll[])=> void;
 }
 const useStyles = makeStyles(theme => ({
   root: {
-    textAlign: 'center',
-    cursor: 'pointer'
-  },
-  card: {
-    height: 400,
-    display: 'flex'
-  },
-  images: {
     height: theme.spacing(50),
-    width: 300,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    cursor: 'pointer'
-  },
-  button: {
-    width: '100%'
+    display: 'flex'
   }
 }));
 
@@ -68,21 +56,23 @@ const PollSubmission: React.FC<PropTypes> = ({ user, polls, setPolls }) => {
 
   return (
     <ClickAwayListener onClickAway={handleClickAway}>
-      <Card className={classes.root}>
+      <Card>
         <Collapse in={expanded} timeout="auto" unmountOnExit>
           <UserStrip user={user} info="" navigate={() => {}} />
           <Divider />
-          <CardMedia className={classes.card}>
+          <div className={classes.root}>
             <PollSubmissionImage which="left" setContents={setContents} contents={contents} />
             <PollSubmissionImage which="right" setContents={setContents} contents={contents} />
-          </CardMedia>
+          </div>
         </Collapse>
-        <Button onClick={handleClick} color="primary" variant={expanded ? "contained" : "outlined" } className={classes.button}>
-          {
-          !expanded
-            ? 'Create a Poll'
-            : 'Submit'
-        }
+        <Button
+          color="primary"
+          disabled={expanded && !(contents.left.url && contents.right.url)}
+          variant={expanded ? "contained" : "outlined"}
+          onClick={handleClick}
+          fullWidth
+        >
+          {expanded ? 'Submit' : 'Create a Poll' }
         </Button>
       </Card>
     </ClickAwayListener>
diff --git a/src/pages/FeedPage/PollSubmissionImage.tsx b/src/pages/FeedPage/PollSubmissionImage.tsx
index 2dadbee..757083b 100644
--- a/src/pages/FeedPage/PollSubmissionImage.tsx
+++ b/src/pages/FeedPage/PollSubmissionImage.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import CloudUploadIcon from '@material-ui/icons/CloudUpload';
-import { CardActionArea, CardMedia } from '@material-ui/core';
+import { CardActionArea, CardMedia, Typography } from '@material-ui/core';
 import UploadImage from '../../components/UploadImage/UploadImage';
 import { Contents } from './types';
 import CancelOutlinedIcon from '@material-ui/icons/CancelOutlined';
@@ -13,24 +13,29 @@ interface PropTypes {
 }
 
 const useStyles = makeStyles(theme => ({
-  images: {
-    height: theme.spacing(50),
-    width: 300,
+  root: {
     display: 'flex',
     justifyContent: 'center',
-    alignItems: 'center',
-    cursor: 'pointer',
-    boxShadow: 'inset 0 0 10px;'
+    flexDirection: 'column',
+    alignItems: 'center'
   },
   clearIcon: {
     opacity: '.5',
-    fontSize: 100
+    fontSize: 50
+  },
+  media: {
+    height: '100%',
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
   }
 }));
 
+
 const PollSubmissionImage: React.FC<PropTypes> = ({ setContents, which, contents }) => {
   const classes = useStyles();
-  const [display, setDisplay] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const [image, setImage] = useState('');
   const [clearIconDisplay, setClearIconDisplay] = useState(false);
 
@@ -41,9 +46,7 @@ const PollSubmissionImage: React.FC<PropTypes> = ({ setContents, which, contents
   };
 
   const handleClick = () => {
-    image === ''
-      ? setDisplay(!display)
-      : patchUrl('');
+    image ? patchUrl('') : setIsModalOpen(!isModalOpen);
   };
 
   const handleMouseEnter = () => {
@@ -54,27 +57,31 @@ const PollSubmissionImage: React.FC<PropTypes> = ({ setContents, which, contents
     setClearIconDisplay(false);
   };
 
-  return (
+
+  const Upload = (
     <>
-      <CardActionArea onClick={handleClick}>
-        <CardMedia
-          className={classes.images}
-          image={image}
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
-        >
-          {
-            image === ''
-              ? <CloudUploadIcon fontSize="large" color="primary" />
-              : clearIconDisplay
-                ? <CancelOutlinedIcon className={classes.clearIcon}  />
-                : null
-          }
-        </CardMedia>
-      </CardActionArea>
-      <UploadImage display={display} isOpen={setDisplay} callback={patchUrl} />
+      <CloudUploadIcon fontSize="large" color="primary" />
+      <Typography variant="h5"> Upload an image </Typography>
+      <UploadImage isOpen={isModalOpen} setIsOpen={setIsModalOpen} callback={patchUrl} />
     </>
   );
+
+  const Media = (
+    <CardMedia
+      image={image}
+      className={classes.media}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {clearIconDisplay && <CancelOutlinedIcon className={classes.clearIcon} />}
+    </CardMedia>
+  )
+
+  return (
+    <CardActionArea onClick={handleClick} className={classes.root}>
+      {image ? Media : Upload}
+    </CardActionArea>
+  );
 };
 
 export default PollSubmissionImage;