lukechilds
/
EasyDEX-GUI
mirror of https://github.com/lukechilds/EasyDEX-GUI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Rxjs - extract component logic

all-modes
petitPapillon 8 years ago
parent
3d0cd5b00f
commit
2613c2d2e5
5 changed files with 44 additions and 20 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      react/src/components/addcoin/addcoin.js
  2. 18
      react/src/components/dashboard/dashboard.js
  3. 6
      react/src/components/dashboard/loginModal.js
  4. 12
      react/src/components/dashboard/navbar.js
  5. 16
      react/src/components/dashboard/walletsBalance.js

12
react/src/components/addcoin/addcoin.js
View File

@ -206,6 +206,10 @@ class AddCoin extends React.Component {
}));
}
hasMoreThanOneCoin() {
return this.state.coins.length > 1;
}
activateAllCoins() {
Store.dispatch(addCoin(
this.state.coins[0].selectedCoin.split('|')[0],
@ -245,7 +249,7 @@ class AddCoin extends React.Component {
const _coin = _item.selectedCoin || '';
items.push(
<div className={ this.state.coins.length > 1 ? 'multi' : 'single' } key={ 'add-coin-' + i }>
<div className={ this.hasMoreThanOneCoin() ? 'multi' : 'single' } key={ 'add-coin-' + i }>
<div className="col-sm-8">
<div className="form-group">
<select
@ -262,7 +266,7 @@ class AddCoin extends React.Component {
</select>
</div>
</div>
<div className={ this.state.coins.length > 1 ? 'hide' : 'col-sm-4' }>
<div className={ this.hasMoreThanOneCoin() ? 'hide' : 'col-sm-4' }>
<button
type="button"
className="btn btn-primary mdl_addcoin_done_btn-login"
@ -350,7 +354,7 @@ class AddCoin extends React.Component {
</label>
</div>
</div>
<div className={ this.state.coins.length > 1 && i !== 0 ? 'col-sm-1' : 'hide' }>
<div className={ this.hasMoreThanOneCoin() && i !== 0 ? 'col-sm-1' : 'hide' }>
<button
type="button"
className="btn btn-primary mdl_addcoin_done_btn-login"
@ -413,7 +417,7 @@ class AddCoin extends React.Component {
</span>
{ this.renderCoinSelectors() }
<div
className={'text-align-center vertical-margin-20 horizontal-margin-0 ' + (this.state.coins.length > 1 ? 'col-sm-12' : 'hide') }>
className={'text-align-center vertical-margin-20 horizontal-margin-0 ' + (this.hasMoreThanOneCoin() ? 'col-sm-12' : 'hide') }>
<button
type="button"
className="btn btn-primary col-sm-4 float-none"

18
react/src/components/dashboard/dashboard.js
View File

@ -24,16 +24,20 @@ class Dashboard extends React.Component {
this.renderDashboard = this.renderDashboard.bind(this);
}
isSectionActive(section) {
return this.props.Dashboard.activeSection === section;
}
renderDashboard() {
document.body.className = '';
return (
<div className="full-height">
<div
className={ this.props.Dashboard.activeSection === 'wallets' ? 'page-main' : '' }
className={ this.isSectionActive('wallets') ? 'page-main' : '' }
id="section-dashboard">
<Navbar {...this.props} />
<div className={ this.props.Dashboard.activeSection === 'wallets' ? 'show' : 'hide' }>
<div className={ this.isSectionActive('wallets') ? 'show' : 'hide' }>
<CoinTile {...this.props} />
<WalletsNav {...this.props} />
<WalletsProgress {...this.props} />
@ -45,19 +49,19 @@ class Dashboard extends React.Component {
<WalletsNative {...this.props} />
<WalletsNativeTxInfo {...this.props} />
</div>
<div className={ this.props.Dashboard.activeSection === 'edex' ? 'show' : 'hide' }>
<div className={ this.isSectionActive('edex') ? 'show' : 'hide' }>
<EDEX {...this.props} />
</div>
<div className={ this.props.Dashboard.activeSection === 'atomic' ? 'show' : 'hide' }>
<div className={ this.isSectionActive('atomic') ? 'show' : 'hide' }>
<Atomic {...this.props} />
</div>
<div className={ this.props.Dashboard.activeSection === 'jumblr' ? 'show' : 'hide' }>
<div className={ this.isSectionActive('jumblr') ? 'show' : 'hide' }>
<Jumblr {...this.props} />
</div>
<div className={ this.props.Dashboard.activeSection === 'settings' ? 'show' : 'hide' }>
<div className={ this.isSectionActive('settings') ? 'show' : 'hide' }>
<Settings {...this.props} />
</div>
<div className={ this.props.Dashboard.activeSection === 'about' ? 'show' : 'hide' }>
<div className={ this.isSectionActive('about') ? 'show' : 'hide' }>
<About {...this.props} />
</div>
</div>

6
react/src/components/dashboard/loginModal.js
View File

@ -44,6 +44,10 @@ class LoginModal extends React.Component {
Store.dispatch(iguanaWalletPassphrase(this.state.loginPassphrase));
}
isLoginPassphraseEmpty() {
return !this.state.loginPassphrase || !this.state.loginPassphrase.length;
}
render() {
if (this.props.Dashboard.activateLoginModal) {
return (
@ -95,7 +99,7 @@ class LoginModal extends React.Component {
className="btn btn-primary btn-block"
id="loginbtn"
onClick={ this.loginSeed }
disabled={ !this.state.loginPassphrase || !this.state.loginPassphrase.length }>{ translate('INDEX.SIGN_IN') }</button>
disabled={ this.isLoginPassphraseEmpty() }>{ translate('INDEX.SIGN_IN') }</button>
</div>
</div>
</div>

12
react/src/components/dashboard/navbar.js
View File

@ -52,6 +52,10 @@ class Navbar extends React.Component {
Store.dispatch(toggleSyncOnlyModal(true));
}
isSectionActive(section) {
return this.props.Dashboard.activeSection === section;
}
render() {
return (
<nav className="site-navbar navbar navbar-default navbar-fixed-top navbar-mega" role="navigation">
@ -89,23 +93,23 @@ class Navbar extends React.Component {
</i>
</a>
</li>
<li className={ this.props.Dashboard.activeSection === 'wallets' ? 'active nav-top-menu' : 'nav-top-menu' }>
<li className={ this.isSectionActive('wallets') ? 'active nav-top-menu' : 'nav-top-menu' }>
<a id="nav-dashboard" onClick={ () => this.dashboardChangeSection('wallets') }>
<i className="site-menu-icon" aria-hidden="true"></i> { translate('INDEX.WALLETS') }
</a>
</li>
<li className={ this.props.Dashboard.activeSection === 'edex' ? 'active nav-top-menu' : 'nav-top-menu' }>
<li className={ this.isSectionActive('edex') ? 'active nav-top-menu' : 'nav-top-menu' }>
<a id="nav-easydex" onClick={ () => this.dashboardChangeSection('edex') }>
<i className="site-menu-icon" aria-hidden="true"></i> EasyDEX
</a>
</li>
<li
className={'display-none ' + (this.props.Dashboard.activeSection === 'jumblr' ? 'active nav-top-menu' : 'nav-top-menu') }>
className={'display-none ' + (this.isSectionActive('jumblr') ? 'active nav-top-menu' : 'nav-top-menu') }>
<a id="nav-jumblr" onClick={ () => this.dashboardChangeSection('jumblr') }>
<i className="site-menu-icon" aria-hidden="true"></i> Jumblr
</a>
</li>
<li className={ this.props.Dashboard.activeSection === 'atomic' ? 'active nav-top-menu' : 'nav-top-menu' }>
<li className={ this.isSectionActive('atomic') ? 'active nav-top-menu' : 'nav-top-menu' }>
<a id="nav-iguana-atomic-explorer" onClick={ () => this.dashboardChangeSection('atomic') }>
<i className="site-menu-icon" aria-hidden="true"></i> Atomic Explorer
</a>

16
react/src/components/dashboard/walletsBalance.js
View File

@ -68,6 +68,14 @@ class WalletsBalance extends React.Component {
return _balance;
}
isActiveCoinMode(coinMode) {
return this.props.ActiveCoin.mode === coinMode;
}
isNativeOrBasiliskCoinMode() {
return this.isActiveCoinMode('native') || this.isActiveCoinMode('basilisk');
}
renderLB(_translationID) {
const _translationComponents = translate(_translationID).split('<br>');
@ -89,7 +97,7 @@ class WalletsBalance extends React.Component {
return (
<div id="wallet-widgets">
<div className="col-xs-12">
<div className={ this.props.ActiveCoin.mode === 'native' || (this.props.ActiveCoin.mode === 'full' && !this.isFullySynced()) ? 'col-xs-12' : 'col-xs-12 hide' }>
<div className={ this.isActiveCoinMode('native') || (this.isActiveCoinMode('full') && !this.isFullySynced()) ? 'col-xs-12' : 'col-xs-12 hide' }>
<div role="alert" className="alert alert-info alert-dismissible" id="edexcoin-wallet-waitingrt-alert">
<button aria-label="Close" data-dismiss="alert" className="close" type="button">
<span aria-hidden="true">×</span>
@ -111,7 +119,7 @@ class WalletsBalance extends React.Component {
</div>
</div>
<div
className={ this.props.ActiveCoin.mode === 'native' || this.props.ActiveCoin.mode === 'basilisk' ? 'col-lg-4 col-xs-12' : 'col-lg-12 col-xs-12' }
className={ this.isNativeOrBasiliskCoinMode() ? 'col-lg-4 col-xs-12' : 'col-lg-12 col-xs-12' }
id="edexcoin_getbalance_t">
<div className="widget widget-shadow" id="widgetLineareaOne">
<div className="widget-content">
@ -130,7 +138,7 @@ class WalletsBalance extends React.Component {
</div>
<div
className={ this.props.ActiveCoin.mode === 'native' || this.props.ActiveCoin.mode === 'basilisk' ? 'col-lg-4 col-xs-12' : 'col-lg-4 col-xs-12 hide' }
className={ this.isNativeOrBasiliskCoinMode() ? 'col-lg-4 col-xs-12' : 'col-lg-4 col-xs-12 hide' }
id="edexcoin_getbalance_interest">
<div className="widget widget-shadow" id="widgetLineareaOne">
<div className="widget-content">
@ -149,7 +157,7 @@ class WalletsBalance extends React.Component {
</div>
<div
className={ this.props.ActiveCoin.mode === 'native' || this.props.ActiveCoin.mode === 'basilisk' ? 'col-lg-4 col-xs-12' : 'col-lg-4 col-xs-12 hide' }
className={ this.isNativeOrBasiliskCoinMode() ? 'col-lg-4 col-xs-12' : 'col-lg-4 col-xs-12 hide' }
id="edexcoin_getbalance_total_interest">
<div className="widget widget-shadow" id="widgetLineareaOne">
<div className="widget-content">

Write Preview
Loading…
Cancel
Save