1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import {
Card,
CardActionArea,
CardMedia,
Avatar,
CardHeader
} from '@material-ui/core/';
import { Which, Poll } from 'which-types';
import PercentageBar from './PercentageBar';
import { post } from '../../requests';
interface PropTypes {
initialPoll: Poll;
navigate: (prefix: string, id: string) => void;
}
const useStyles = makeStyles(theme => ({
root: {
maxWidth: theme.spacing(75),
height: 488,
margin: '40px auto'
},
images: {
height: theme.spacing(50),
width: 300
},
imagesBlock: {
display: 'flex'
},
avatar: {
cursor: 'pointer'
},
rateLine: {
position: 'relative',
width: '100%',
height: theme.spacing(2),
backgroundColor: theme.palette.primary.light,
transitionDuration: '0.5s'
},
highlight: {
backgroundColor: theme.palette.primary.main + ' !important'
},
fillRateLine: {
height: theme.spacing(2),
backgroundColor: theme.palette.primary.light,
transitionDuration: '0.5s'
}
}));
const PollCard: React.FC<PropTypes> = ({ initialPoll, navigate }) => {
const [poll, setPoll] = useState<Poll>(initialPoll);
const classes = useStyles();
const { author, contents: { left, right }, userChoice } = poll;
const handleNavigate = () => {
navigate('profile', poll.author._id);
};
const vote = (which: Which) => {
if (userChoice) return;
post('votes/', { which, pollId: poll._id }).then(() => {
poll.contents[which].votes += 1;
poll.userChoice = which;
setPoll({ ...poll });
});
};
const handleLeft = () => vote('left');
const handleRight = () => vote('right');
const leftPercentage = Math.round(100 * (left.votes / (left.votes + right.votes)));
const rightPercentage = 100 - leftPercentage
const dominant: Which = left.votes >= right.votes ? 'left' : 'right';
return (
<Card className={classes.root}>
<CardHeader
avatar={(
<Avatar
aria-label="avatar"
src={author.avatarUrl}
alt={author.username[0].toUpperCase()}
onClick={handleNavigate}
className={classes.avatar}
/>
)}
title={author.username}
/>
<div className={classes.imagesBlock}>
<CardActionArea onDoubleClick={handleLeft}>
<CardMedia
className={classes.images}
image={left.url}
/>
<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'} />
</CardActionArea>
</div>
<div className={`${classes.rateLine} ${dominant === 'right' ? classes.highlight : ''}`}>
<div
className={`${classes.fillRateLine} ${dominant === 'left' ? classes.highlight : ''}`}
style={{ width: `${leftPercentage}%` }}
/>
</div>
</Card>
);
};
export default PollCard;
|
