Update votes on update

use global context for updating polls

app/components/Voting.js

@@ -26,7 +26,7 @@ class Voting extends PureComponent {
             <Collapse in={addPoll}>
               <AddPoll togglePoll={togglePoll} getPolls={getPolls} />
             </Collapse>
-            {rawPolls && <PollsList rawPolls={rawPolls} />}
+            {rawPolls && <PollsList rawPolls={rawPolls}  />}
           </Fragment>
         }
       </VotingContext.Consumer>

app/components/simple-voting/PollsList.js

@@ -8,12 +8,14 @@ import Slider from '@material-ui/lab/Slider';
 import Tooltip from '@material-ui/core/Tooltip';
 import PollManager from 'Embark/contracts/PollManager';
 import MiniMeTokenInterface from 'Embark/contracts/MiniMeTokenInterface';
+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) => {
@@ -26,58 +28,55 @@ 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 balance4Voting = value * value;
 
     const toSend = balance4Voting === 0 ? unvote(idPoll) : customVote(idPoll, balance4Voting);
-    
+
     toSend.estimateGas()
-      .then(gasEstimated => {
-        console.log("voting gas estimated: " + gasEstimated);
-        return toSend.send({gas: gasEstimated + 100000});
-      })
-      .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});
-      });
+          .then(gasEstimated => {
+            console.log("voting gas estimated: " + gasEstimated);
+            return toSend.send({gas: gasEstimated + 100000});
+          })
+          .then(res => {
+            console.log('sucess:', res);
+            this.setState({isSubmitting: false});
+            return updatePoll(idPoll);
+          })
+          .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});
-                                });
+                        .call()
+                        .then(balance => {
+                          this.setState({balance});
+                        });
 
     PollManager.methods.getVote(this.props.idPoll, web3.eth.defaultAccount)
-                       .call()
-                       .then(vote => {
-                         this.setState({value: Math.sqrt(vote)});
-                       })
+               .call()
+               .then(vote => {
+                 this.setState({value: Math.sqrt(vote)});
+               })
   }
 
   render(){
-    const { _description,
-            _totalCensus,
-            _voters,
-            _qvResults,
-            _results, 
-            _canVote, 
-            value, 
-            isSubmitting,
-            balance,
-            votes } = this.state;
+    const {
+      _description,
+      _totalCensus,
+      _voters,
+      _qvResults,
+      _results,
+      _canVote,
+    } = this.props;
+    const { value, balance, isSubmitting } = this.state;
 
     const disableVote = balance == 0 || !_canVote || isSubmitting;
     const maxValue = Math.floor(Math.sqrt(balance));
@@ -97,21 +96,25 @@ class Poll extends Component {
           </Typography>
         </CardContent>
         <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} />
-            <Button variant="contained" disabled={disableVote}  color="primary" onClick={this.handleClick}>Vote</Button>
-        </CardActions>
-          </Tooltip>
+            {isSubmitting ? <CircularProgress /> : <Button variant="contained" disabled={disableVote}  color="primary" onClick={this.handleClick}>Vote</Button>}
+          </CardActions>
+        </Tooltip>
       </Card>
     )
   }
 }
 
 
-const PollsList = ({ rawPolls  }) => (
-  <Fragment>
-    {rawPolls.map((poll, idx) => <Poll key={idx} idPoll={idx} {...poll} />)}
-  </Fragment>
+const PollsList = () => (
+  <VotingContext.Consumer>
+    {({ updatePoll, rawPolls }) =>
+    <Fragment>
+      {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>