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/pages/FeedPage/PollSubmissionImage.tsx | 60 ++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 src/pages/FeedPage/PollSubmissionImage.tsx

(limited to 'src/pages/FeedPage/PollSubmissionImage.tsx')

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;
-- 
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/PollSubmissionImage.tsx | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

(limited to 'src/pages/FeedPage/PollSubmissionImage.tsx')

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/PollSubmissionImage.tsx | 33 +++++++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 5 deletions(-)

(limited to 'src/pages/FeedPage/PollSubmissionImage.tsx')

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 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/pages/FeedPage/PollSubmissionImage.tsx | 34 +++++++++++++++++-------------
 1 file changed, 19 insertions(+), 15 deletions(-)

(limited to 'src/pages/FeedPage/PollSubmissionImage.tsx')

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} />
     </>
   );
 };
-- 
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/PollSubmissionImage.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'src/pages/FeedPage/PollSubmissionImage.tsx')

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/pages/FeedPage/PollSubmissionImage.tsx | 67 +++++++++++++++++-------------
 1 file changed, 37 insertions(+), 30 deletions(-)

(limited to 'src/pages/FeedPage/PollSubmissionImage.tsx')

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;
-- 
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/PollSubmissionImage.tsx | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

(limited to 'src/pages/FeedPage/PollSubmissionImage.tsx')

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/PollSubmissionImage.tsx | 32 ++++++++++--------------------
 1 file changed, 11 insertions(+), 21 deletions(-)

(limited to 'src/pages/FeedPage/PollSubmissionImage.tsx')

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