From aed13f230d2673a489aec455e48d6edbb503e001 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Mon, 29 Jun 2020 22:03:52 +0300
Subject: refactor: improve poll addition

---
 src/pages/FeedPage/FeedPage.tsx            |  8 ++++-
 src/pages/FeedPage/PollSubmission.tsx      | 49 +++++++++++++++---------------
 src/pages/FeedPage/PollSubmissionImage.tsx | 32 +++++++------------
 3 files changed, 43 insertions(+), 46 deletions(-)

(limited to 'src')

diff --git a/src/pages/FeedPage/FeedPage.tsx b/src/pages/FeedPage/FeedPage.tsx
index 329647e..0017275 100644
--- a/src/pages/FeedPage/FeedPage.tsx
+++ b/src/pages/FeedPage/FeedPage.tsx
@@ -20,9 +20,15 @@ const FeedPage: React.FC<PropTypes> = ({ navigate, user }) => {
     });
   }, []);
 
+  const addPoll = (poll: Poll): void => {
+    polls.unshift(poll);
+    setPolls([...polls]);
+  };
+
+
   return (
     <>
-      {user && <PollSubmission user={user} polls={polls} setPolls={setPolls} />}
+      {user && <PollSubmission user={user} addPoll={addPoll} />}
       <Feed polls={polls} navigate={navigate} />
     </>
   );
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>
diff --git a/src/pages/FeedPage/PollSubmissionImage.tsx b/src/pages/FeedPage/PollSubmissionImage.tsx
index 3c2eb8e..1e9fa0e 100644
--- a/src/pages/FeedPage/PollSubmissionImage.tsx
+++ b/src/pages/FeedPage/PollSubmissionImage.tsx
@@ -3,15 +3,12 @@ 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 _ from 'lodash';
 
 import UploadImage from '../../components/UploadImage/UploadImage';
-import { Contents } from './types';
 
 interface PropTypes {
-  contents: Contents;
-  setContents: (newContents: Contents) => void;
-  which: 'left' | 'right';
+  url: string;
+  setUrl: (url: string) => void;
 }
 
 const useStyles = makeStyles({
@@ -35,29 +32,22 @@ const useStyles = makeStyles({
 });
 
 
-const PollSubmissionImage: React.FC<PropTypes> = ({ setContents, which, contents }) => {
+const PollSubmissionImage: React.FC<PropTypes> = ({ url, setUrl }) => {
   const classes = useStyles();
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [image, setImage] = useState('');
-  const [clearIconDisplay, setClearIconDisplay] = useState(false);
-
-  const patchUrl = (url: string): void => {
-    setImage(url);
-    const newContents = _.set(contents, which, { url });
-    setContents({ ...newContents });
-  };
+  const [isMediaHover, setIsMediaHover] = useState(false);
 
   const handleClick = (): void => {
-    if (image) patchUrl('');
+    if (url) setUrl('');
     else setIsModalOpen(!isModalOpen);
   };
 
   const handleMouseEnter = (): void => {
-    setClearIconDisplay(true);
+    setIsMediaHover(true);
   };
 
   const handleMouseLeave = (): void => {
-    setClearIconDisplay(false);
+    setIsMediaHover(false);
   };
 
 
@@ -65,24 +55,24 @@ const PollSubmissionImage: React.FC<PropTypes> = ({ setContents, which, contents
     <>
       <CloudUploadIcon fontSize="large" color="primary" />
       <Typography variant="h5"> Upload an image </Typography>
-      <UploadImage isOpen={isModalOpen} setIsOpen={setIsModalOpen} callback={patchUrl} />
+      <UploadImage isOpen={isModalOpen} setIsOpen={setIsModalOpen} callback={setUrl} />
     </>
   );
 
   const Media = (
     <CardMedia
-      image={image}
+      image={url}
       className={classes.media}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
-      {clearIconDisplay && <CancelOutlinedIcon className={classes.clearIcon} />}
+      {isMediaHover && <CancelOutlinedIcon className={classes.clearIcon} />}
     </CardMedia>
   );
 
   return (
     <CardActionArea onClick={handleClick} className={classes.root}>
-      {image ? Media : Upload}
+      {url ? Media : Upload}
     </CardActionArea>
   );
 };
-- 
cgit v1.2.3