add header and basic admin page

This commit is contained in:
Jonathan Rainville 2019-04-09 13:29:40 -04:00
parent 2bb59c4fd1
commit 9b61c3da45
No known key found for this signature in database
GPG Key ID: 5F4630B759727D9C
5 changed files with 54 additions and 15 deletions

View File

@ -1,10 +1,13 @@
/*global web3*/
import React from 'react';
import React, {Fragment} from 'react';
import {HashRouter, Route, Redirect, Switch} from "react-router-dom";
import ThemeProvider from 'react-bootstrap/ThemeProvider';
import EmbarkJS from 'Embark/EmbarkJS';
import Header from './components/Header';
import Home from './components/Home';
import Admin from './components/Admin';
const MAINNET = 1;
const TESTNET = 3;
@ -50,11 +53,15 @@ class App extends React.Component {
}
return (<HashRouter>
<ThemeProvider prefixes={{ btn: 'my-btn' }}>
<Header/>
<Switch>
<Route exact path="/" component={Home}/>
<Route exact path="/admin" component={Admin}/>
<Redirect to="/404"/>
</Switch>
</ThemeProvider>
</HashRouter>);
}
}

View File

@ -0,0 +1,14 @@
/*global web3*/
import React from 'react';
class Admin extends React.Component {
render() {
return (<div>
<h3>Admin Panel</h3>
</div>);
}
}
export default Admin;

View File

@ -0,0 +1,16 @@
import React from 'react'
import {Navbar, Nav} from 'react-bootstrap';
const Header = () => (<Navbar bg="light" expand="lg">
<Navbar.Brand href="/#/">Meritocracy</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="/#/">Home</Nav.Link>
<Nav.Link href="/#/admin">Admin</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
export default Header

View File

@ -1,13 +1,11 @@
/*global web3*/
import React from 'react';
import {Button, Grid, Row, Col, Alert } from 'react-bootstrap';
import * as NumericInput from 'react-numeric-input';
import {Row, Col, Alert, Button, Container, Form} from 'react-bootstrap';
import NumericInput from 'react-numeric-input';
import Select from 'react-select';
import Meritocracy from 'Embark/contracts/Meritocracy';
// import './css/dapp.css';
/*
TODO:
- list praise for contributor
@ -189,8 +187,6 @@ class Home extends React.Component {
const maxAllocation = selectedContributors.length ? currentContributor.allocation / selectedContributors.length : 0;
return (<div>
<h3>Status Meritocracy</h3>
{errorMsg && <Alert bsStyle="danger">{errorMsg}</Alert>}
{currentContributor.name && <h2>Hello, {currentContributor.name} !</h2>}
@ -206,27 +202,31 @@ class Home extends React.Component {
placeholder="Choose Contributor(s)..."
isDisabled={busy}
/>
<span>Your Allocatable Kudos: { currentContributor.allocation } SNT</span> <br/>
<p>Your Allocatable Kudos: { currentContributor.allocation } SNT</p>
{selectedContributors.length === 0 && <Alert variant="warning">
Please select one or more contributors
</Alert>}
<br/>
<NumericInput mobile step={5} min={0} max={maxAllocation} onChange={this.handleAwardChange} value={award} disabled={busy} /> <br/>
<NumericInput mobile step={5} min={0} max={maxAllocation} onChange={this.handleAwardChange} value={award} disabled={busy}/>
<input disabled={busy} placeholder="Enter your praise..." onChange={this.handlePraiseChange} value={praise} /> <br/>
<Form>
<Form.Control disabled={busy} placeholder="Enter your praise..." onChange={this.handlePraiseChange}
value={praise} />
</Form>
<span> Total Awarding: {award * selectedContributors.length} SNT </span> <br/>
<Button disabled={busy} variant="outline-primary" onClick={this.awardTokens}>Award</Button>
<h4>Your Kudos History</h4>
<span>Your Received Kudos: <b>{ currentContributor.received } SNT</b> <Button variant="outline-primary" onClick={this.withdrawTokens} disabled={busy}>Withdraw</Button></span> <br/>
<Grid>
<span>Your Received Kudos: <b>{ currentContributor.received } SNT</b> <Button variant="outline-primary" onClick={this.withdrawTokens} disabled={busy}>Withdraw</Button></span> <br/>
<Container>
<Row>
{currentContributor.praises && currentContributor.praises.map((item, i) => {
const name = options.find(x => x.value === item.author);
return <Col key={i}>{(name && name.label) || item.author} has sent you {web3.utils.fromWei(item.amount, "ether")} SNT {item.praise && "\"" + item.praise + "\""}</Col>;
})}
</Row>
</Grid>
</Container>
</div>);
}

View File

@ -3,6 +3,8 @@ import ReactDOM from 'react-dom';
import App from './App';
import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(
<App/>,
document.getElementById('app')