refactor: improve poll addition

1 files changed, 25 insertions, 24 deletions

diff --git a/src/pages/FeedPage/PollSubmission.tsx b/src/pages/FeedPage/PollSubmission.tsx
index 9b1ac95..16c8350 100644
--- a/src/pages/FeedPage/PollSubmission.tsx
+++ b/src/pages/FeedPage/PollSubmission.tsx
@@ -7,18 +7,17 @@ import {
   ClickAwayListener,
   Divider
 } from '@material-ui/core';
-import { User, Poll } from 'which-types';
+import { User, Poll, Which } from 'which-types';
 import PollSubmissionImage from './PollSubmissionImage';
 import UserStrip from '../../components/UserStrip/UserStrip';
 import { post } from '../../requests';
 import { Contents } from './types';
 
-
 interface PropTypes{
   user: User;
-  polls: Poll[];
-  setPolls: (newPoll: Poll[])=> void;
+  addPoll: (poll: Poll) => void;
 }
+
 const useStyles = makeStyles(theme => ({
   root: {
     height: theme.spacing(50),
@@ -26,30 +25,32 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const PollSubmission: React.FC<PropTypes> = ({ user, polls, setPolls }) => {
+const emptyContents: Contents = {
+  left: { url: '' },
+  right: { url: '' }
+};
+
+const PollSubmission: React.FC<PropTypes> = ({ user, addPoll }) => {
   const classes = useStyles();
   const [expanded, setExpanded] = useState(false);
-  const [contents, setContents] = useState<Contents>({
-    left: {
-      url: ''
-    },
-    right: {
-      url: ''
-    }
-  });
+  const [contents, setContents] = useState<Contents>(emptyContents);
+
+  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) {
-      if (contents.left.url && contents.right.url) {
-        post('/polls/', { authorId: user._id, contents }).then(res => {
-          polls.unshift({ ...res.data });
-          setPolls([...polls]);
-        });
-      }
+    if (expanded && readyToSubmit) {
+      post('/polls/', { authorId: user._id, contents }).then(response => {
+        addPoll(response.data);
+      });
+      setContents({ ...emptyContents });
     }
     setExpanded(!expanded);
   };
@@ -61,18 +62,18 @@ const PollSubmission: React.FC<PropTypes> = ({ user, polls, setPolls }) => {
           <UserStrip user={user} info="" navigate={() => {}} />
           <Divider />
           <div className={classes.root}>
-            <PollSubmissionImage which="left" setContents={setContents} contents={contents} />
-            <PollSubmissionImage which="right" setContents={setContents} contents={contents} />
+            <PollSubmissionImage url={contents.left.url} setUrl={setUrl('left')} />
+            <PollSubmissionImage url={contents.right.url} setUrl={setUrl('right')} />
           </div>
         </Collapse>
         <Button
           color="primary"
-          disabled={expanded && !(contents.left.url && contents.right.url)}
+          disabled={expanded && !readyToSubmit}
           variant={expanded ? 'contained' : 'outlined'}
           onClick={handleClick}
           fullWidth
         >
-          {expanded ? 'Submit' : 'Create a Poll' }
+          {expanded ? 'Submit' : 'Create a Poll'}
         </Button>
       </Card>
     </ClickAwayListener>