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(-)

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