Merge pull request #52 from which-ecosystem/pollSubmission

feat: add poll submission component

3 files changed, 29 insertions, 27 deletions

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 1825647..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 !== undefined
+              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 caa2de1..156315a 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -72,8 +72,16 @@ const PollCard: React.FC<PropTypes> = ({ initialPoll, navigate }) => {
   const handleLeft = () => handleVote('left');
   const handleRight = () => handleVote('right');
 
-  const leftPercentage = Math.round(100 * (left.votes / (left.votes + right.votes)));
-  const rightPercentage = 100 - leftPercentage;
+  let leftPercentage;
+  let rightPercentage;
+
+  if (left.votes || right.votes) {
+    leftPercentage = Math.round(100 * (left.votes / (left.votes + right.votes)));
+    rightPercentage = 100 - leftPercentage;
+  } else {
+    leftPercentage = 0;
+    rightPercentage = 0;
+  }
 
   const dominant: Which = left.votes >= right.votes ? 'left' : 'right';
 
diff --git a/src/components/UploadImage/UploadImage.tsx b/src/components/UploadImage/UploadImage.tsx
index 42ee989..e6f6d05 100644
--- a/src/components/UploadImage/UploadImage.tsx
+++ b/src/components/UploadImage/UploadImage.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } 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';
@@ -6,39 +6,33 @@ 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
+  isOpen: boolean;
+  setIsOpen: (value: boolean) => void;
+  callback: (url: string) => void;
 }
 
-const UploadImage: React.FC<PropTypes> = ({
-  displayD, setDisplayD, setUserInfo, setUser
-}) => {
-  const urlRef = useRef<HTMLInputElement>(null);
+const UploadImage: React.FC<PropTypes> = ({ setIsOpen, isOpen, callback }) => {
+  const [url, setUrl] = useState('');
 
   const handleClose = () => {
-    setDisplayD(false);
+    setIsOpen(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);
-    });
-    setDisplayD(false);
+  const handleSubmit = () => {
+    callback(url || '');
+    setIsOpen(false);
+  };
+
+  const handleChange = (event:React.ChangeEvent<HTMLInputElement>) => {
+    setUrl(event.target.value);
   };
 
   return (
     <div>
-      <Dialog open={displayD} 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.
@@ -51,14 +45,14 @@ const UploadImage: React.FC<PropTypes> = ({
             type="text"
             fullWidth
             autoComplete="off"
-            inputRef={urlRef}
+            onChange={handleChange}
           />
         </DialogContent>
         <DialogActions>
           <Button onClick={handleClose} color="primary">
             Cancel
           </Button>
-          <Button onClick={updateAvatar} color="primary">
+          <Button onClick={handleSubmit} color="primary" disabled={!url.length}>
             Submit
           </Button>
         </DialogActions>