From 7ad127942bb12ee9de691e10dc9386849459ea46 Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Sun, 28 Jun 2020 19:09:20 +0300
Subject: feat: add poll submission component

---
 src/components/UploadImage/UploadImage.tsx | 28 +++++-----
 src/index.tsx                              |  2 +-
 src/pages/FeedPage/FeedPage.tsx            | 14 +++--
 src/pages/FeedPage/PollSubmission.tsx      | 87 ++++++++++++++++++++++++++++++
 src/pages/FeedPage/PollSubmissionImage.tsx | 60 +++++++++++++++++++++
 src/pages/FeedPage/types.ts                |  7 +++
 src/pages/ProfilePage/ProfileInfo.tsx      | 12 ++++-
 src/types.d.ts                             |  1 -
 8 files changed, 190 insertions(+), 21 deletions(-)
 create mode 100644 src/pages/FeedPage/PollSubmission.tsx
 create mode 100644 src/pages/FeedPage/PollSubmissionImage.tsx
 create mode 100644 src/pages/FeedPage/types.ts

(limited to 'src')

diff --git a/src/components/UploadImage/UploadImage.tsx b/src/components/UploadImage/UploadImage.tsx
index 42ee989..464a9cf 100644
--- a/src/components/UploadImage/UploadImage.tsx
+++ b/src/components/UploadImage/UploadImage.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import Button from '@material-ui/core/Button';
 import TextField from '@material-ui/core/TextField';
 import Dialog from '@material-ui/core/Dialog';
