merge

app/components/simple-voting/PollsList.js

@@ -9,12 +9,14 @@ import Tooltip from '@material-ui/core/Tooltip';
 import PollManager from 'Embark/contracts/PollManager';
 import MiniMeTokenInterface from 'Embark/contracts/MiniMeTokenInterface';
 import web3 from "Embark/web3"
+import CircularProgress from '@material-ui/core/CircularProgress';
+import { VotingContext } from '../../context';
 
 class Poll extends Component {
 
   constructor(props){
     super(props);
-    this.state = { value: 0, balance: 0, isSubmitting: false, ...props };
+    this.state = { value: 0, balance: 0, isSubmitting: false };
   }
 
   handleChange = (event, value) => {
@@ -27,7 +29,8 @@ class Poll extends Component {
     this.setState({isSubmitting: true});
 
     const { customVote, poll, unvote } = PollManager.methods;
-    const { idPoll, value } = this.state;
+    const { updatePoll, idPoll } = this.props;
+    const { value } = this.state;
     const { toWei } = web3.utils;
 
     const balance4Voting = toWei(value * value);
@@ -41,10 +44,7 @@ class Poll extends Component {
           .then(res => {
             console.log('sucess:', res);
             this.setState({isSubmitting: false});
-        return poll(idPoll).call();
-      })
-      .then(poll => {
-        this.setState(poll);
+            return updatePoll(idPoll);
           })
           .catch(res => {
             console.log('fail:', res);
@@ -71,16 +71,15 @@ class Poll extends Component {
   }
 
   render(){
-    const { _description,
+    const {
+      _description,
       _totalCensus,
       _voters,
       _qvResults,
       _results,
       _canVote,
-            value, 
-            isSubmitting,
-            balance,
-            votes } = this.state;
+    } = this.props;
+    const { value, balance, isSubmitting } = this.state;
 
     const disableVote = balance == 0 || !_canVote || isSubmitting;
     const { fromWei } = web3.utils;
@@ -103,7 +102,7 @@ class Poll extends Component {
         <Tooltip id="tooltip-icon" placement="top" title={`${value * value} SNT - ${value} vote credits`}>
           <CardActions>
             <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>
         </Tooltip>
       </Card>
@@ -112,10 +111,14 @@ class Poll extends Component {
 }
 
 
-const PollsList = ({ rawPolls  }) => (
+const PollsList = () => (
+  <VotingContext.Consumer>
+    {({ updatePoll, rawPolls }) =>
     <Fragment>
-    {rawPolls.map((poll, idx) => <Poll key={idx} idPoll={idx} {...poll} />)}
+      {rawPolls.map((poll, idx) => <Poll key={idx} idPoll={idx} updatePoll={updatePoll} {...poll} />)}
     </Fragment>
+    }
+  </VotingContext.Consumer>
 )
 
 export default PollsList

app/dapp.js

@@ -45,6 +45,15 @@ class App extends React.Component {
     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) {
     let className = available ? 'pull-right status-online' : 'pull-right status-offline';
     return <Fragment>
@@ -55,9 +64,9 @@ class App extends React.Component {
 
   render(){
     const { admin, rawPolls } = this.state;
-    const { _getPolls } = this;
+    const { _getPolls, updatePoll } = this;
     const toggleAdmin = () => this.setState({ admin: true });
-    const votingContext = { getPolls: _getPolls, rawPolls, toggleAdmin };
+    const votingContext = { getPolls: _getPolls, rawPolls, toggleAdmin, updatePoll };
     return (
       <VotingContext.Provider value={votingContext}>
         <Fragment>