From 3e92c59a0a79646f77a6f882d3543ecde7cb2dc8 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Thu, 25 Jun 2020 13:52:03 +0300
Subject: feat: use latest API

---
 package-lock.json                         |  6 ++---
 package.json                              |  2 +-
 src/components/Feed/Feed.tsx              |  2 +-
 src/components/PollCard/PercentageBar.tsx | 12 ++++++---
 src/components/PollCard/PollCard.tsx      | 42 ++++++++++++++++---------------
 5 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index dc8d8cd..572165e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14112,9 +14112,9 @@
       "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
     },
     "which-types": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/which-types/-/which-types-1.3.1.tgz",
-      "integrity": "sha512-UU7+/FRfELIrUyZiTJkTDJ9dNxhW/ZVcWTjXn9TMtaqdIEDtu+NDFe13jZkFhlPVsVwwXa5R4n6MUa1iuLhAlg==",
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/which-types/-/which-types-1.4.1.tgz",
+      "integrity": "sha512-ZtN3cDwz/fQbJBwrItsZ0jpGafReTd/fIffHNQtFW4THrZqi8z4qnFTbyu1M6LnAmPlwU/FaRLZPfd67ZQ4mFw==",
       "dev": true
     },
     "word-wrap": {
diff --git a/package.json b/package.json
index 4584877..22e3488 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,6 @@
     "eslint-plugin-react-hooks": "^2.5.1",
     "gh-pages": "^3.0.0",
     "typescript": "^3.9.5",
-    "which-types": "^1.3.1"
+    "which-types": "^1.4.1"
   }
 }
diff --git a/src/components/Feed/Feed.tsx b/src/components/Feed/Feed.tsx
index c649935..d81da99 100644
--- a/src/components/Feed/Feed.tsx
+++ b/src/components/Feed/Feed.tsx
@@ -21,7 +21,7 @@ const Feed: React.FC<PropTypes> = ({ polls, navigate }) => {
 
   return (
     <div className={classes.root}>
-      {polls.map(poll => <PollCard poll={poll} key={poll._id} navigate={navigate} />)}
+      {polls.map(poll => <PollCard initialPoll={poll} key={poll._id} navigate={navigate} />)}
     </div>
   );
 };
diff --git a/src/components/PollCard/PercentageBar.tsx b/src/components/PollCard/PercentageBar.tsx
index 6a50a9e..a93d7b4 100644
--- a/src/components/PollCard/PercentageBar.tsx
+++ b/src/components/PollCard/PercentageBar.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
+import LikeIcon from '@material-ui/icons/Favorite';
 
 interface PropTypes {
   value: number;
   which: 'left' | 'right';
+  like: boolean;
 }
 
 const useStyles = makeStyles({
@@ -12,7 +14,9 @@ const useStyles = makeStyles({
     color: 'white',
     top: '86%',
     fontSize: 20,
-    textShadow: '0 0 3px black'
+    textShadow: '0 0 3px black',
+    display: 'flex',
+    alignItems: 'center'
   },
   left: {
     left: 30
@@ -22,13 +26,13 @@ const useStyles = makeStyles({
   }
 });
 
-const PercentageBar: React.FC<PropTypes> = ({ value, which }) => {
+const PercentageBar: React.FC<PropTypes> = ({ value, which, like }) => {
   const classes = useStyles();
 
   return (
     <div className={`${classes.root} ${classes[which]}`}>
-      {value}
-      %
+      {like && <LikeIcon />}
+      {`${value}%`}
     </div>
   );
 };
diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index 27f2203..82d94e9 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -13,7 +13,7 @@ import PercentageBar from './PercentageBar';
 import { post } from '../../requests';
 
 interface PropTypes {
-  poll: Poll;
+  initialPoll: Poll;
   navigate: (prefix: string, id: string) => void;
 }
 
@@ -44,32 +44,34 @@ const useStyles = makeStyles(theme => ({
     height: theme.spacing(2),
     backgroundColor: theme.palette.primary.main,
     transitionDuration: '0.5s'
-  },
+  }
 }));
 
-const PollCard: React.FC<PropTypes> = ({ poll, navigate }) => {
+const PollCard: React.FC<PropTypes> = ({ initialPoll, navigate }) => {
+  const [poll, setPoll] = useState<Poll>(initialPoll);
   const classes = useStyles();
-  const { author, contents } = poll;
-  const [rate, setRate] = useState<{left: number, right: number}>({left: contents.left.votes,right: contents.right.votes});
+  const { author, contents: { left, right }, userChoice } = poll;
 
   const handleNavigate = () => {
     navigate('profile', poll.author._id);
   };
 
   const vote = (which: Which) => {
-    post(`polls/${ poll._id }/votes/`,{ which }).then((response)=>{
-      console.log(response.data);
-      const leftV = response.data.contents.left.votes;
-      const rightV = response.data.contents.right.votes;
-      setRate({left: leftV, right: rightV});
-    })
-      .catch(error => {
+    if (userChoice) return;
+    post('votes/', { which, pollId: poll._id }).then(() => {
+      poll.contents[which].votes += 1;
+      poll.userChoice = which;
+      setPoll({ ...poll});
+    }).catch(error => {
       console.log(error.response)
     });
   };
+  
+  const handleLeft = () => vote('left');
+  const handleRight = () => vote('right');
 
-    const leftPercentage = Math.round(100 * (rate.left / (rate.left + rate.right)));
-    const rightPercentage = 100 - leftPercentage;
+  const leftPercentage = Math.round(100 * (left.votes / (left.votes + right.votes)));
+  const rightPercentage = 100 - leftPercentage;
 
   return (
     <Card className={classes.root}>
@@ -86,19 +88,19 @@ const PollCard: React.FC<PropTypes> = ({ poll, navigate }) => {
         title={author.username}
       />
       <div className={classes.imagesBlock}>
-        <CardActionArea onDoubleClick={() => vote('left')}>
+        <CardActionArea onDoubleClick={handleLeft}>
           <CardMedia
             className={classes.images}
-            image={contents.left.url}
+            image={left.url}
           />
-          <PercentageBar value={leftPercentage} which="left" />
+          <PercentageBar value={leftPercentage} which="left" like={userChoice === 'left'}/>
         </CardActionArea>
-        <CardActionArea onDoubleClick={() => vote('right')}>
+        <CardActionArea onDoubleClick={handleRight}>
           <CardMedia
             className={classes.images}
-            image={contents.right.url}
+            image={right.url}
           />
-          <PercentageBar value={rightPercentage} which="right" />
+          <PercentageBar value={rightPercentage} which="right" like={userChoice === 'right'}/>
         </CardActionArea>
       </div>
       <div className={classes.rateLine}>
-- 
cgit v1.2.3