From 7f007935f23985cad3b7238899e78c9d3a7c5ff9 Mon Sep 17 00:00:00 2001
From: Barry Gitarts <bgitarts@gmail.com>
Date: Tue, 26 Jun 2018 12:46:06 -0400
Subject: [PATCH] add initial scalfold for voting dapp

seperate admin view from main view
---
 app/components/AdminView.js       | 34 ++++++++++++++++++++++
 app/components/Voting.js          | 11 +++++++
 app/components/standard/AppBar.js | 48 +++++++++++++++++++++++++++++++
 app/dapp.js                       | 43 ++++++++-------------------
 app/index.html                    |  4 +--
 package.json                      |  6 +++-
 6 files changed, 111 insertions(+), 35 deletions(-)
 create mode 100644 app/components/AdminView.js
 create mode 100644 app/components/Voting.js
 create mode 100644 app/components/standard/AppBar.js

diff --git a/app/components/AdminView.js b/app/components/AdminView.js
new file mode 100644
index 0000000..5570d5f
--- /dev/null
+++ b/app/components/AdminView.js
@@ -0,0 +1,34 @@
+import React, { Fragment } from 'react';
+import { Tabs, Tab } from 'react-bootstrap';
+import 'bootstrap/dist/css/bootstrap.css';
+import TopNavbar from './topnavbar';
+import TestTokenUI from './testtoken';
+import ERC20TokenUI from './erc20token';
+import ProposalManager from './proposal-manager/proposal-manager'
+import VotingDapp from './voting-dapp/voting-dapp';
+import SNTUI from './snt-ui';
+
+export default ({ setAccount }) => {
+  return (
+    <div class="container">
+      <TopNavbar accountUpdateHandler={(e) => setAccount(e)} />
+      <Tabs defaultActiveKey={0} id="uncontrolled-tab-example">
+        <Tab eventKey={0} title="VotingDapp">
+          <VotingDapp />
+        </Tab>
+        <Tab eventKey={1} title="ProposalManager">
+          <ProposalManager />
+        </Tab>
+        <Tab eventKey={2} title="SNT Token">
+          <SNTUI />
+        </Tab>
+        <Tab eventKey={3} title="TestToken">
+          <TestTokenUI />
+        </Tab>
+        <Tab eventKey={4} title="ERC20Token">
+          <ERC20TokenUI />
+        </Tab>
+      </Tabs>
+    </div>
+  )
+}
diff --git a/app/components/Voting.js b/app/components/Voting.js
new file mode 100644
index 0000000..3f0abbc
--- /dev/null
+++ b/app/components/Voting.js
@@ -0,0 +1,11 @@
+import React, { Fragment } from 'react';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import 'typeface-roboto';
+import AppBar from './standard/AppBar';
+
+export default ({ toggleAdmin }) => (
+  <Fragment>
+    <CssBaseline />
+    <AppBar toggleAdmin={toggleAdmin} />
+  </Fragment>
+)
diff --git a/app/components/standard/AppBar.js b/app/components/standard/AppBar.js
new file mode 100644
index 0000000..bc343d8
--- /dev/null
+++ b/app/components/standard/AppBar.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+
+const styles = {
+  root: {
+    flexGrow: 1,
+    fontSize: '16px'
+  },
+  flex: {
+    flex: 1,
+  },
+  menuButton: {
+    marginLeft: -12,
+    marginRight: 20,
+  },
+};
+
+function ButtonAppBar(props) {
+  const { classes, toggleAdmin } = props;
+  return (
+    <div className={classes.root} >
+      <AppBar position="static">
+        <Toolbar>
+          <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
+            <MenuIcon onClick={toggleAdmin} />
+          </IconButton>
+          <Typography variant="display1" color="inherit" className={classes.flex}>
+            What should we build next?
+          </Typography>
+          <Button color="inherit" style={{ fontSize: '16px' }}>Add Proposal</Button>
+        </Toolbar>
+      </AppBar>
+    </div>
+  );
+}
+
+ButtonAppBar.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ButtonAppBar);
diff --git a/app/dapp.js b/app/dapp.js
index 2a17365..777b0e4 100644
--- a/app/dapp.js
+++ b/app/dapp.js
@@ -1,15 +1,9 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import ReactDOM from 'react-dom';
-import { Tabs, Tab } from 'react-bootstrap';
 
 import EmbarkJS from 'Embark/EmbarkJS';
