diff options
| -rw-r--r-- | package-lock.json | 6 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/components/Feed/Feed.tsx | 2 | ||||
| -rw-r--r-- | src/components/PollCard/PercentageBar.tsx | 12 | ||||
| -rw-r--r-- | 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}> |