status-im/visual-identity
2
0
Fork 0
mirror of https://github.com/status-im/visual-identity.git synced 2025-02-12 20:46:35 +00:00
Code Issues Projects Releases Wiki Activity

add togglePoll + poll submit loading indicator

Browse Source
This commit is contained in:
Barry Gitarts 2018-06-27 15:34:06 -04:00
parent e17870ab17
commit bca86f5a1f
4 changed files with 36 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/components/AdminView.js
View File

@ -1,6 +1,7 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import { Tabs, Tab } from 'react-bootstrap'; import { Tabs, Tab } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.css'; //import 'bootstrap/dist/css/bootstrap.css';
// commented out because it's overriding global CSS, need to migrate to isolated styled components
import TopNavbar from './topnavbar'; import TopNavbar from './topnavbar';
import TestTokenUI from './testtoken'; import TestTokenUI from './testtoken';
import ERC20TokenUI from './erc20token'; import ERC20TokenUI from './erc20token';

35
app/components/Voting.js
View File

@ -1,4 +1,4 @@
import React, { Fragment } from 'react'; import React, { Fragment, PureComponent } from 'react';
import CssBaseline from '@material-ui/core/CssBaseline'; import CssBaseline from '@material-ui/core/CssBaseline';
import 'typeface-roboto'; import 'typeface-roboto';
import AppBar from './standard/AppBar'; import AppBar from './standard/AppBar';
@ -6,14 +6,25 @@ 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';
export default ({ toggleAdmin, rawPolls }) => ( class Voting extends PureComponent {
<Fragment> state = { addPoll: false };
<CssBaseline />
<AppBar toggleAdmin={toggleAdmin} /> render(){
<div style={{ margin: '15px 15px 15px 35%' }}> const { toggleAdmin, rawPolls } = this.props;
<StatusLogo /> const { addPoll } = this.state;
</div> const togglePoll = () => { this.setState({ addPoll: !addPoll })};
<AddPoll /> return (
{rawPolls && <PollsList rawPolls={rawPolls} />} <Fragment>
</Fragment> <CssBaseline />
) <AppBar toggleAdmin={toggleAdmin} togglePoll={togglePoll} />
<div style={{ margin: '15px 15px 15px 35%' }}>
<StatusLogo />
</div>
{addPoll && <AddPoll togglePoll={togglePoll} />}
{rawPolls && <PollsList rawPolls={rawPolls} />}
</Fragment>
)
}
}
export default Voting

11
app/components/simple-voting/AddPoll.js
View File

@ -7,6 +7,7 @@ import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
import { map } from 'lodash'; import { map } from 'lodash';
import rlp from 'rlp'; import rlp from 'rlp';
import LinearProgress from '@material-ui/core/LinearProgress';
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
import { withFormik } from 'formik'; import { withFormik } from 'formik';
@ -83,7 +84,10 @@ const InnerForm = ({
className: classes.textFieldFormLabel className: classes.textFieldFormLabel
}} }}
/> />
<Button type="submit" variant="extendedFab" aria-label="add" className={classes.button}>Submit</Button> {!isSubmitting ?
<Button type="submit" variant="extendedFab" aria-label="add" className={classes.button}>Submit</Button> :
<LinearProgress />
}
</form> </form>
</CardContent> </CardContent>
</Card> </Card>
@ -98,7 +102,7 @@ const AddPoll = withFormik({
if(description.toString().trim() === "") errors.description = true; if(description.toString().trim() === "") errors.description = true;
return errors; return errors;
}, },
async handleSubmit(values, { setSubmitting }) { async handleSubmit(values, { setSubmitting, props }) {
const { description } = values; const { description } = values;
const { eth: { getBlockNumber }, utils: { asciiToHex } } = window.web3; const { eth: { getBlockNumber }, utils: { asciiToHex } } = window.web3;
const { addPoll } = PollManager.methods; const { addPoll } = PollManager.methods;
@ -113,9 +117,12 @@ const AddPoll = withFormik({
}) })
.then(res => { .then(res => {
console.log('sucess:', res); console.log('sucess:', res);
setSubmitting(false);
props.togglePoll();
}) })
.catch(res => { .catch(res => {
console.log('fail:', res); console.log('fail:', res);
setSubmitting(false);
}); });
} }

4
app/components/standard/AppBar.js
View File

@ -23,7 +23,7 @@ const styles = {
}; };
function ButtonAppBar(props) { function ButtonAppBar(props) {
const { classes, toggleAdmin } = props; const { classes, toggleAdmin, togglePoll } = props;
return ( return (
<div className={classes.root} > <div className={classes.root} >
<AppBar position="static"> <AppBar position="static">
@ -34,7 +34,7 @@ function ButtonAppBar(props) {
<Typography variant="display1" color="inherit" className={classes.flex}> <Typography variant="display1" color="inherit" className={classes.flex}>
What should we build next? What should we build next?
</Typography> </Typography>
<Button color="inherit" style={{ fontSize: '16px' }}>Add Proposal</Button> <Button variant="outlined" color="inherit" style={{ fontSize: '16px' }} onClick={togglePoll}>Add Proposal</Button>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
</div> </div>