-import TopNavbar from './components/topnavbar';
-import TestTokenUI from './components/testtoken';
-import ERC20TokenUI from './components/erc20token';
-import ProposalManager from './components/proposal-manager/proposal-manager'
-import VotingDapp from './components/voting-dapp/voting-dapp';
-import SNTUI from './components/snt-ui';
-
+import AdminView from './components/AdminView';
+import Voting from './components/Voting';
 import SNT from  'Embark/contracts/SNT';
 window['SNT'] = SNT;
 
@@ -20,6 +14,7 @@ class App extends React.Component {
   constructor(props) {
     super(props);
   }
+  state = { admin: false };
 
   componentDidMount(){
     __embarkContext.execWhenReady(() => {
@@ -32,34 +27,20 @@ class App extends React.Component {
 
   _renderStatus(title, available) {
     let className = available ? 'pull-right status-online' : 'pull-right status-offline';
-    return <React.Fragment>
+    return <Fragment>
       {title}
       <span className={className}></span>
-    </React.Fragment>;
+    </Fragment>;
   }
 
   render(){
+    const { admin } = this.state;
+    const toggleAdmin = () => this.setState({ admin: true });
     return (
-      <div>
-        <TopNavbar accountUpdateHandler={(e) => this.setAccount(e)} />
-        <Tabs defaultActiveKey={0} id="uncontrolled-tab-example">
-          <Tab eventKey={0} title="VotingDapp">
-              <VotingDapp />
-          </Tab>
-          <Tab eventKey={1} title="ProposalManager">
-            <ProposalManager />
-          </Tab>
-          <Tab eventKey={2} title="SNT Token">
-              <SNTUI />
-          </Tab>
-          <Tab eventKey={3} title="TestToken">
-              <TestTokenUI />
-          </Tab>
-          <Tab eventKey={4} title="ERC20Token">
-              <ERC20TokenUI />
-          </Tab>
-        </Tabs>
-      </div>);
+      <Fragment>
+        {admin ? <AdminView setAccount={this.setAccount} /> : <Voting toggleAdmin={toggleAdmin} />}
+      </Fragment>
+    );
   }
 }
 
diff --git a/app/index.html b/app/index.html
index 1fb8607..8f974fd 100644
--- a/app/index.html
+++ b/app/index.html
@@ -1,10 +1,8 @@
 <html>
   <head>
     <title>Status.im - Contracts</title>
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   </head>
-  <body class="container">
+  <body>
       <div id="app">
       </div>
       <script src="js/dapp.js"></script>
diff --git a/package.json b/package.json
index fc5afc3..0ce84f7 100644
--- a/package.json
+++ b/package.json
@@ -17,15 +17,19 @@
   },
   "homepage": "https://github.com/status-im/contracts#readme",
   "dependencies": {
+    "@material-ui/core": "^1.3.0",
+    "@material-ui/icons": "^1.1.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-stage-2": "^6.24.1",
     "bignumber.js": "^5.0.0",
+    "bootstrap": "^3.3.7",
     "formik": "^0.11.11",
     "jquery": "^3.3.1",
     "react": "^16.3.2",
     "react-blockies": "^1.3.0",
     "react-bootstrap": "^0.32.1",
     "react-dom": "^16.3.2",
-    "react-toggle": "^4.0.2"
+    "react-toggle": "^4.0.2",
+    "typeface-roboto": "0.0.54"
   }
 }