@@ -6,35 +6,32 @@ import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
-import { User } from 'which-types';
-import { patch } from '../../requests';
 
 interface PropTypes {
   displayD: boolean;
   setDisplayD: (d: boolean) => void;
-  setUserInfo: (a: User) => void;
-  setUser: (a: User) => void
+  callback: (a: string) => void;
 }
 
 const UploadImage: React.FC<PropTypes> = ({
-  displayD, setDisplayD, setUserInfo, setUser
+  displayD, setDisplayD, callback
 }) => {
-  const urlRef = useRef<HTMLInputElement>(null);
+  const urlRef = useRef<HTMLInputElement | null>(null);
+  const [url, setUrl] = useState('');
 
   const handleClose = () => {
     setDisplayD(false);
   };
 
-  const updateAvatar = () => {
-    const id = localStorage.getItem('userId');
-    const newAvatar = urlRef.current?.value;
-    patch(`/users/${id}`, { avatarUrl: newAvatar }).then(res => {
-      setUserInfo(res.data);
-      setUser(res.data);
-    });
+  const update = () => {
+    callback(urlRef.current?.value || '');
     setDisplayD(false);
   };
 
+  const handleChange = (event:React.ChangeEvent<HTMLInputElement>) => {
+    setUrl(event.target.value);
+  };
+
   return (
     <div>
       <Dialog open={displayD} onClose={handleClose}>
@@ -52,13 +49,14 @@ const UploadImage: React.FC<PropTypes> = ({
             fullWidth
             autoComplete="off"
             inputRef={urlRef}
+            onChange={handleChange}
           />
         </DialogContent>
         <DialogActions>
           <Button onClick={handleClose} color="primary">
             Cancel
           </Button>
-          <Button onClick={updateAvatar} color="primary">
+          <Button onClick={update} color="primary" disabled={!url.length}>
             Submit
           </Button>
         </DialogActions>
diff --git a/src/index.tsx b/src/index.tsx
index 49c177b..02f7969 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -104,7 +104,7 @@ const App: React.FC = () => {
             setUser={setUser}
           />
         ) }
-        { page.prefix === 'feed' && <FeedPage navigate={navigate} /> }
+        { page.prefix === 'feed' && <FeedPage navigate={navigate} user={user} /> }
         { page.prefix === 'auth' && <AuthPage logIn={logIn} /> }
       </div>
       <ScrollTopArrow />
diff --git a/src/pages/FeedPage/FeedPage.tsx b/src/pages/FeedPage/FeedPage.tsx
index b7d719e..afe2ef7 100644
--- a/src/pages/FeedPage/FeedPage.tsx
+++ b/src/pages/FeedPage/FeedPage.tsx
@@ -1,14 +1,17 @@
 import React, { useState, useEffect } from 'react';
-import { Poll } from 'which-types';
+import { Poll, User } from 'which-types';
 
 import Feed from '../../components/Feed/Feed';
 import { get } from '../../requests';
+import PollSubmission from './PollSubmission';
+
 
 interface PropTypes {
   navigate: (prefix: string, id: string) => void;
+  user: User | undefined;
 }
 
-const FeedPage: React.FC<PropTypes> = ({ navigate }) => {
+const FeedPage: React.FC<PropTypes> = ({ navigate, user }) => {
   const [polls, setPolls] = useState<Poll[]>([]);
 
   useEffect(() => {
@@ -17,7 +20,12 @@ const FeedPage: React.FC<PropTypes> = ({ navigate }) => {
     });
   }, []);
 
-  return <Feed polls={polls} navigate={navigate} />;
+  return (
+    <>
+      {user && <PollSubmission user={user} />}
+      <Feed polls={polls} navigate={navigate} />
+    </>
+  );
 };
 
 export default FeedPage;
diff --git a/src/pages/FeedPage/PollSubmission.tsx b/src/pages/FeedPage/PollSubmission.tsx
new file mode 100644
index 0000000..c76e9fb
--- /dev/null
+++ b/src/pages/FeedPage/PollSubmission.tsx
@@ -0,0 +1,87 @@
+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
+} from '@material-ui/core';
+import { User } 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;
+}
+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%'
+  }
+}));
+
+const PollSubmission: React.FC<PropTypes> = ({ user }) => {
+  const classes = useStyles();
+  const [expanded, setExpanded] = useState(false);
+  const [contents, setContents] = useState<Contents>({
+    left: {
+      url: ''
+    },
+    right: {
+      url: ''
+    }
+  });
+
+  const handleClickAway = () => {
+    setExpanded(false);
+  };
+
+  const handleClick = () => {
+    if (expanded) {
+      post('/polls/', { authorId: user._id, contents }).then(res => {
+        console.log(res.data);
+      });
+    }
+    setExpanded(!expanded);
+  };
+
+  return (
+    <ClickAwayListener onClickAway={handleClickAway}>
+      <Card className={classes.root}>
+        <Collapse in={expanded} timeout="auto" unmountOnExit>
+          <UserStrip user={user} info="" navigate={() => {}} />
+          <Divider />
+          <CardMedia className={classes.card}>
+            <PollSubmissionImage which="left" setContents={setContents} />
+            <PollSubmissionImage which="right" setContents={setContents} />
+          </CardMedia>
+        </Collapse>
+        <Button onClick={handleClick} color="primary" variant="outlined" className={classes.button}>
+          {
+          expanded === false
+            ? 'Create a Poll'
+            : 'Submit'
+        }
+        </Button>
+      </Card>
+    </ClickAwayListener>
+  );
+};
+
+export default PollSubmission;
diff --git a/src/pages/FeedPage/PollSubmissionImage.tsx b/src/pages/FeedPage/PollSubmissionImage.tsx
new file mode 100644
index 0000000..c7e638c
--- /dev/null
+++ b/src/pages/FeedPage/PollSubmissionImage.tsx
@@ -0,0 +1,60 @@
+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 UploadImage from '../../components/UploadImage/UploadImage';
+import { Contents } from './types';
+
+interface PropTypes {
+  setContents: (a: Contents) => void;
+  which: 'left' | 'right';
+}
+
+const useStyles = makeStyles(theme => ({
+  images: {
+    height: theme.spacing(50),
+    width: 300,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    cursor: 'pointer'
+  }
+}));
+
+const PollSubmissionImage: React.FC<PropTypes> = ({ setContents, which }) => {
+  const classes = useStyles();
+  const [display, setDisplay] = useState(false);
+  const [image, setImage] = useState('');
+
+  const handleClick = () => {
+    setDisplay(!display);
+  };
+
+  const patchUrl = (url: string) => {
+    setImage(url);
+    let nextImage;
+    which === 'left' ? nextImage = 'right' : nextImage = 'left';
+    setContents({
+      [which]: {
+        url
+      },
+      [nextImage]: {
+        url
+      }
+    });
+  };
+
+
+  return (
+    <>
+      <CardActionArea onClick={handleClick}>
+        <CardMedia className={classes.images} image={image}>
+          <CloudUploadIcon />
+        </CardMedia>
+      </CardActionArea>
+      <UploadImage displayD={display} setDisplayD={setDisplay} callback={patchUrl} />
+    </>
+  );
+};
+
+export default PollSubmissionImage;
diff --git a/src/pages/FeedPage/types.ts b/src/pages/FeedPage/types.ts
new file mode 100644
index 0000000..a3c95ff
--- /dev/null
+++ b/src/pages/FeedPage/types.ts
@@ -0,0 +1,7 @@
+export interface ImageData {
+  url: string;
+}
+export interface Contents {
+  left?: ImageData;
+  right?: ImageData;
+}
diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx
index 2b9227e..fada65f 100644
--- a/src/pages/ProfilePage/ProfileInfo.tsx
+++ b/src/pages/ProfilePage/ProfileInfo.tsx
@@ -7,6 +7,7 @@ import VerifiedIcon from '@material-ui/icons/CheckCircleOutline';
 import MoreMenu from './MoreMenu';
 import Highlight from './Highlight';
 import UploadImage from '../../components/UploadImage/UploadImage';
