Rxjs - extract component logic

react/src/components/addcoin/addcoin.js

@@ -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"

react/src/components/dashboard/dashboard.js

@@ -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>

react/src/components/dashboard/loginModal.js

@@ -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>

react/src/components/dashboard/navbar.js

@@ -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>

react/src/components/dashboard/walletsBalance.js

@@ -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">