Update votes on update
use global context for updating polls
This commit is contained in:
parent
8c6308362c
commit
57ef231576
|
@ -26,7 +26,7 @@ class Voting extends PureComponent {
|
||||||
<Collapse in={addPoll}>
|
<Collapse in={addPoll}>
|
||||||
<AddPoll togglePoll={togglePoll} getPolls={getPolls} />
|
<AddPoll togglePoll={togglePoll} getPolls={getPolls} />
|
||||||
</Collapse>
|
</Collapse>
|
||||||
{rawPolls && <PollsList rawPolls={rawPolls} />}
|
{rawPolls && <PollsList rawPolls={rawPolls} />}
|
||||||
</Fragment>
|
</Fragment>
|
||||||
}
|
}
|
||||||
</VotingContext.Consumer>
|
</VotingContext.Consumer>
|
||||||
|
|
|
@ -8,12 +8,14 @@ import Slider from '@material-ui/lab/Slider';
|
||||||
import Tooltip from '@material-ui/core/Tooltip';
|
import Tooltip from '@material-ui/core/Tooltip';
|
||||||
import PollManager from 'Embark/contracts/PollManager';
|
import PollManager from 'Embark/contracts/PollManager';
|
||||||
import MiniMeTokenInterface from 'Embark/contracts/MiniMeTokenInterface';
|
import MiniMeTokenInterface from 'Embark/contracts/MiniMeTokenInterface';
|
||||||
|
import CircularProgress from '@material-ui/core/CircularProgress';
|
||||||
|
import { VotingContext } from '../../context';
|
||||||
|
|
||||||
class Poll extends Component {
|
class Poll extends Component {
|
||||||
|
|
||||||
constructor(props){
|
constructor(props){
|
||||||
super(props);
|
super(props);
|
||||||
this.state = { value: 0, balance: 0, isSubmitting: false, ...props };
|
this.state = { value: 0, balance: 0, isSubmitting: false };
|
||||||
}
|
}
|
||||||
|
|
||||||
handleChange = (event, value) => {
|
handleChange = (event, value) => {
|
||||||
|
@ -26,58 +28,55 @@ class Poll extends Component {
|
||||||
this.setState({isSubmitting: true});
|
this.setState({isSubmitting: true});
|
||||||
|
|
||||||
const { customVote, poll, unvote } = PollManager.methods;
|
const { customVote, poll, unvote } = PollManager.methods;
|
||||||
const { idPoll, value } = this.state;
|
const { updatePoll, idPoll } = this.props;
|
||||||
|
const { value } = this.state;
|
||||||
const balance4Voting = value * value;
|
const balance4Voting = value * value;
|
||||||
|
|
||||||
const toSend = balance4Voting === 0 ? unvote(idPoll) : customVote(idPoll, balance4Voting);
|
const toSend = balance4Voting === 0 ? unvote(idPoll) : customVote(idPoll, balance4Voting);
|
||||||
|
|
||||||
toSend.estimateGas()
|
toSend.estimateGas()
|
||||||
.then(gasEstimated => {
|
.then(gasEstimated => {
|
||||||
console.log("voting gas estimated: " + gasEstimated);
|
console.log("voting gas estimated: " + gasEstimated);
|
||||||
return toSend.send({gas: gasEstimated + 100000});
|
return toSend.send({gas: gasEstimated + 100000});
|
||||||
})
|
})
|
||||||
.then(res => {
|
.then(res => {
|
||||||
console.log('sucess:', res);
|
console.log('sucess:', res);
|
||||||
this.setState({isSubmitting: false});
|
this.setState({isSubmitting: false});
|
||||||
return poll(idPoll).call();
|
return updatePoll(idPoll);
|
||||||
})
|
})
|
||||||
.then(poll => {
|
.catch(res => {
|
||||||
this.setState(poll);
|
console.log('fail:', res);
|
||||||
})
|
})
|
||||||
.catch(res => {
|
.finally(() => {
|
||||||
console.log('fail:', res);
|
this.setState({isSubmitting: false});
|
||||||
})
|
});
|
||||||
.finally(() => {
|
|
||||||
this.setState({isSubmitting: false});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
MiniMeTokenInterface.options.address = this.props._token;
|
MiniMeTokenInterface.options.address = this.props._token;
|
||||||
MiniMeTokenInterface.methods.balanceOfAt(web3.eth.defaultAccount, this.props._startBlock - 1)
|
MiniMeTokenInterface.methods.balanceOfAt(web3.eth.defaultAccount, this.props._startBlock - 1)
|
||||||
.call()
|
.call()
|
||||||
.then(balance => {
|
.then(balance => {
|
||||||
this.setState({balance});
|
this.setState({balance});
|
||||||
});
|
});
|
||||||
|
|
||||||
PollManager.methods.getVote(this.props.idPoll, web3.eth.defaultAccount)
|
PollManager.methods.getVote(this.props.idPoll, web3.eth.defaultAccount)
|
||||||
.call()
|
.call()
|
||||||
.then(vote => {
|
.then(vote => {
|
||||||
this.setState({value: Math.sqrt(vote)});
|
this.setState({value: Math.sqrt(vote)});
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
render(){
|
render(){
|
||||||
const { _description,
|
const {
|
||||||
_totalCensus,
|
_description,
|
||||||
_voters,
|
_totalCensus,
|
||||||
_qvResults,
|
_voters,
|
||||||
_results,
|
_qvResults,
|
||||||
_canVote,
|
_results,
|
||||||
value,
|
_canVote,
|
||||||
isSubmitting,
|
} = this.props;
|
||||||
balance,
|
const { value, balance, isSubmitting } = this.state;
|
||||||
votes } = this.state;
|
|
||||||
|
|
||||||
const disableVote = balance == 0 || !_canVote || isSubmitting;
|
const disableVote = balance == 0 || !_canVote || isSubmitting;
|
||||||
const maxValue = Math.floor(Math.sqrt(balance));
|
const maxValue = Math.floor(Math.sqrt(balance));
|
||||||
|
@ -97,21 +96,25 @@ class Poll extends Component {
|
||||||
</Typography>
|
</Typography>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
<Tooltip id="tooltip-icon" placement="top" title={`${value * value} SNT - ${value} vote credits`}>
|
<Tooltip id="tooltip-icon" placement="top" title={`${value * value} SNT - ${value} vote credits`}>
|
||||||
<CardActions>
|
<CardActions>
|
||||||
<Slider disabled={disableVote} value={value} min={0} max={maxValue} step={1} onChange={this.handleChange} />
|
<Slider disabled={disableVote} value={value} min={0} max={maxValue} step={1} onChange={this.handleChange} />
|
||||||
<Button variant="contained" disabled={disableVote} color="primary" onClick={this.handleClick}>Vote</Button>
|
{isSubmitting ? <CircularProgress /> : <Button variant="contained" disabled={disableVote} color="primary" onClick={this.handleClick}>Vote</Button>}
|
||||||
</CardActions>
|
</CardActions>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</Card>
|
</Card>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const PollsList = ({ rawPolls }) => (
|
const PollsList = () => (
|
||||||
<Fragment>
|
<VotingContext.Consumer>
|
||||||
{rawPolls.map((poll, idx) => <Poll key={idx} idPoll={idx} {...poll} />)}
|
{({ updatePoll, rawPolls }) =>
|
||||||
</Fragment>
|
<Fragment>
|
||||||
|
{rawPolls.map((poll, idx) => <Poll key={idx} idPoll={idx} updatePoll={updatePoll} {...poll} />)}
|
||||||
|
</Fragment>
|
||||||
|
}
|
||||||
|
</VotingContext.Consumer>
|
||||||
)
|
)
|
||||||
|
|
||||||
export default PollsList
|
export default PollsList
|
||||||
|
|
13
app/dapp.js
13
app/dapp.js
|
@ -45,6 +45,15 @@ class App extends React.Component {
|
||||||
else this.setState({ rawPolls: [] });
|
else this.setState({ rawPolls: [] });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
updatePoll = async (idPoll) => {
|
||||||
|
const { poll } = PollManager.methods;
|
||||||
|
const { rawPolls } = this.state;
|
||||||
|
const newPolls = [...rawPolls];
|
||||||
|
const updatedPoll = await poll(idPoll).call();
|
||||||
|
newPolls[idPoll] = updatedPoll;
|
||||||
|
this.setState({ rawPolls: newPolls });
|
||||||
|
}
|
||||||
|
|
||||||
_renderStatus(title, available) {
|
_renderStatus(title, available) {
|
||||||
let className = available ? 'pull-right status-online' : 'pull-right status-offline';
|
let className = available ? 'pull-right status-online' : 'pull-right status-offline';
|
||||||
return <Fragment>
|
return <Fragment>
|
||||||
|
@ -55,9 +64,9 @@ class App extends React.Component {
|
||||||
|
|
||||||
render(){
|
render(){
|
||||||
const { admin, rawPolls } = this.state;
|
const { admin, rawPolls } = this.state;
|
||||||
const { _getPolls } = this;
|
const { _getPolls, updatePoll } = this;
|
||||||
const toggleAdmin = () => this.setState({ admin: true });
|
const toggleAdmin = () => this.setState({ admin: true });
|
||||||
const votingContext = { getPolls: _getPolls, rawPolls, toggleAdmin };
|
const votingContext = { getPolls: _getPolls, rawPolls, toggleAdmin, updatePoll };
|
||||||
return (
|
return (
|
||||||
<VotingContext.Provider value={votingContext}>
|
<VotingContext.Provider value={votingContext}>
|
||||||
<Fragment>
|
<Fragment>
|
||||||
|
|
Loading…
Reference in New Issue