From 8930046d41841cba6cf368076b86e26088807848 Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Tue, 23 Jun 2020 19:41:43 +0300
Subject: feat:add percentage line

---
 src/components/PollCard/PollCard.tsx | 51 +++++++++++++++++++++++++++---------
 1 file changed, 39 insertions(+), 12 deletions(-)

(limited to 'src/components')

diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index baf896f..190d001 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import {
   Card,
@@ -9,6 +9,8 @@ import {
 } from '@material-ui/core/';
 import { Poll } from '../../types';
 import PercentageBar from './PercentageBar';
+import {post} from '../../requests';
+import teal from "@material-ui/core/colors/teal";
 
 interface PropTypes {
   poll: Poll;
@@ -18,32 +20,56 @@ interface PropTypes {
 const useStyles = makeStyles(theme => ({
   root: {
     maxWidth: theme.spacing(75),
-    height: theme.spacing(63),
-    margin: '20px auto'
+    height: 488,
+    margin: '40px auto',
   },
   images: {
     height: theme.spacing(50),
-    width: theme.spacing(38)
+    width: 300
   },
   imagesBlock: {
     display: 'flex'
   },
   avatar: {
     cursor: 'pointer'
-  }
+  },
+  rateLine: {
+    position:'relative',
+    margin: '0 auto',
+    width: '100%',
+    height:16,
+    backgroundColor: teal[100]
+  },
+  fillRateLine: {
+    height:16,
+    backgroundColor: teal[800],
+    transitionDuration: '0.5s'
+  },
 }));
 
-
 const PollCard: React.FC<PropTypes> = ({ poll, navigate }) => {
   const classes = useStyles();
   const { author, contents } = poll;
+  const [rate, setRate] = useState<{left: number, right: number}>({left: contents.left.votes,right: contents.right.votes});
 
   const handleNavigate = () => {
     navigate('profile', poll.author._id);
   };
 
-  const leftPercentage = Math.round(100 * (contents.left.votes / (contents.left.votes + contents.right.votes)));
-  const rightPercentage = 100 - leftPercentage;
+  const vote = (which: 'left' | 'right') => {
+    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 => {
+      console.log(error.response)
+    });
+  };
+
+    const leftPercentage = Math.round(100 * (rate.left / (rate.left + rate.right)));
+    const rightPercentage = 100 - leftPercentage;
 
   return (
     <Card className={classes.root}>
@@ -60,14 +86,14 @@ const PollCard: React.FC<PropTypes> = ({ poll, navigate }) => {
         title={author.name}
       />
       <div className={classes.imagesBlock}>
-        <CardActionArea>
+        <CardActionArea onDoubleClick={() => vote('left')}>
           <CardMedia
             className={classes.images}
             image={contents.left.url}
           />
           <PercentageBar value={leftPercentage} which="left" />
         </CardActionArea>
-        <CardActionArea>
+        <CardActionArea onDoubleClick={() => vote('right')}>
           <CardMedia
             className={classes.images}
             image={contents.right.url}
@@ -75,10 +101,11 @@ const PollCard: React.FC<PropTypes> = ({ poll, navigate }) => {
           <PercentageBar value={rightPercentage} which="right" />
         </CardActionArea>
       </div>
+      <div className={classes.rateLine}>
+        <div className={classes.fillRateLine} style={{width: `${leftPercentage}%`}} />
+      </div>
     </Card>
   );
 };
 
-
 export default PollCard;
-
-- 
cgit v1.2.3


From fbdaa40e7ce585b65038835c05a283cec6f28d0e Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Wed, 24 Jun 2020 00:52:26 +0300
Subject: chore: migrate to which-types@1.3.1

---
 src/components/Feed/Feed.tsx         | 2 +-
 src/components/PollCard/PollCard.tsx | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

(limited to 'src/components')

diff --git a/src/components/Feed/Feed.tsx b/src/components/Feed/Feed.tsx
index 3b8e16f..c649935 100644
--- a/src/components/Feed/Feed.tsx
+++ b/src/components/Feed/Feed.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { Poll } from '../../types';
+import { Poll } from 'which-types';
 import PollCard from '../PollCard/PollCard';
 
 interface PropTypes {
diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index 190d001..9f89d9a 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -7,7 +7,8 @@ import {
   Avatar,
   CardHeader
 } from '@material-ui/core/';
-import { Poll } from '../../types';
+import { Which, Poll } from 'which-types';
+
 import PercentageBar from './PercentageBar';
 import {post} from '../../requests';
 import teal from "@material-ui/core/colors/teal";
@@ -56,7 +57,7 @@ const PollCard: React.FC<PropTypes> = ({ poll, navigate }) => {
     navigate('profile', poll.author._id);
   };
 
-  const vote = (which: 'left' | 'right') => {
+  const vote = (which: Which) => {
     post(`polls/${ poll._id }/votes/`,{ which }).then((response)=>{
       console.log(response.data);
       const leftV = response.data.contents.left.votes;
@@ -78,12 +79,12 @@ const PollCard: React.FC<PropTypes> = ({ poll, navigate }) => {
           <Avatar
             aria-label="avatar"
             src={author.avatarUrl}
-            alt={author.name[0].toUpperCase()}
+            alt={author.username[0].toUpperCase()}
             onClick={handleNavigate}
             className={classes.avatar}
           />
         )}
-        title={author.name}
+        title={author.username}
       />
       <div className={classes.imagesBlock}>
         <CardActionArea onDoubleClick={() => vote('left')}>
-- 
cgit v1.2.3


From cf3b9a1002d1971e5b867225baaca5f46039991b Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Wed, 24 Jun 2020 01:03:34 +0300
Subject: refactor: use theme in styles

---
 src/components/PollCard/PollCard.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

(limited to 'src/components')

diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index 9f89d9a..27f2203 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -10,8 +10,7 @@ import {
 import { Which, Poll } from 'which-types';
 
 import PercentageBar from './PercentageBar';
-import {post} from '../../requests';
-import teal from "@material-ui/core/colors/teal";
+import { post } from '../../requests';
 
 interface PropTypes {
   poll: Poll;
@@ -38,12 +37,12 @@ const useStyles = makeStyles(theme => ({
     position:'relative',
     margin: '0 auto',
     width: '100%',
-    height:16,
-    backgroundColor: teal[100]
+    height: theme.spacing(2),
+    backgroundColor: theme.palette.primary.light
   },
   fillRateLine: {
-    height:16,
-    backgroundColor: teal[800],
+    height: theme.spacing(2),
+    backgroundColor: theme.palette.primary.main,
     transitionDuration: '0.5s'
   },
 }));
-- 
cgit v1.2.3


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

---
 src/components/Feed/Feed.tsx              |  2 +-
 src/components/PollCard/PercentageBar.tsx | 12 ++++++---
 src/components/PollCard/PollCard.tsx      | 42 ++++++++++++++++---------------
 3 files changed, 31 insertions(+), 25 deletions(-)

(limited to 'src/components')

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


From 6212b5ef0e2ae1f2c2334bc003ead1d4fd0b1fe4 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Thu, 25 Jun 2020 14:14:44 +0300
Subject: style: fix linting errors

---
 src/components/PollCard/PollCard.tsx | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

(limited to 'src/components')

diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index 82d94e9..06d33d5 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import {
   Card,
@@ -21,7 +21,7 @@ const useStyles = makeStyles(theme => ({
   root: {
     maxWidth: theme.spacing(75),
     height: 488,
-    margin: '40px auto',
+    margin: '40px auto'
   },
   images: {
     height: theme.spacing(50),
@@ -34,7 +34,7 @@ const useStyles = makeStyles(theme => ({
     cursor: 'pointer'
   },
   rateLine: {
-    position:'relative',
+    position: 'relative',
     margin: '0 auto',
     width: '100%',
     height: theme.spacing(2),
@@ -61,12 +61,10 @@ const PollCard: React.FC<PropTypes> = ({ initialPoll, navigate }) => {
     post('votes/', { which, pollId: poll._id }).then(() => {
       poll.contents[which].votes += 1;
       poll.userChoice = which;
-      setPoll({ ...poll});
-    }).catch(error => {
-      console.log(error.response)
+      setPoll({ ...poll });
     });
   };
-  
+
   const handleLeft = () => vote('left');
   const handleRight = () => vote('right');
 
@@ -93,18 +91,18 @@ const PollCard: React.FC<PropTypes> = ({ initialPoll, navigate }) => {
             className={classes.images}
             image={left.url}
           />
-          <PercentageBar value={leftPercentage} which="left" like={userChoice === 'left'}/>
+          <PercentageBar value={leftPercentage} which="left" like={userChoice === 'left'} />
         </CardActionArea>
         <CardActionArea onDoubleClick={handleRight}>
           <CardMedia
             className={classes.images}
             image={right.url}
           />
-          <PercentageBar value={rightPercentage} which="right" like={userChoice === 'right'}/>
+          <PercentageBar value={rightPercentage} which="right" like={userChoice === 'right'} />
         </CardActionArea>
       </div>
       <div className={classes.rateLine}>
-        <div className={classes.fillRateLine} style={{width: `${leftPercentage}%`}} />
+        <div className={classes.fillRateLine} style={{ width: `${leftPercentage}%` }} />
       </div>
     </Card>
   );
-- 
cgit v1.2.3


From 1a7e205b615c4ba51aeb79a7c75cfc77290ba063 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Thu, 25 Jun 2020 14:38:23 +0300
Subject: feat: highlight rateline correctly

---
 src/components/PollCard/PollCard.tsx | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

(limited to 'src/components')

diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index 06d33d5..6b5f456 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -8,6 +8,7 @@ import {
   CardHeader
 } from '@material-ui/core/';
 import { Which, Poll } from 'which-types';
+import _ from 'lodash';
 
 import PercentageBar from './PercentageBar';
 import { post } from '../../requests';
@@ -35,7 +36,6 @@ const useStyles = makeStyles(theme => ({
   },
   rateLine: {
     position: 'relative',
-    margin: '0 auto',
     width: '100%',
     height: theme.spacing(2),
     backgroundColor: theme.palette.primary.light
@@ -69,7 +69,12 @@ const PollCard: React.FC<PropTypes> = ({ initialPoll, navigate }) => {
   const handleRight = () => vote('right');
 
   const leftPercentage = Math.round(100 * (left.votes / (left.votes + right.votes)));
-  const rightPercentage = 100 - leftPercentage;
+
+  const percentage = {
+    left: leftPercentage,
+    right: 100 - leftPercentage
+  };
+  const dominant: Which = left.votes >= right.votes ? 'left' : 'right';
 
   return (
     <Card className={classes.root}>
@@ -91,18 +96,24 @@ const PollCard: React.FC<PropTypes> = ({ initialPoll, navigate }) => {
             className={classes.images}
             image={left.url}
           />
-          <PercentageBar value={leftPercentage} which="left" like={userChoice === 'left'} />
+          <PercentageBar value={percentage.left} which="left" like={userChoice === 'left'} />
         </CardActionArea>
         <CardActionArea onDoubleClick={handleRight}>
           <CardMedia
             className={classes.images}
             image={right.url}
           />
-          <PercentageBar value={rightPercentage} which="right" like={userChoice === 'right'} />
+          <PercentageBar value={percentage.right} which="right" like={userChoice === 'right'} />
         </CardActionArea>
       </div>
       <div className={classes.rateLine}>
-        <div className={classes.fillRateLine} style={{ width: `${leftPercentage}%` }} />
+        <div
+          className={classes.fillRateLine}
+          style={{
+            width: `${percentage[dominant]}%`,
+            float: dominant
+          }}
+        />
       </div>
     </Card>
   );
-- 
cgit v1.2.3


From a3afe917442fb29627aa9deade1baefbea9a60c5 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Thu, 25 Jun 2020 14:39:51 +0300
Subject: fix: remove unused lodash

---
 src/components/PollCard/PollCard.tsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index 6b5f456..40f5fd7 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -8,7 +8,6 @@ import {
   CardHeader
 } from '@material-ui/core/';
 import { Which, Poll } from 'which-types';
-import _ from 'lodash';
 
 import PercentageBar from './PercentageBar';
 import { post } from '../../requests';
-- 
cgit v1.2.3