better slider button styling and render handling
This commit is contained in:
parent
af3366475e
commit
dbd35e0bc6
|
@ -10,8 +10,17 @@ import PollManager from 'Embark/contracts/PollManager';
|
||||||
import MiniMeTokenInterface from 'Embark/contracts/MiniMeTokenInterface';
|
import MiniMeTokenInterface from 'Embark/contracts/MiniMeTokenInterface';
|
||||||
import web3 from "Embark/web3"
|
import web3 from "Embark/web3"
|
||||||
import CircularProgress from '@material-ui/core/CircularProgress';
|
import CircularProgress from '@material-ui/core/CircularProgress';
|
||||||
|
import { withStyles } from '@material-ui/core/styles';
|
||||||
import { VotingContext } from '../../context';
|
import { VotingContext } from '../../context';
|
||||||
|
|
||||||
|
const styles = {
|
||||||
|
card: {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const sortingFn = {
|
const sortingFn = {
|
||||||
MOST_VOTES: (a, b) => b._qvResults - a._qvResults,
|
MOST_VOTES: (a, b) => b._qvResults - a._qvResults,
|
||||||
MOST_VOTERS: (a, b) => b._voters - a._voters,
|
MOST_VOTERS: (a, b) => b._voters - a._voters,
|
||||||
|
@ -22,12 +31,12 @@ class Poll extends Component {
|
||||||
|
|
||||||
constructor(props){
|
constructor(props){
|
||||||
super(props);
|
super(props);
|
||||||
this.state = { isSubmitting: false };
|
this.state = { value: 0, balance: 0, isSubmitting: false };
|
||||||
}
|
}
|
||||||
|
|
||||||
handleChange = (event, value) => {
|
handleChange = (event, value) => {
|
||||||
const { appendToPoll, idPoll } = this.props;
|
const { appendToPoll, idPoll } = this.props;
|
||||||
appendToPoll(idPoll, { value });
|
this.setState({ value })
|
||||||
};
|
};
|
||||||
|
|
||||||
handleClick = (event) => {
|
handleClick = (event) => {
|
||||||
|
@ -36,7 +45,8 @@ 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 { updatePoll, idPoll, value } = this.props;
|
const { updatePoll, idPoll } = this.props;
|
||||||
|
const { value } = this.state;
|
||||||
const { toWei } = web3.utils;
|
const { toWei } = web3.utils;
|
||||||
|
|
||||||
const balance4Voting = toWei(value * value);
|
const balance4Voting = toWei(value * value);
|
||||||
|
@ -73,7 +83,7 @@ class Poll extends Component {
|
||||||
PollManager.methods.getVote(this.props.idPoll, web3.eth.defaultAccount)
|
PollManager.methods.getVote(this.props.idPoll, web3.eth.defaultAccount)
|
||||||
.call()
|
.call()
|
||||||
.then(vote => {
|
.then(vote => {
|
||||||
appendToPoll(idPoll, {value: parseInt(Math.sqrt(fromWei(vote)))})
|
this.setState({value: parseInt(Math.sqrt(fromWei(vote)))});
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -85,10 +95,11 @@ class Poll extends Component {
|
||||||
_qvResults,
|
_qvResults,
|
||||||
_results,
|
_results,
|
||||||
_canVote,
|
_canVote,
|
||||||
value,
|
balance,
|
||||||
balance
|
classes
|
||||||
} = this.props;
|
} = this.props;
|
||||||
const { isSubmitting } = this.state;
|
const { value, isSubmitting } = this.state;
|
||||||
|
//TODO if (isNil(value)) setState using pollmanager getvote
|
||||||
|
|
||||||
const disableVote = balance == 0 || !_canVote || isSubmitting;
|
const disableVote = balance == 0 || !_canVote || isSubmitting;
|
||||||
const { fromWei } = web3.utils;
|
const { fromWei } = web3.utils;
|
||||||
|
@ -109,8 +120,8 @@ 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 className={classes.card}>
|
||||||
<Slider disabled={disableVote} value={value || 0} min={0} max={maxValue} step={1} onChange={this.handleChange} />
|
<Slider style={{ width: '95%' }} disabled={disableVote} value={value || 0} min={0} max={maxValue} step={1} onChange={this.handleChange} />
|
||||||
{isSubmitting ? <CircularProgress /> : <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>
|
||||||
|
@ -120,17 +131,17 @@ class Poll extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const PollsList = () => (
|
const PollsList = ({ classes }) => (
|
||||||
<VotingContext.Consumer>
|
<VotingContext.Consumer>
|
||||||
{({ updatePoll, rawPolls, pollOrder, appendToPoll }) =>
|
{({ updatePoll, rawPolls, pollOrder, appendToPoll }) =>
|
||||||
<Fragment>
|
<Fragment>
|
||||||
{rawPolls
|
{rawPolls
|
||||||
.map((poll, i) => ({ ...poll, idPoll: i }) )
|
.map((poll, i) => ({ ...poll, idPoll: i }) )
|
||||||
.sort(sortingFn[pollOrder])
|
.sort(sortingFn[pollOrder])
|
||||||
.map((poll) => <Poll key={poll._token} appendToPoll={appendToPoll} updatePoll={updatePoll} {...poll} />)}
|
.map((poll) => <Poll key={poll._token} classes={classes} appendToPoll={appendToPoll} updatePoll={updatePoll} {...poll} />)}
|
||||||
</Fragment>
|
</Fragment>
|
||||||
}
|
}
|
||||||
</VotingContext.Consumer>
|
</VotingContext.Consumer>
|
||||||
)
|
)
|
||||||
|
|
||||||
export default PollsList
|
export default withStyles(styles)(PollsList);
|
||||||
|
|
Loading…
Reference in New Issue