visual-identity/app/components/simple-voting/PollsList.js

118 lines
3.7 KiB
JavaScript
Raw Normal View History

2018-06-28 00:45:31 +00:00
import React, { Fragment, Component } from 'react';
2018-06-27 16:32:11 +00:00
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
2018-06-27 18:40:45 +00:00
import CardActions from '@material-ui/core/CardActions';
2018-06-27 16:32:11 +00:00
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
2018-06-27 18:40:45 +00:00
import Slider from '@material-ui/lab/Slider';
import Tooltip from '@material-ui/core/Tooltip';
2018-06-28 00:45:31 +00:00
import PollManager from 'Embark/contracts/PollManager';
import MiniMeTokenInterface from 'Embark/contracts/MiniMeTokenInterface';
2018-06-27 16:32:11 +00:00
2018-06-28 00:45:31 +00:00
class Poll extends Component {
constructor(props){
super(props);
this.state = { value: 0, balance: 0, isSubmitting: false, ...props };
2018-06-28 00:45:31 +00:00
}
2018-06-27 18:40:45 +00:00
handleChange = (event, value) => {
this.setState({ value });
};
2018-06-28 00:45:31 +00:00
handleClick = (event) => {
event.preventDefault();
this.setState({isSubmitting: true});
2018-06-28 01:42:17 +00:00
const { customVote, poll, unvote } = PollManager.methods;
2018-06-28 00:45:31 +00:00
const { idPoll, value } = this.state;
const balance4Voting = value * value;
2018-06-28 01:42:17 +00:00
const toSend = balance4Voting === 0 ? unvote(idPoll) : customVote(idPoll, balance4Voting);
2018-06-28 00:45:31 +00:00
toSend.estimateGas()
.then(gasEstimated => {
2018-06-28 01:42:17 +00:00
console.log("voting gas estimated: " + gasEstimated);
2018-06-28 13:30:37 +00:00
return toSend.send({gas: gasEstimated + 100000});
2018-06-28 00:45:31 +00:00
})
.then(res => {
console.log('sucess:', res);
this.setState({isSubmitting: false});
return poll(idPoll).call();
})
.then(poll => {
this.setState(poll);
})
.catch(res => {
console.log('fail:', res);
})
.finally(() => {
this.setState({isSubmitting: false});
});
}
componentDidMount() {
MiniMeTokenInterface.options.address = this.props._token;
MiniMeTokenInterface.methods.balanceOfAt(web3.eth.defaultAccount, this.props._startBlock - 1)
.call()
.then(balance => {
this.setState({balance});
});
PollManager.methods.getVote(this.props.idPoll, web3.eth.defaultAccount)
.call()
.then(vote => {
this.setState({value: Math.sqrt(vote)});
})
}
2018-06-27 18:40:45 +00:00
render(){
2018-06-28 00:45:31 +00:00
const { _description,
_totalCensus,
_voters,
_qvResults,
_results,
_canVote,
value,
isSubmitting,
balance,
votes } = this.state;
2018-06-28 00:45:31 +00:00
2018-06-28 12:21:34 +00:00
const disableVote = balance == 0 || !_canVote || isSubmitting;
const maxValue = Math.floor(Math.sqrt(balance));
2018-06-28 00:45:31 +00:00
2018-06-27 18:40:45 +00:00
return (
<Card>
<CardContent>
2018-06-28 01:42:17 +00:00
<Typography variant="headline">{_description}</Typography>
2018-06-27 18:40:45 +00:00
<Typography variant="subheading" color="textSecondary">
2018-06-28 00:45:31 +00:00
Number of voters: {_voters}
2018-06-27 18:40:45 +00:00
</Typography>
<Typography variant="subheading" color="textSecondary">
2018-06-28 00:45:31 +00:00
Votes: {_qvResults}
</Typography>
<Typography variant="subheading" color="textSecondary">
SNT Allocated: {_results}
2018-06-27 18:40:45 +00:00
</Typography>
</CardContent>
2018-06-28 16:25:19 +00:00
<Tooltip id="tooltip-icon" placement="top" title={`${value * value} SNT - ${value} vote credits`}>
2018-06-27 18:40:45 +00:00
<CardActions>
2018-06-28 02:09:19 +00:00
<Slider disabled={disableVote} value={value} min={0} max={maxValue} step={1} onChange={this.handleChange} />
2018-06-28 00:45:31 +00:00
<Button variant="contained" disabled={disableVote} color="primary" onClick={this.handleClick}>Vote</Button>
2018-06-27 18:40:45 +00:00
</CardActions>
</Tooltip>
</Card>
)
}
}
2018-06-27 16:32:11 +00:00
2018-06-28 00:45:31 +00:00
2018-06-27 16:32:11 +00:00
const PollsList = ({ rawPolls }) => (
<Fragment>
2018-06-28 00:45:31 +00:00
{rawPolls.map((poll, idx) => <Poll key={idx} idPoll={idx} {...poll} />)}
2018-06-27 16:32:11 +00:00
</Fragment>
)
export default PollsList