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
|
import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import {
Card,
CardActionArea,
CardMedia
} from '@material-ui/core/';
import { Which, Poll } from 'which-types';
import PercentageBar from './PercentageBar';
import UserStrip from '../UserStrip/UserStrip';
import { post } from '../../requests';
interface PropTypes {
initialPoll: Poll;
navigate: (prefix: string, id: string) => void;
}
const DATE_FORMAT = {
month: 'long',
day: 'numeric',
year: 'numeric',
hour: '2-digit',
minute: '2-digit'
};
const useStyles = makeStyles(theme => ({
root: {
maxWidth: theme.spacing(75),
height: 488,
margin: '40px auto'
},
images: {
height: theme.spacing(50),
width: 300
},
imagesBlock: {
display: 'flex'
},
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 date: string = new Date(poll.createdAt).toLocaleString('default', DATE_FORMAT);
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}>
<UserStrip user={author} info={date} navigate={navigate} />
<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;
|
