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

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