+import { patch } from '../../requests';
 
 
 interface PropTypes {
@@ -82,12 +83,21 @@ const ProfileInfo: React.FC<PropTypes> = ({
   const classes = useStyles();
   const [input, setInput] = useState(false);
 
+
   const dateSince = new Date(user?.createdAt || '').toLocaleDateString();
 
   const handleClick = () => {
     setInput(!input);
   };
 
+  const patchAvatar = (url: string) => {
+    const id = localStorage.getItem('userId');
+    patch(`/users/${id}`, { avatarUrl: url }).then(res => {
+      setUserInfo(res.data);
+      setUser(res.data);
+    });
+  };
+
   return (
     <div className={classes.root}>
       {
@@ -112,7 +122,7 @@ const ProfileInfo: React.FC<PropTypes> = ({
                   <Avatar className={classes.avatar} src={user?.avatarUrl} />
                 </Badge>
               </div>
-              <UploadImage displayD={input} setDisplayD={setInput} setUserInfo={setUserInfo} setUser={setUser} />
+              <UploadImage displayD={input} setDisplayD={setInput} callback={patchAvatar} />
             </div>
 )
           : <Avatar className={classes.avatar} src={user?.avatarUrl} />
diff --git a/src/types.d.ts b/src/types.d.ts
index 73346ce..4b1ffd6 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -2,4 +2,3 @@ export interface Page {
   prefix: string;
   id: string;
 }
-
-- 
cgit v1.2.3


From 28c80d1c2e33706a3a754b3e5e26dc2685cf8592 Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Sun, 28 Jun 2020 19:32:48 +0300
Subject: fix: able to add 2 different images to poll submission

---
 src/pages/FeedPage/PollSubmission.tsx      |  4 ++--
 src/pages/FeedPage/PollSubmissionImage.tsx | 15 ++++-----------
 2 files changed, 6 insertions(+), 13 deletions(-)

(limited to 'src')

diff --git a/src/pages/FeedPage/PollSubmission.tsx b/src/pages/FeedPage/PollSubmission.tsx
index c76e9fb..40ca3d7 100644
--- a/src/pages/FeedPage/PollSubmission.tsx
+++ b/src/pages/FeedPage/PollSubmission.tsx
@@ -68,8 +68,8 @@ const PollSubmission: React.FC<PropTypes> = ({ user }) => {
           <UserStrip user={user} info="" navigate={() => {}} />
           <Divider />
           <CardMedia className={classes.card}>
-            <PollSubmissionImage which="left" setContents={setContents} />
-            <PollSubmissionImage which="right" setContents={setContents} />
+            <PollSubmissionImage which="left" setContents={setContents} contents={contents}/>
+            <PollSubmissionImage which="right" setContents={setContents} contents={contents}/>
           </CardMedia>
         </Collapse>
         <Button onClick={handleClick} color="primary" variant="outlined" className={classes.button}>
diff --git a/src/pages/FeedPage/PollSubmissionImage.tsx b/src/pages/FeedPage/PollSubmissionImage.tsx
index c7e638c..bf268a3 100644
--- a/src/pages/FeedPage/PollSubmissionImage.tsx
+++ b/src/pages/FeedPage/PollSubmissionImage.tsx
@@ -6,6 +6,7 @@ import UploadImage from '../../components/UploadImage/UploadImage';
 import { Contents } from './types';
 
 interface PropTypes {
+  contents: Contents;
   setContents: (a: Contents) => void;
   which: 'left' | 'right';
 }
@@ -21,7 +22,7 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const PollSubmissionImage: React.FC<PropTypes> = ({ setContents, which }) => {
+const PollSubmissionImage: React.FC<PropTypes> = ({ setContents, which, contents }) => {
   const classes = useStyles();
   const [display, setDisplay] = useState(false);
   const [image, setImage] = useState('');
@@ -32,16 +33,8 @@ const PollSubmissionImage: React.FC<PropTypes> = ({ setContents, which }) => {
 
   const patchUrl = (url: string) => {
     setImage(url);
-    let nextImage;
-    which === 'left' ? nextImage = 'right' : nextImage = 'left';
-    setContents({
-      [which]: {
-        url
-      },
-      [nextImage]: {
-        url
-      }
-    });
+    contents[which] = {url};
+    setContents({...contents});
   };
 
 
-- 
cgit v1.2.3


From 37d3d4ca801ab282104ed41d97e10911e288947a Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Mon, 29 Jun 2020 04:09:40 +0300
Subject: delete images in poll submission

---
 src/pages/FeedPage/PollSubmission.tsx      |  8 +++++---
 src/pages/FeedPage/PollSubmissionImage.tsx | 33 +++++++++++++++++++++++++-----
 2 files changed, 33 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/pages/FeedPage/PollSubmission.tsx b/src/pages/FeedPage/PollSubmission.tsx
index 40ca3d7..9a3a042 100644
--- a/src/pages/FeedPage/PollSubmission.tsx
+++ b/src/pages/FeedPage/PollSubmission.tsx
@@ -54,9 +54,11 @@ const PollSubmission: React.FC<PropTypes> = ({ user }) => {
 
   const handleClick = () => {
     if (expanded) {
-      post('/polls/', { authorId: user._id, contents }).then(res => {
-        console.log(res.data);
-      });
+      if(contents.left?.url && contents.right?.url ) {
+        post('/polls/', {authorId: user._id, contents}).then(res => {
+          console.log(res.data);
+        });
+      }
     }
     setExpanded(!expanded);
   };
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} />
-- 
cgit v1.2.3


From ae43b7234f51fbe570e2274581654a214ae7f44b Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Mon, 29 Jun 2020 04:12:47 +0300
Subject: fix: change avatar only by click on camera icon

---
 src/pages/ProfilePage/ProfileInfo.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx
index fada65f..659d104 100644
--- a/src/pages/ProfilePage/ProfileInfo.tsx
+++ b/src/pages/ProfilePage/ProfileInfo.tsx
@@ -107,7 +107,6 @@ const ProfileInfo: React.FC<PropTypes> = ({
               <MoreMenu logOut={logOut} />
               <div className={classes.avatarContainer}>
                 <Badge
-                  onClick={handleClick}
                   overlap="circle"
                   anchorOrigin={{
                     vertical: 'bottom',
@@ -115,7 +114,7 @@ const ProfileInfo: React.FC<PropTypes> = ({
                   }}
                   badgeContent={(
                     <div className={classes.badge}>
-                      <CameraAltIcon />
+                      <CameraAltIcon onClick={handleClick} />
                     </div>
                   )}
                 >
-- 
cgit v1.2.3


From 447d864ef38c4e3acdbee0031c15c1f24473851e Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Mon, 29 Jun 2020 04:25:18 +0300
Subject: fix: if url is not valid display icon

---
 src/components/Header/Header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 1825647..363e300 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -62,7 +62,7 @@ const Header: React.FC<PropTypes> = ({ navigate, userImage }) => {
           </IconButton>
           <IconButton onClick={handleProfile}>
             {
-              userImage !== undefined
+              userImage?.match(/\.(jpeg|jpg|gif|png)$/) !== null
                 ? <Avatar className={classes.avatar} src={userImage} />
                 : <AccountCircle />
             }
-- 
cgit v1.2.3


From 4037868a791c706c4d77d6353e396cb6454995be Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Mon, 29 Jun 2020 14:22:41 +0300
Subject: fix: show zero percentage instead of NaN

---
 src/components/PollCard/PollCard.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index d3b4fc2..f222a63 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -72,8 +72,13 @@ const PollCard: React.FC<PropTypes> = ({ initialPoll, navigate }) => {
   const handleLeft = () => vote('left');
   const handleRight = () => vote('right');
 
-  const leftPercentage = Math.round(100 * (left.votes / (left.votes + right.votes)));
-  const rightPercentage = 100 - leftPercentage;
+  let leftPercentage = Math.round(100 * (left.votes / (left.votes + right.votes)));
+  let rightPercentage = 100 - leftPercentage;
+
+  if(Number.isNaN(leftPercentage) && Number.isNaN(rightPercentage)){
+    leftPercentage = 0;
+    rightPercentage = 0;
+  }
 
   const dominant: Which = left.votes >= right.votes ? 'left' : 'right';
 
-- 
cgit v1.2.3


From 0852cbeea6a3872c4a3a4b7dd974db53eb0a85dd Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Mon, 29 Jun 2020 15:35:34 +0300
Subject: show new poll right after submit

---
 src/pages/FeedPage/FeedPage.tsx       |  2 +-
 src/pages/FeedPage/PollSubmission.tsx | 11 +++++++----
 src/pages/FeedPage/types.ts           |  4 ++--
 3 files changed, 10 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/pages/FeedPage/FeedPage.tsx b/src/pages/FeedPage/FeedPage.tsx
index afe2ef7..a7bbbbd 100644
--- a/src/pages/FeedPage/FeedPage.tsx
+++ b/src/pages/FeedPage/FeedPage.tsx
@@ -22,7 +22,7 @@ const FeedPage: React.FC<PropTypes> = ({ navigate, user }) => {
 
   return (
     <>
-      {user && <PollSubmission user={user} />}
+      {user && <PollSubmission user={user} polls={polls} setPolls={setPolls}/>}
       <Feed polls={polls} navigate={navigate} />
     </>
   );
diff --git a/src/pages/FeedPage/PollSubmission.tsx b/src/pages/FeedPage/PollSubmission.tsx
index 9a3a042..65e33b6 100644
--- a/src/pages/FeedPage/PollSubmission.tsx
+++ b/src/pages/FeedPage/PollSubmission.tsx
@@ -4,7 +4,7 @@ import Collapse from '@material-ui/core/Collapse';
 import {
   Button, Card, CardMedia, ClickAwayListener, Divider
 } from '@material-ui/core';
-import { User } from 'which-types';
+import { User, Poll } from 'which-types';
 import PollSubmissionImage from './PollSubmissionImage';
 import UserStrip from '../../components/UserStrip/UserStrip';
 import { post } from '../../requests';
@@ -13,6 +13,8 @@ import { Contents } from './types';
 
 interface PropTypes{
   user: User;
+  polls: Poll[];
+  setPolls: (a:Poll[])=> void;
 }
 const useStyles = makeStyles(theme => ({
   root: {
@@ -36,7 +38,7 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const PollSubmission: React.FC<PropTypes> = ({ user }) => {
+const PollSubmission: React.FC<PropTypes> = ({ user , polls, setPolls}) => {
   const classes = useStyles();
   const [expanded, setExpanded] = useState(false);
   const [contents, setContents] = useState<Contents>({
@@ -54,9 +56,10 @@ const PollSubmission: React.FC<PropTypes> = ({ user }) => {
 
   const handleClick = () => {
     if (expanded) {
-      if(contents.left?.url && contents.right?.url ) {
+      if(contents.left.url && contents.right.url ) {
         post('/polls/', {authorId: user._id, contents}).then(res => {
-          console.log(res.data);
+          polls.unshift({...res.data});
+          setPolls([...polls]);
         });
       }
     }
diff --git a/src/pages/FeedPage/types.ts b/src/pages/FeedPage/types.ts
index a3c95ff..24ace4e 100644
--- a/src/pages/FeedPage/types.ts
+++ b/src/pages/FeedPage/types.ts
@@ -2,6 +2,6 @@ export interface ImageData {
   url: string;
 }
 export interface Contents {
-  left?: ImageData;
-  right?: ImageData;
+  left: ImageData;
+  right: ImageData;
 }
-- 
cgit v1.2.3


From 856522da17348e54b0d390f10772c21b4029e9bd Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Mon, 29 Jun 2020 17:31:51 +0300
Subject: fix: make code redably clear

---
 src/components/Header/Header.tsx           |  2 +-
 src/components/PollCard/PollCard.tsx       |  9 +++++---
 src/components/UploadImage/UploadImage.tsx | 24 ++++++++++-----------
 src/pages/FeedPage/FeedPage.tsx            |  2 +-
 src/pages/FeedPage/PollSubmission.tsx      | 14 ++++++------
 src/pages/FeedPage/PollSubmissionImage.tsx | 34 +++++++++++++++++-------------
 src/pages/ProfilePage/ProfileInfo.tsx      |  2 +-
 7 files changed, 46 insertions(+), 41 deletions(-)

(limited to 'src')

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 363e300..d0d9081 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -62,7 +62,7 @@ const Header: React.FC<PropTypes> = ({ navigate, userImage }) => {
           </IconButton>
           <IconButton onClick={handleProfile}>
             {
-              userImage?.match(/\.(jpeg|jpg|gif|png)$/) !== null
+              userImage?.match(/\.(jpeg|jpg|gif|png)$/)
                 ? <Avatar className={classes.avatar} src={userImage} />
                 : <AccountCircle />
             }
diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index f222a63..f82ea44 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -72,10 +72,13 @@ const PollCard: React.FC<PropTypes> = ({ initialPoll, navigate }) => {
   const handleLeft = () => vote('left');
   const handleRight = () => vote('right');
 
-  let leftPercentage = Math.round(100 * (left.votes / (left.votes + right.votes)));
-  let rightPercentage = 100 - leftPercentage;
+  let leftPercentage;
+  let rightPercentage;
 
-  if(Number.isNaN(leftPercentage) && Number.isNaN(rightPercentage)){
+  if (left.votes || right.votes) {
+    leftPercentage = Math.round(100 * (left.votes / (left.votes + right.votes)));
+    rightPercentage = 100 - leftPercentage;
+  } else {
     leftPercentage = 0;
     rightPercentage = 0;
   }
diff --git a/src/components/UploadImage/UploadImage.tsx b/src/components/UploadImage/UploadImage.tsx
index 464a9cf..3a58e29 100644
--- a/src/components/UploadImage/UploadImage.tsx
+++ b/src/components/UploadImage/UploadImage.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useState } from 'react';
 import Button from '@material-ui/core/Button';
 import TextField from '@material-ui/core/TextField';
 import Dialog from '@material-ui/core/Dialog';
@@ -8,24 +8,23 @@ import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
 
 interface PropTypes {
-  displayD: boolean;
-  setDisplayD: (d: boolean) => void;
-  callback: (a: string) => void;
+  display: boolean;
+  isOpen: (display: boolean) => void;
+  callback: (url: string) => void;
 }
 
 const UploadImage: React.FC<PropTypes> = ({
-  displayD, setDisplayD, callback
+  display, isOpen, callback
 }) => {
-  const urlRef = useRef<HTMLInputElement | null>(null);
   const [url, setUrl] = useState('');
 
   const handleClose = () => {
-    setDisplayD(false);
+    isOpen(false);
   };
 
-  const update = () => {
-    callback(urlRef.current?.value || '');
-    setDisplayD(false);
+  const handleSubmit = () => {
+    callback(url || '');
+    isOpen(false);
   };
 
   const handleChange = (event:React.ChangeEvent<HTMLInputElement>) => {
@@ -34,7 +33,7 @@ const UploadImage: React.FC<PropTypes> = ({
 
   return (
     <div>
-      <Dialog open={displayD} onClose={handleClose}>
+      <Dialog open={display} onClose={handleClose}>
         <DialogTitle id="form-dialog-title">Upload an Image</DialogTitle>
         <DialogContent>
           <DialogContentText>
@@ -48,7 +47,6 @@ const UploadImage: React.FC<PropTypes> = ({
             type="text"
             fullWidth
             autoComplete="off"
-            inputRef={urlRef}
             onChange={handleChange}
           />
         </DialogContent>
@@ -56,7 +54,7 @@ const UploadImage: React.FC<PropTypes> = ({
           <Button onClick={handleClose} color="primary">
             Cancel
           </Button>
-          <Button onClick={update} color="primary" disabled={!url.length}>
+          <Button onClick={handleSubmit} color="primary" disabled={!url.length}>
             Submit
           </Button>
         </DialogActions>
diff --git a/src/pages/FeedPage/FeedPage.tsx b/src/pages/FeedPage/FeedPage.tsx
index a7bbbbd..329647e 100644
--- a/src/pages/FeedPage/FeedPage.tsx
+++ b/src/pages/FeedPage/FeedPage.tsx
@@ -22,7 +22,7 @@ const FeedPage: React.FC<PropTypes> = ({ navigate, user }) => {
 
   return (
     <>
-      {user && <PollSubmission user={user} polls={polls} setPolls={setPolls}/>}
+      {user && <PollSubmission user={user} polls={polls} setPolls={setPolls} />}
       <Feed polls={polls} navigate={navigate} />
     </>
   );
diff --git a/src/pages/FeedPage/PollSubmission.tsx b/src/pages/FeedPage/PollSubmission.tsx
index 65e33b6..3a73d45 100644
--- a/src/pages/FeedPage/PollSubmission.tsx
+++ b/src/pages/FeedPage/PollSubmission.tsx
@@ -38,7 +38,7 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const PollSubmission: React.FC<PropTypes> = ({ user , polls, setPolls}) => {
+const PollSubmission: React.FC<PropTypes> = ({ user, polls, setPolls }) => {
   const classes = useStyles();
   const [expanded, setExpanded] = useState(false);
   const [contents, setContents] = useState<Contents>({
@@ -56,9 +56,9 @@ const PollSubmission: React.FC<PropTypes> = ({ user , polls, setPolls}) => {
 
   const handleClick = () => {
     if (expanded) {
-      if(contents.left.url && contents.right.url ) {
-        post('/polls/', {authorId: user._id, contents}).then(res => {
-          polls.unshift({...res.data});
+      if (contents.left.url && contents.right.url) {
+        post('/polls/', { authorId: user._id, contents }).then(res => {
+          polls.unshift({ ...res.data });
           setPolls([...polls]);
         });
       }
@@ -73,13 +73,13 @@ const PollSubmission: React.FC<PropTypes> = ({ user , polls, setPolls}) => {
           <UserStrip user={user} info="" navigate={() => {}} />
           <Divider />
           <CardMedia className={classes.card}>
-            <PollSubmissionImage which="left" setContents={setContents} contents={contents}/>
-            <PollSubmissionImage which="right" setContents={setContents} contents={contents}/>
+            <PollSubmissionImage which="left" setContents={setContents} contents={contents} />
+            <PollSubmissionImage which="right" setContents={setContents} contents={contents} />
           </CardMedia>
         </Collapse>
         <Button onClick={handleClick} color="primary" variant="outlined" className={classes.button}>
           {
-          expanded === false
+          !expanded
             ? 'Create a Poll'
             : 'Submit'
         }
diff --git a/src/pages/FeedPage/PollSubmissionImage.tsx b/src/pages/FeedPage/PollSubmissionImage.tsx
index 42389f6..e29ecd0 100644
--- a/src/pages/FeedPage/PollSubmissionImage.tsx
+++ b/src/pages/FeedPage/PollSubmissionImage.tsx
@@ -2,13 +2,13 @@ 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 ClearIcon from '@material-ui/icons/Clear';
 import UploadImage from '../../components/UploadImage/UploadImage';
 import { Contents } from './types';
-import ClearIcon from '@material-ui/icons/Clear';
 
 interface PropTypes {
   contents: Contents;
-  setContents: (a: Contents) => void;
+  setContents: (newContents: Contents) => void;
   which: 'left' | 'right';
 }
 
@@ -34,17 +34,16 @@ const PollSubmissionImage: React.FC<PropTypes> = ({ setContents, which, contents
   const [image, setImage] = useState('');
   const [clearIconDisplay, setClearIconDisplay] = useState(false);
 
+  const patchUrl = (url: string) => {
+    setImage(url);
+    contents[which] = { url } ;
+    setContents({ ...contents });
+  };
+
   const handleClick = () => {
     image === ''
       ? setDisplay(!display)
       : patchUrl('');
-
-  };
-
-  const patchUrl = (url: string) => {
-    setImage(url);
-    contents[which] = {url};
-    setContents({...contents});
   };
 
   const handleMouseEnter = () => {
@@ -57,18 +56,23 @@ const PollSubmissionImage: React.FC<PropTypes> = ({ setContents, which, contents
 
   return (
     <>
-      <CardActionArea onClick={handleClick} >
-        <CardMedia className={classes.images} image={image} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+      <CardActionArea onClick={handleClick}>
+        <CardMedia
+          className={classes.images}
+          image={image}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        >
           {
             image === ''
-              ? <CloudUploadIcon fontSize='large' color='primary' />
+              ? <CloudUploadIcon fontSize="large" color="primary" />
               : clearIconDisplay
-              ?  <ClearIcon className={classes.clearIcon} color='primary'/>
-              : null
+                ? <ClearIcon className={classes.clearIcon} color="primary" />
+                : null
           }
         </CardMedia>
       </CardActionArea>
-      <UploadImage displayD={display} setDisplayD={setDisplay} callback={patchUrl} />
+      <UploadImage display={display} isOpen={setDisplay} callback={patchUrl} />
     </>
   );
 };
diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx
index 659d104..ec6c387 100644
--- a/src/pages/ProfilePage/ProfileInfo.tsx
+++ b/src/pages/ProfilePage/ProfileInfo.tsx
@@ -121,7 +121,7 @@ const ProfileInfo: React.FC<PropTypes> = ({
                   <Avatar className={classes.avatar} src={user?.avatarUrl} />
                 </Badge>
               </div>
-              <UploadImage displayD={input} setDisplayD={setInput} callback={patchAvatar} />
+              <UploadImage display={input} isOpen={setInput} callback={patchAvatar} />
             </div>
 )
           : <Avatar className={classes.avatar} src={user?.avatarUrl} />
-- 
cgit v1.2.3


From b0a5c3d78d207a8bec15a7989c81384ee52c94a5 Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Mon, 29 Jun 2020 17:42:29 +0300
Subject: chage clearIcon design

---
 src/pages/FeedPage/PollSubmission.tsx      | 2 +-
 src/pages/FeedPage/PollSubmissionImage.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/pages/FeedPage/PollSubmission.tsx b/src/pages/FeedPage/PollSubmission.tsx
index 3a73d45..56c4242 100644
--- a/src/pages/FeedPage/PollSubmission.tsx
+++ b/src/pages/FeedPage/PollSubmission.tsx
@@ -77,7 +77,7 @@ const PollSubmission: React.FC<PropTypes> = ({ user, polls, setPolls }) => {
             <PollSubmissionImage which="right" setContents={setContents} contents={contents} />
           </CardMedia>
         </Collapse>
-        <Button onClick={handleClick} color="primary" variant="outlined" className={classes.button}>
+        <Button onClick={handleClick} color="primary" variant={expanded ? "contained" : "outlined" } className={classes.button}>
           {
           !expanded
             ? 'Create a Poll'
diff --git a/src/pages/FeedPage/PollSubmissionImage.tsx b/src/pages/FeedPage/PollSubmissionImage.tsx
index e29ecd0..2dadbee 100644
--- a/src/pages/FeedPage/PollSubmissionImage.tsx
+++ b/src/pages/FeedPage/PollSubmissionImage.tsx
@@ -2,9 +2,9 @@ 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 ClearIcon from '@material-ui/icons/Clear';
 import UploadImage from '../../components/UploadImage/UploadImage';
 import { Contents } from './types';
+import CancelOutlinedIcon from '@material-ui/icons/CancelOutlined';
 
 interface PropTypes {
   contents: Contents;
@@ -23,8 +23,8 @@ const useStyles = makeStyles(theme => ({
     boxShadow: 'inset 0 0 10px;'
   },
   clearIcon: {
-    opacity: '.4',
-    fontSize: 130
+    opacity: '.5',
+    fontSize: 100
   }
 }));
 
@@ -67,7 +67,7 @@ const PollSubmissionImage: React.FC<PropTypes> = ({ setContents, which, contents
             image === ''
               ? <CloudUploadIcon fontSize="large" color="primary" />
               : clearIconDisplay
-                ? <ClearIcon className={classes.clearIcon} color="primary" />
+                ? <CancelOutlinedIcon className={classes.clearIcon}  />
                 : null
           }
         </CardMedia>
-- 
cgit v1.2.3


From 8d0e34c5a94ec351ae22429fcc962112a85d7c19 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Mon, 29 Jun 2020 20:51:21 +0300
Subject: refactor!: improve code quality :recycle:

---
 src/components/UploadImage/UploadImage.tsx | 16 ++++---
 src/pages/FeedPage/PollSubmission.tsx      | 44 ++++++++------------
 src/pages/FeedPage/PollSubmissionImage.tsx | 67 +++++++++++++++++-------------
 src/pages/ProfilePage/ProfileInfo.tsx      |  2 +-
 4 files changed, 62 insertions(+), 67 deletions(-)

(limited to 'src')

diff --git a/src/components/UploadImage/UploadImage.tsx b/src/components/UploadImage/UploadImage.tsx
index 3a58e29..e6f6d05 100644
--- a/src/components/UploadImage/UploadImage.tsx
+++ b/src/components/UploadImage/UploadImage.tsx
@@ -8,23 +8,21 @@ import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
 
 interface PropTypes {
-  display: boolean;
-  isOpen: (display: boolean) => void;
+  isOpen: boolean;
+  setIsOpen: (value: boolean) => void;
   callback: (url: string) => void;
 }
 
-const UploadImage: React.FC<PropTypes> = ({
-  display, isOpen, callback
-}) => {
+const UploadImage: React.FC<PropTypes> = ({ setIsOpen, isOpen, callback }) => {
   const [url, setUrl] = useState('');
 
   const handleClose = () => {
-    isOpen(false);
+    setIsOpen(false);
   };
 
   const handleSubmit = () => {
     callback(url || '');
-    isOpen(false);
+    setIsOpen(false);
   };
 
   const handleChange = (event:React.ChangeEvent<HTMLInputElement>) => {
@@ -33,8 +31,8 @@ const UploadImage: React.FC<PropTypes> = ({
 
   return (
     <div>
-      <Dialog open={display} onClose={handleClose}>
-        <DialogTitle id="form-dialog-title">Upload an Image</DialogTitle>
+      <Dialog open={isOpen} onClose={handleClose}>
+        <DialogTitle>Upload an Image</DialogTitle>
         <DialogContent>
           <DialogContentText>
             Unfortunetly we do not support uploading images yet. Please provide a valid URL to your image.
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;
diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx
index ec6c387..9fe5912 100644
--- a/src/pages/ProfilePage/ProfileInfo.tsx
+++ b/src/pages/ProfilePage/ProfileInfo.tsx
@@ -121,7 +121,7 @@ const ProfileInfo: React.FC<PropTypes> = ({
                   <Avatar className={classes.avatar} src={user?.avatarUrl} />
                 </Badge>
               </div>
-              <UploadImage display={input} isOpen={setInput} callback={patchAvatar} />
+              <UploadImage isOpen={input} setIsOpen={setInput} callback={patchAvatar} />
             </div>
 )
           : <Avatar className={classes.avatar} src={user?.avatarUrl} />
-- 
cgit v1.2.3


From c68b0e0c3ad72a48ba421dbbc9b70d177f8ecbfc Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Mon, 29 Jun 2020 21:34:27 +0300
Subject: style: fix eslint errors

---
 src/pages/FeedPage/PollSubmission.tsx      |  2 +-
 src/pages/FeedPage/PollSubmissionImage.tsx | 25 ++++++++++++++-----------
 2 files changed, 15 insertions(+), 12 deletions(-)

(limited to 'src')

diff --git a/src/pages/FeedPage/PollSubmission.tsx b/src/pages/FeedPage/PollSubmission.tsx
index 38f70c3..9b1ac95 100644
--- a/src/pages/FeedPage/PollSubmission.tsx
+++ b/src/pages/FeedPage/PollSubmission.tsx
@@ -68,7 +68,7 @@ const PollSubmission: React.FC<PropTypes> = ({ user, polls, setPolls }) => {
         <Button
           color="primary"
           disabled={expanded && !(contents.left.url && contents.right.url)}
-          variant={expanded ? "contained" : "outlined"}
+          variant={expanded ? 'contained' : 'outlined'}
           onClick={handleClick}
           fullWidth
         >
diff --git a/src/pages/FeedPage/PollSubmissionImage.tsx b/src/pages/FeedPage/PollSubmissionImage.tsx
index 757083b..3c2eb8e 100644
--- a/src/pages/FeedPage/PollSubmissionImage.tsx
+++ b/src/pages/FeedPage/PollSubmissionImage.tsx
@@ -2,9 +2,11 @@ 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 _ from 'lodash';
+
 import UploadImage from '../../components/UploadImage/UploadImage';
 import { Contents } from './types';
-import CancelOutlinedIcon from '@material-ui/icons/CancelOutlined';
 
 interface PropTypes {
   contents: Contents;
@@ -12,7 +14,7 @@ interface PropTypes {
   which: 'left' | 'right';
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles({
   root: {
     display: 'flex',
     justifyContent: 'center',
@@ -30,7 +32,7 @@ const useStyles = makeStyles(theme => ({
     justifyContent: 'center',
     alignItems: 'center'
   }
-}));
+});
 
 
 const PollSubmissionImage: React.FC<PropTypes> = ({ setContents, which, contents }) => {
@@ -39,21 +41,22 @@ const PollSubmissionImage: React.FC<PropTypes> = ({ setContents, which, contents
   const [image, setImage] = useState('');
   const [clearIconDisplay, setClearIconDisplay] = useState(false);
 
-  const patchUrl = (url: string) => {
+  const patchUrl = (url: string): void => {
     setImage(url);
-    contents[which] = { url } ;
-    setContents({ ...contents });
+    const newContents = _.set(contents, which, { url });
+    setContents({ ...newContents });
   };
 
-  const handleClick = () => {
-    image ? patchUrl('') : setIsModalOpen(!isModalOpen);
+  const handleClick = (): void => {
+    if (image) patchUrl('');
+    else setIsModalOpen(!isModalOpen);
   };
 
-  const handleMouseEnter = () => {
+  const handleMouseEnter = (): void => {
     setClearIconDisplay(true);
   };
 
-  const handleMouseLeave = () => {
+  const handleMouseLeave = (): void => {
     setClearIconDisplay(false);
   };
 
@@ -75,7 +78,7 @@ const PollSubmissionImage: React.FC<PropTypes> = ({ setContents, which, contents
     >
       {clearIconDisplay && <CancelOutlinedIcon className={classes.clearIcon} />}
     </CardMedia>
-  )
+  );
 
   return (
     <CardActionArea onClick={handleClick} className={classes.root}>
-- 
cgit v1.2.3


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