add voting context + refresh polls after add

This commit is contained in:
Barry Gitarts 2018-06-28 12:14:15 -04:00
parent 037c976826
commit 51baddb70e
4 changed files with 31 additions and 18 deletions

View File

@ -6,26 +6,30 @@ import AddPoll from './simple-voting/AddPoll';
import PollsList from './simple-voting/PollsList'; import PollsList from './simple-voting/PollsList';
import StatusLogo from '../ui/components/StatusLogo'; import StatusLogo from '../ui/components/StatusLogo';
import Collapse from '@material-ui/core/Collapse'; import Collapse from '@material-ui/core/Collapse';
import { VotingContext } from '../context';
class Voting extends PureComponent { class Voting extends PureComponent {
state = { addPoll: false }; state = { addPoll: false };
render(){ render(){
const { toggleAdmin, rawPolls } = this.props;
const { addPoll } = this.state; const { addPoll } = this.state;
const togglePoll = () => { this.setState({ addPoll: !addPoll })}; const togglePoll = () => { this.setState({ addPoll: !addPoll })};
return ( return (
<Fragment> <VotingContext.Consumer>
<CssBaseline /> {({ getPolls, rawPolls, toggleAdmin }) =>
<AppBar toggleAdmin={toggleAdmin} togglePoll={togglePoll} /> <Fragment>
<div style={{ margin: '30px', textAlign: 'center' }}> <CssBaseline />
<img src="images/logo.png" width="200" /> <AppBar toggleAdmin={toggleAdmin} togglePoll={togglePoll} />
</div> <div style={{ margin: '30px', textAlign: 'center' }}>
<Collapse in={addPoll}> <img src="images/logo.png" width="200" />
<AddPoll togglePoll={togglePoll} /> </div>
</Collapse> <Collapse in={addPoll}>
{rawPolls && <PollsList rawPolls={rawPolls} />} <AddPoll togglePoll={togglePoll} getPolls={getPolls} />
</Fragment> </Collapse>
{rawPolls && <PollsList rawPolls={rawPolls} />}
</Fragment>
}
</VotingContext.Consumer>
) )
} }
} }

View File

@ -106,6 +106,7 @@ const AddPoll = withFormik({
console.log('sucess:', res); console.log('sucess:', res);
setSubmitting(false); setSubmitting(false);
props.togglePoll(); props.togglePoll();
props.getPolls();
}) })
.catch(res => { .catch(res => {
console.log('fail:', res); console.log('fail:', res);

3
app/context.js Normal file
View File

@ -0,0 +1,3 @@
import React from 'react';
export const VotingContext = React.createContext(null);

View File

@ -5,6 +5,7 @@ import PollManager from 'Embark/contracts/PollManager';
import AdminView from './components/AdminView'; import AdminView from './components/AdminView';
import Voting from './components/Voting'; import Voting from './components/Voting';
import SNT from 'Embark/contracts/SNT'; import SNT from 'Embark/contracts/SNT';
import { VotingContext } from './context';
window['SNT'] = SNT; window['SNT'] = SNT;
import './dapp.css'; import './dapp.css';
@ -36,7 +37,7 @@ class App extends React.Component {
this.setState({account: _account}); this.setState({account: _account});
} }
async _getPolls(){ _getPolls = async () => {
const { nPolls, poll } = PollManager.methods; const { nPolls, poll } = PollManager.methods;
const polls = await nPolls.call(); const polls = await nPolls.call();
const total = await polls.call(); const total = await polls.call();
@ -54,13 +55,17 @@ class App extends React.Component {
render(){ render(){
const { admin, rawPolls } = this.state; const { admin, rawPolls } = this.state;
const { _getPolls } = this;
const toggleAdmin = () => this.setState({ admin: true }); const toggleAdmin = () => this.setState({ admin: true });
const votingContext = { getPolls: _getPolls, rawPolls, toggleAdmin };
return ( return (
<Fragment> <VotingContext.Provider value={votingContext}>
{admin ? <Fragment>
<AdminView setAccount={this.setAccount} /> : {admin ?
<Voting toggleAdmin={toggleAdmin} rawPolls={rawPolls} />} <AdminView setAccount={this.setAccount} /> :
</Fragment> <Voting />}
</Fragment>
</VotingContext.Provider>
); );
} }
} }