add togglePoll + poll submit loading indicator

app/components/AdminView.js

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react';
 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 TestTokenUI from './testtoken';
 import ERC20TokenUI from './erc20token';

app/components/Voting.js

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

app/components/simple-voting/AddPoll.js

@@ -7,6 +7,7 @@ import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
 import { map } from 'lodash';
 import rlp from 'rlp';
+import LinearProgress from '@material-ui/core/LinearProgress';
 import { withStyles } from '@material-ui/core/styles';
 import { withFormik } from 'formik';
 
@@ -83,7 +84,10 @@ const InnerForm = ({
             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>
     </CardContent>
   </Card>
@@ -98,7 +102,7 @@ const AddPoll = withFormik({
     if(description.toString().trim() === "") errors.description = true;
     return errors;
   },
-  async handleSubmit(values, { setSubmitting }) {
+  async handleSubmit(values, { setSubmitting, props }) {
     const { description } = values;
     const { eth: { getBlockNumber }, utils: { asciiToHex } } = window.web3;
     const { addPoll } = PollManager.methods;
@@ -113,9 +117,12 @@ const AddPoll = withFormik({
       })
       .then(res => {
         console.log('sucess:', res);
+        setSubmitting(false);
+        props.togglePoll();
       })
       .catch(res => {
         console.log('fail:', res);
+        setSubmitting(false);
       });
 
   }

app/components/standard/AppBar.js

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