poanetwork
/
poa-dapps-voting
mirror of https://github.com/poanetwork/poa-dapps-voting.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Minor React suggestions-fixes

This commit is contained in:
viktor 2017-12-25 18:47:33 +03:00
parent 57577c1ccd
commit 3c6f75da91
19 changed files with 58 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/App.js
View File

@ -29,14 +29,16 @@ class App extends Component {
return <Settings/>;
}
onSearch = (e) => {
const { commonStore } = this.props;
commonStore.setSearchTerm(e.target.value.toLowerCase());
}
render() {
const { commonStore } = this.props;
const loading = commonStore.loading ? <Loading /> : ''
return (
<div>
{loading}
<Header />
<div className="search">
const currentPath = this.props.location.pathname;
const nav = (currentPath == `${commonStore.rootPath}` || currentPath == `${commonStore.rootPath}/active`) ? <div className="search">
<div className="container flex-container">
<div className="nav">
<NavLink className="nav-i" exact activeClassName="nav-i_active" to={`${commonStore.rootPath}/`}>All</NavLink>
@ -44,7 +46,12 @@ class App extends Component {
</div>
<input type="search" className="search-input" onChange={this.onSearch}/>
</div>
</div>
</div> : null;
return (
<div>
{loading}
<Header />
{nav}
<Route exact path={`${commonStore.rootPath}/`} render={this.onBallotsRender}/>
<Route exact path={`${commonStore.rootPath}/active`} render={this.onActiveBallotsRender}/>
<Route path={`${commonStore.rootPath}/new`} render={this.onNewBallotRender}/>

2
src/Loading.js
View File

@ -1,4 +1,4 @@
import React, { Component } from 'react';
import React from 'react';
const Loading = () => (
<div className="loading-container">
<div className="loading">

2
src/assets/App.css
View File

@ -162,6 +162,7 @@ hr {
padding: 0 10px; } }
.title {
margin-top: 30px;
margin-bottom: 30px;
color: #38454f;
font-size: 30px;
@ -456,7 +457,6 @@ button {
margin-top: 20px; } }
.search {
margin-bottom: 30px;
border-bottom: 1px solid #eee;
background-color: #fff;
line-height: 80px;

2
src/assets/src/assets/App.css
View File

@ -162,6 +162,7 @@ hr {
padding: 0 10px; } }
.title {
margin-top: 30px;
margin-bottom: 30px;
color: #38454f;
font-size: 30px;
@ -456,7 +457,6 @@ button {
margin-top: 20px; } }
.search {
margin-bottom: 30px;
border-bottom: 1px solid #eee;
background-color: #fff;
line-height: 80px;

1
src/assets/stylesheets/base.scss
View File

@ -93,6 +93,7 @@ hr {
}
.title {
margin-top: 30px;
margin-bottom: 30px;
color: #38454f;
font-size: 30px;

1
src/assets/stylesheets/search.scss
View File

@ -1,5 +1,4 @@
.search {
margin-bottom: 30px;
border-bottom: 1px solid #eee;
background-color: #fff;
line-height: 80px;

5
src/components/BallotKeysCard.jsx
View File

@ -45,7 +45,7 @@ export class BallotKeysCard extends React.Component {
@action("Get ballotTypeDisplayName")
getBallotTypeDisplayName(ballotType) {
const { ballotStore } = this.props;
switch(parseInt(ballotType)) {
switch(parseInt(ballotType, 10)) {
case ballotStore.KeysBallotType.add:
this.ballotTypeDisplayName = "add";
break;
@ -64,7 +64,7 @@ export class BallotKeysCard extends React.Component {
@action("Get affectedKeyTypeDisplayName")
getAffectedKeyTypeDisplayName(affectedKeyType) {
const { ballotStore } = this.props;
switch(parseInt(affectedKeyType)) {
switch(parseInt(affectedKeyType, 10)) {
case ballotStore.KeyType.mining:
this.affectedKeyTypeDisplayName = "mining";
break;
@ -269,7 +269,6 @@ export class BallotKeysCard extends React.Component {
let { commonStore, contractsStore } = this.props;
let ballotClass = (commonStore.filtered && this.isFinalized) ? "ballots-i display-none" : "ballots-i";
console.log(this.isFinalized)
let additionalProps = this.isFinalized ? { disabled: true } : {};
return (
<div className={ballotClass}>
<div className="ballots-about">

8
src/components/BallotKeysMetadata.jsx
View File

@ -11,7 +11,7 @@ export class BallotKeysMetadata extends React.Component {
<div className="hidden">
<div className="left">
<div className="form-el">
<label for="key">Affected Key</label>
<label htmlFor="key">Affected Key</label>
<input type="text" id="key"
value={ballotStore.ballotKeys.affectedKey}
onChange={e => ballotStore.changeBallotMetadata(e, "affectedKey", "ballotKeys")}
@ -23,7 +23,7 @@ export class BallotKeysMetadata extends React.Component {
</div>
<div className="right">
<div className="form-el">
<label for="key">Mining Key</label>
<label htmlFor="key">Mining Key</label>
<input type="text" id="key"
value={ballotStore.ballotKeys.miningKey}
onChange={e => ballotStore.changeBallotMetadata(e, "miningKey", "ballotKeys")}
@ -35,7 +35,7 @@ export class BallotKeysMetadata extends React.Component {
</div>
<div className="left">
<div className="form-el">
<label for="memo">Memo</label>
<label htmlFor="memo">Memo</label>
<input type="text" id="memo"
value={ballotStore.ballotKeys.memo}
onChange={e => ballotStore.changeBallotMetadata(e, "memo", "ballotKeys")}
@ -47,7 +47,7 @@ export class BallotKeysMetadata extends React.Component {
</div>
<div className="right">
<div className="form-el">
<label for="key">Ballot End</label>
<label htmlFor="key">Ballot End</label>
<input type="date" id="key"
value={ballotStore.endTime}
onChange={e => ballotStore.changeBallotMetadata(e, "endTime")}

1
src/components/BallotMinThresholdCard.jsx
View File

@ -187,7 +187,6 @@ export class BallotMinThresholdCard extends React.Component {
render () {
let { commonStore, contractsStore } = this.props;
let ballotClass = (commonStore.filtered && this.isFinalized) ? "ballots-i display-none" : "ballots-i";
let additionalProps = this.isFinalized ? { disabled: true } : {};
return (
<div className={ballotClass}>
<div className="ballots-about">

4
src/components/BallotMinThresholdMetadata.jsx
View File

@ -11,7 +11,7 @@ export class BallotMinThresholdMetadata extends React.Component {
<div className="hidden">
<div className="left">
<div className="form-el">
<label for="key">Proposed Value</label>
<label htmlFor="key">Proposed Value</label>
<input type="number" id="key"
value={ballotStore.ballotMinThreshold.proposedValue}
onChange={e => ballotStore.changeBallotMetadata(e, "proposedValue", "ballotMinThreshold")}
@ -23,7 +23,7 @@ export class BallotMinThresholdMetadata extends React.Component {
</div>
<div className="right">
<div className="form-el">
<label for="key">Ballot End</label>
<label htmlFor="key">Ballot End</label>
<input type="date" id="key"
value={ballotStore.endTime}
onChange={e => ballotStore.changeBallotMetadata(e, "endTime")}

4
src/components/BallotProxyCard.jsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import moment from 'moment';
import { observable, action, computed } from "mobx";
import { observable, action } from "mobx";
import { inject, observer } from "mobx-react";
import { toAscii } from "../helpers";
import { constants } from "../constants";
@ -198,7 +198,7 @@ export class BallotProxyCard extends React.Component {
const { commonStore, contractsStore, ballotStore } = this.props;
let ballotClass = (commonStore.filtered && this.isFinalized) ? "ballots-i display-none" : "ballots-i";
return (
<div className="ballots-i">
<div className={ballotClass}>
<div className="ballots-about">
<div className="ballots-about-i ballots-about-i_name">
<div className="ballots-about-td">

6
src/components/BallotProxyMetadata.jsx
View File

@ -12,7 +12,7 @@ export class BallotProxyMetadata extends React.Component {
<div className="hidden">
<div className="left">
<div className="form-el">
<label for="key">Proposed Address</label>
<label htmlFor="key">Proposed Address</label>
<input type="text" id="key"
value={ballotStore.ballotProxy.proposedAddress}
onChange={e => ballotStore.changeBallotMetadata(e, "proposedAddress", "ballotProxy")}
@ -24,7 +24,7 @@ export class BallotProxyMetadata extends React.Component {
</div>
<div className="right">
<div className="form-el">
<label for="us-state">Contract Type</label>
<label htmlFor="us-state">Contract Type</label>
<Select id="us-state"
value={ballotStore.ballotProxy.contractType}
onChange={e => ballotStore.changeBallotMetadata(e, "contractType", "ballotProxy")}
@ -45,7 +45,7 @@ export class BallotProxyMetadata extends React.Component {
</div>
<div className="left">
<div className="form-el">
<label for="key">Ballot End</label>
<label htmlFor="key">Ballot End</label>
<input type="date" id="key"
value={ballotStore.endTime}
onChange={e => ballotStore.changeBallotMetadata(e, "endTime")}

4
src/components/Ballots.jsx
View File

@ -5,10 +5,6 @@ import "babel-polyfill";
@inject("commonStore", "contractsStore", "ballotStore", "ballotsStore")
@observer
export class Ballots extends React.Component {
constructor(props) {
super(props);
}
render () {
const { commonStore, ballotsStore } = this.props;
if (ballotsStore.ballotCards.length > 0) {

12
src/components/KeysTypes.jsx
View File

@ -15,7 +15,7 @@ export class KeysTypes extends React.Component {
checked={ballotStore.isAddKeysBallotType}
onChange={e => ballotStore.changeKeysBallotType(e, ballotStore.KeysBallotType.add)}
/>
<label for="add-key" className="radio radio_icon radio_add">Add key</label>
<label htmlFor="add-key" className="radio radio_icon radio_add">Add key</label>
<p className="hint">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
</p>
@ -26,7 +26,7 @@ export class KeysTypes extends React.Component {
checked={ballotStore.isRemoveKeysBallotType}
onChange={e => ballotStore.changeKeysBallotType(e, ballotStore.KeysBallotType.remove)}
/>
<label for="remove-key" className="radio radio_icon radio_remove">Remove key</label>
<label htmlFor="remove-key" className="radio radio_icon radio_remove">Remove key</label>
<p className="hint">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
</p>
@ -37,7 +37,7 @@ export class KeysTypes extends React.Component {
checked={ballotStore.isSwapKeysBallotType}
onChange={e => ballotStore.changeKeysBallotType(e, ballotStore.KeysBallotType.swap)}
/>
<label for="swap-key" className="radio radio_icon radio_swap">Swap key</label>
<label htmlFor="swap-key" className="radio radio_icon radio_swap">Swap key</label>
<p className="hint">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
</p>
@ -50,7 +50,7 @@ export class KeysTypes extends React.Component {
checked={ballotStore.isMiningKeyType}
onChange={e => ballotStore.changeKeyType(e, ballotStore.KeyType.mining)}
/>
<label for="mining-key" className="radio">Mining Key</label>
<label htmlFor="mining-key" className="radio">Mining Key</label>
<p className="hint">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
</p>
@ -61,7 +61,7 @@ export class KeysTypes extends React.Component {
checked={ballotStore.isPayoutKeyType}
onChange={e => ballotStore.changeKeyType(e, ballotStore.KeyType.payout)}
/>
<label for="payout-key" className="radio">Payout Key</label>
<label htmlFor="payout-key" className="radio">Payout Key</label>
<p className="hint">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
</p>
@ -72,7 +72,7 @@ export class KeysTypes extends React.Component {
checked={ballotStore.isVotingKeyType}
onChange={e => ballotStore.changeKeyType(e, ballotStore.KeyType.voting)}
/>
<label for="voting-key" className="radio">Voting Key</label>
<label htmlFor="voting-key" className="radio">Voting Key</label>
<p className="hint">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
</p>

8
src/components/NewBallot.jsx
View File

@ -143,7 +143,7 @@ export class NewBallot extends React.Component {
onClick = async () => {
const { commonStore, contractsStore, ballotStore } = this.props;
const { location, push, goBack } = this.props.routing;
const { push } = this.props.routing;
commonStore.showLoading();
const isValidVotingKey = contractsStore.isValidVotingKey;
if (!isValidVotingKey) {
@ -213,7 +213,7 @@ export class NewBallot extends React.Component {
checked={ballotStore.isBallotForKey}
onChange={e => ballotStore.changeBallotType(e, ballotStore.BallotType.keys)}
/>
<label for="ballot-for-validators" className="radio">Ballot for validators</label>
<label htmlFor="ballot-for-validators" className="radio">Ballot for validators</label>
<p className="hint">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore
@ -227,7 +227,7 @@ export class NewBallot extends React.Component {
checked={ballotStore.isBallotForMinThreshold}
onChange={e => ballotStore.changeBallotType(e, ballotStore.BallotType.minThreshold)}
/>
<label for="ballot-for-consensus" className="radio">Ballot for consensus</label>
<label htmlFor="ballot-for-consensus" className="radio">Ballot for consensus</label>
<p className="hint">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore
@ -241,7 +241,7 @@ export class NewBallot extends React.Component {
checked={ballotStore.isBallotForProxy}
onChange={e => ballotStore.changeBallotType(e, ballotStore.BallotType.proxy)}
/>
<label for="ballot-for-proxy" className="radio">Ballot for proxy</label>
<label htmlFor="ballot-for-proxy" className="radio">Ballot for proxy</label>
<p className="hint">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore

12
src/components/Validator.jsx
View File

@ -12,7 +12,7 @@ export class Validator extends React.Component {
<div className="hidden">
<div className="left">
<div className="form-el">
<label for="full-name">Full Name</label>
<label htmlFor="full-name">Full Name</label>
<input type="text" id="full-name"
value={validatorStore.fullName}
onChange={e => validatorStore.changeValidatorMetadata(e, "fullName")}
@ -24,7 +24,7 @@ export class Validator extends React.Component {
</div>
<div className="right">
<div className="form-el">
<label for="address">Address</label>
<label htmlFor="address">Address</label>
<input type="text" id="address"
value={validatorStore.address}
onChange={e => validatorStore.changeValidatorMetadata(e, "address")}
@ -36,7 +36,7 @@ export class Validator extends React.Component {
</div>
<div className="left">
<div className="form-el">
<label for="us-state">State</label>
<label htmlFor="us-state">State</label>
<Select id="us-state"
value={validatorStore.state}
onChange={e => validatorStore.changeValidatorMetadata(e, "state")}
@ -102,7 +102,7 @@ export class Validator extends React.Component {
</div>
<div className="right">
<div className="form-el">
<label for="zip-code">Zip Code</label>
<label htmlFor="zip-code">Zip Code</label>
<input type="number" id="zip-code"
value={validatorStore.zipCode}
onChange={e => validatorStore.changeValidatorMetadata(e, "zipCode")}
@ -114,7 +114,7 @@ export class Validator extends React.Component {
</div>
<div className="left">
<div className="form-el">
<label for="license-id">License ID</label>
<label htmlFor="license-id">License ID</label>
<input type="text" id="license-id"
value={validatorStore.licenseID}
onChange={e => validatorStore.changeValidatorMetadata(e, "licenseID")}
@ -126,7 +126,7 @@ export class Validator extends React.Component {
</div>
<div className="right">
<div className="form-el">
<label for="license-expiration">License Expiration</label>
<label htmlFor="license-expiration">License Expiration</label>
<input type="date" id="license-expiration"
value={validatorStore.licenseExpiration}
onChange={e => validatorStore.changeValidatorMetadata(e, "licenseExpiration")}

2
src/stores/BallotsStore.js
View File

@ -1,4 +1,4 @@
import { observable, computed, action } from 'mobx';
import { observable } from 'mobx';
class BallotsStore {
@observable activeKeysBallotsLength;

8
src/stores/CommonStore.js
View File

@ -1,9 +1,10 @@
import { observable, computed, action } from 'mobx';
import { observable, action } from 'mobx';
class CommonStore {
@observable loading;
@observable rootPath;
@observable filtered;
@observable searchTerm;
constructor() {
this.loading = false;
@ -20,6 +21,11 @@ class CommonStore {
hideLoading() {
this.loading = false;
}
@action("set search term")
setSearchTerm = (_val) => {
this.searchTerm = _val;
}
}
const commonStore = new CommonStore();

2
src/stores/ValidatorStore.js
View File

@ -1,4 +1,4 @@
import { observable, computed, action } from 'mobx';
import { observable, action } from 'mobx';
class ValidatorStore {