From 93c8d903294da9955ff1fff06fc7429fb1f403ba Mon Sep 17 00:00:00 2001 From: petitPapillon Date: Mon, 5 Jun 2017 23:59:55 +0200 Subject: [PATCH] Decouple jsx out of js - dashboard pages --- react/src/components/dashboard/settings.js | 475 +----------------- .../components/dashboard/settings.render.js | 473 +++++++++++++++++ react/src/components/dashboard/syncOnly.js | 95 +--- .../components/dashboard/syncOnly.render.js | 98 ++++ .../components/dashboard/walletsBalance.js | 85 +--- .../dashboard/walletsBalance.render.js | 85 ++++ .../dashboard/walletsBasiliskConnection.js | 72 +-- .../walletsBasiliskConnection.render.js | 76 +++ 8 files changed, 757 insertions(+), 702 deletions(-) create mode 100644 react/src/components/dashboard/settings.render.js create mode 100644 react/src/components/dashboard/syncOnly.render.js create mode 100644 react/src/components/dashboard/walletsBalance.render.js create mode 100644 react/src/components/dashboard/walletsBasiliskConnection.render.js diff --git a/react/src/components/dashboard/settings.js b/react/src/components/dashboard/settings.js index 323d060..3c3d2c6 100644 --- a/react/src/components/dashboard/settings.js +++ b/react/src/components/dashboard/settings.js @@ -13,9 +13,11 @@ import { getAppInfo } from '../../actions/actionCreators'; import Store from '../../store'; -import AddCoinOptionsCrypto from '../addcoin/addcoinOptionsCrypto'; -import AddCoinOptionsAC from '../addcoin/addcoinOptionsAC'; -import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat'; + +import { + AppInfoTabRender, + SettingsRender +} from './settings.render'; /* TODO: @@ -124,87 +126,10 @@ class Settings extends React.Component { const releaseInfo = this.props.Settings.appInfo && this.props.Settings.appInfo.releaseInfo; if (releaseInfo) { - return ( -
this.openTab('AppInfo', 8) }> -
- - { translate('SETTINGS.APP_INFO') } - -
-
-
-
-
-
{ translate('SETTINGS.APP_RELEASE') }
-
- { translate('SETTINGS.NAME') }: { this.props.Settings.appInfo.releaseInfo.name } -
-
- { translate('SETTINGS.VERSION') }: { this.props.Settings.appInfo.releaseInfo.version } -
-
- { translate('SETTINGS.APP_SESSION') }: { this.props.Settings.appInfo.appSession } -
-
-
-
-
-
{ translate('SETTINGS.SYS_INFO') }
-
- { translate('SETTINGS.ARCH') }: { this.props.Settings.appInfo.sysInfo.arch } -
-
- { translate('SETTINGS.OS_TYPE') }: { this.props.Settings.appInfo.sysInfo.os_type } -
-
- { translate('SETTINGS.OS_PLATFORM') }: { this.props.Settings.appInfo.sysInfo.platform } -
-
- { translate('SETTINGS.OS_RELEASE') }: { this.props.Settings.appInfo.sysInfo.os_release } -
-
- { translate('SETTINGS.CPU') }: { this.props.Settings.appInfo.sysInfo.cpu } -
-
- { translate('SETTINGS.CPU_CORES') }: { this.props.Settings.appInfo.sysInfo.cpu_cores } -
-
- { translate('SETTINGS.MEM') }: { this.props.Settings.appInfo.sysInfo.totalmem_readable } -
-
-
-
-
-
{ translate('SETTINGS.LOCATIONS') }
-
- { translate('SETTINGS.CACHE') }: { this.props.Settings.appInfo.dirs.cacheLocation } -
-
- { translate('SETTINGS.CONFIG') }: { this.props.Settings.appInfo.dirs.configLocation } -
-
- Iguana { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.iguanaBin } -
-
- Iguana { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.iguanaDir } -
-
- Komodo { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.komododBin } -
-
- Komodo { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.komodoDir } -
-
-
-
-
-
- ); - } else { - return null; + return AppInfoTabRender.call(this); } + + return null; } renderSNPeersList() { @@ -341,389 +266,7 @@ class Settings extends React.Component { } render() { - return ( -
-
-
-
-
-
-

{ translate('INDEX.WALLET_SETTINGS') }

-
-
this.openTab('WalletInfo', 0) }> - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{ translate('INDEX.KEY') }{ translate('INDEX.VALUE') }
pubkey{ this.props.Main.activeHandle.pubkey }
btcpubkey{ this.props.Main.activeHandle.btcpubkey }
rmd160{ this.props.Main.activeHandle.rmd160 }
NXT{ this.props.Main.activeHandle.NXT }
notary{ this.props.Main.activeHandle.notary }
status{ this.props.Main.activeHandle.status }
-
-
-
- -
this.openTab('AddNodeforCoin', 1) }> - -
-
-
-
-
-

{ translate('INDEX.USE_THIS_SECTION') }

-
-
-
- -
-
-
- -
-
-
- SuperNET Peers: -
-

{ this.renderSNPeersList() }

-
- Raw Peers: -
-

{ this.renderPeersList() }

-
-
- -
-
-

{ translate('INDEX.USE_THIS_SECTION_PEER') }

-
-
-
- -
-
- -
-
-
- -
-
-
-
-
-
- -
this.openTab('DumpWallet', 2) }> - -
-
Wallet Backup section to be updated soon.
-
-
- -
this.openTab('FiatCurrencySettings', 3) }> - -
-
Fiat currency settings section to be updated soon.
-
-
- -
this.openTab('ExportKeys', 4) }> - -
-
-

-

{ this.renderLB('INDEX.ONLY_ACTIVE_WIF_KEYS') }

- - { translate('INDEX.PLEASE_KEEP_KEYS_SAFE') } - -

-
-
-
- - -
-
- -
-
- -
-
- - - - - - - - - -
- { this.props.ActiveCoin.coin } - { this.props.Settings.address }
- { this.props.ActiveCoin.coin }Wif - { this.props.Settings.wifkey }
-
-
-
-
-
- -
this.openTab('ImportKeys', 5) }> - -
-
-

-

{ translate('INDEX.IMPORT_KEYS_DESC_P1') }

-
{ translate('INDEX.IMPORT_KEYS_DESC_P2') }

-
{ translate('INDEX.IMPORT_KEYS_DESC_P3') }

- - { translate('INDEX.PLEASE_KEEP_KEYS_SAFE') } - -

-
-
-
- - -
-
- -
-
-
-
-
- -
this.openTab('DebugLog', 6) }> - -
-
-

{ translate('INDEX.DEBUG_LOG_DESC') }

-
-
-
- - -
-
- - -
-
- -
-
-
{ this.renderDebugLogData() }
-
-
-
-
-
- -
this.openTab('AppSettings', 7) }> - -
-
-

- { translate('SETTINGS.CONFIG_RESTART_REQUIRED') } -

-
- - - { this.renderConfigEditForm() } - -
-
-
- -
-
-
-
- { this.renderAppInfoTab() } -
-
-
-
-
-
-
- ); + return SettingsRender.call(this); } } diff --git a/react/src/components/dashboard/settings.render.js b/react/src/components/dashboard/settings.render.js new file mode 100644 index 0000000..d64575c --- /dev/null +++ b/react/src/components/dashboard/settings.render.js @@ -0,0 +1,473 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; +import AddCoinOptionsCrypto from '../addcoin/addcoinOptionsCrypto'; +import AddCoinOptionsAC from '../addcoin/addcoinOptionsAC'; +import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat'; + + +export const AppInfoTabRender = function () { + return ( +
this.openTab('AppInfo', 8) }> +
+ + { translate('SETTINGS.APP_INFO') } + +
+
+
+
+
+
{ translate('SETTINGS.APP_RELEASE') }
+
+ { translate('SETTINGS.NAME') }: { this.props.Settings.appInfo.releaseInfo.name } +
+
+ { translate('SETTINGS.VERSION') }: { this.props.Settings.appInfo.releaseInfo.version } +
+
+ { translate('SETTINGS.APP_SESSION') }: { this.props.Settings.appInfo.appSession } +
+
+
+
+
+
{ translate('SETTINGS.SYS_INFO') }
+
+ { translate('SETTINGS.ARCH') }: { this.props.Settings.appInfo.sysInfo.arch } +
+
+ { translate('SETTINGS.OS_TYPE') }: { this.props.Settings.appInfo.sysInfo.os_type } +
+
+ { translate('SETTINGS.OS_PLATFORM') }: { this.props.Settings.appInfo.sysInfo.platform } +
+
+ { translate('SETTINGS.OS_RELEASE') }: { this.props.Settings.appInfo.sysInfo.os_release } +
+
+ { translate('SETTINGS.CPU') }: { this.props.Settings.appInfo.sysInfo.cpu } +
+
+ { translate('SETTINGS.CPU_CORES') }: { this.props.Settings.appInfo.sysInfo.cpu_cores } +
+
+ { translate('SETTINGS.MEM') }: { this.props.Settings.appInfo.sysInfo.totalmem_readable } +
+
+
+
+
+
{ translate('SETTINGS.LOCATIONS') }
+
+ { translate('SETTINGS.CACHE') }: { this.props.Settings.appInfo.dirs.cacheLocation } +
+
+ { translate('SETTINGS.CONFIG') }: { this.props.Settings.appInfo.dirs.configLocation } +
+
+ Iguana { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.iguanaBin } +
+
+ Iguana { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.iguanaDir } +
+
+ Komodo { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.komododBin } +
+
+ Komodo { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.komodoDir } +
+
+
+
+
+
+ ); +}; + +export const SettingsRender = function () { + return ( +
+
+
+
+
+
+

{ translate('INDEX.WALLET_SETTINGS') }

+
+
this.openTab('WalletInfo', 0) }> + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{ translate('INDEX.KEY') }{ translate('INDEX.VALUE') }
pubkey{ this.props.Main.activeHandle.pubkey }
btcpubkey{ this.props.Main.activeHandle.btcpubkey }
rmd160{ this.props.Main.activeHandle.rmd160 }
NXT{ this.props.Main.activeHandle.NXT }
notary{ this.props.Main.activeHandle.notary }
status{ this.props.Main.activeHandle.status }
+
+
+
+ +
this.openTab('AddNodeforCoin', 1) }> + +
+
+
+
+
+

{ translate('INDEX.USE_THIS_SECTION') }

+
+
+
+ +
+
+
+ +
+
+
+ SuperNET Peers: +
+

{ this.renderSNPeersList() }

+
+ Raw Peers: +
+

{ this.renderPeersList() }

+
+
+ +
+
+

{ translate('INDEX.USE_THIS_SECTION_PEER') }

+
+
+
+ +
+
+ +
+
+
+ +
+
+
+
+
+
+ +
this.openTab('DumpWallet', 2) }> + +
+
Wallet Backup section to be updated soon.
+
+
+ +
this.openTab('FiatCurrencySettings', 3) }> + +
+
Fiat currency settings section to be updated soon.
+
+
+ +
this.openTab('ExportKeys', 4) }> + +
+
+

+

{ this.renderLB('INDEX.ONLY_ACTIVE_WIF_KEYS') }

+ + { translate('INDEX.PLEASE_KEEP_KEYS_SAFE') } + +

+
+
+
+ + +
+
+ +
+
+ +
+
+ + + + + + + + + +
+ { this.props.ActiveCoin.coin } + { this.props.Settings.address }
+ { this.props.ActiveCoin.coin }Wif + { this.props.Settings.wifkey }
+
+
+
+
+
+ +
this.openTab('ImportKeys', 5) }> + +
+
+

+

{ translate('INDEX.IMPORT_KEYS_DESC_P1') }

+
{ translate('INDEX.IMPORT_KEYS_DESC_P2') }

+
{ translate('INDEX.IMPORT_KEYS_DESC_P3') }

+ + { translate('INDEX.PLEASE_KEEP_KEYS_SAFE') } + +

+
+
+
+ + +
+
+ +
+
+
+
+
+ +
this.openTab('DebugLog', 6) }> + +
+
+

{ translate('INDEX.DEBUG_LOG_DESC') }

+
+
+
+ + +
+
+ + +
+
+ +
+
+
{ this.renderDebugLogData() }
+
+
+
+
+
+ +
this.openTab('AppSettings', 7) }> + +
+
+

+ { translate('SETTINGS.CONFIG_RESTART_REQUIRED') } +

+
+ + + { this.renderConfigEditForm() } + +
+
+
+ +
+
+
+
+ { this.renderAppInfoTab() } +
+
+
+
+
+
+
+ ); +}; \ No newline at end of file diff --git a/react/src/components/dashboard/syncOnly.js b/react/src/components/dashboard/syncOnly.js index 970e6f9..6afe42a 100644 --- a/react/src/components/dashboard/syncOnly.js +++ b/react/src/components/dashboard/syncOnly.js @@ -1,5 +1,4 @@ import React from 'react'; -import { translate } from '../../translate/translate'; import { getCoinTitle } from '../../util/coinHelper'; import { stopInterval, @@ -10,6 +9,12 @@ import { } from '../../actions/actionCreators'; import Store from '../../store'; +import { + ProgressRender, + ForkItemRender, + SyncOnlyRender +} from './syncOnly.render'; + class SyncOnly extends React.Component { constructor(props) { super(props); @@ -92,46 +97,7 @@ class SyncOnly extends React.Component { } renderProgress(fork) { - return ( -
-
-
-
- { translate('INDEX.BUNDLES') } ({ fork.coin }) 100.00% - ( { fork.blocks } / { fork.blocks } ) ==>> RT{ fork.RTheight } -
-
- { translate('INDEX.BUNDLES') } { fork.bundles }% -
-
-
-
-
-
- utxo { fork.utxo }% -
-
-
-
- { translate('INDEX.BALANCES') } { fork.balances }% -
-
-
-
- { translate('INDEX.VALIDATED') } { fork.validated }% -
-
-
-
- ); + return ProgressRender.call(this, fork); } renderForksList() { @@ -144,31 +110,7 @@ class SyncOnly extends React.Component { forkInfo.registry && forkInfo.getinfo) { items.push( -
-
- { - Full -
{ this.renderCoinName(forkInfo.registry.coin).name } ({ forkInfo.registry.coin.toUpperCase() })
-
- this._stopIguanaFork(forkInfo.registry.pmid) }> - { translate('INDEX.STOP') } - - this._restartIguanaFork(forkInfo.registry.coin.toUpperCase(), forkInfo.registry.pmid, port) }> - { translate('INDEX.RESTART') } - -
-
-
- { this.renderProgress(forkInfo.getinfo) } -
-
+ ForkItemRender.call(this, forkInfo, port) ); } } @@ -185,26 +127,7 @@ class SyncOnly extends React.Component { render() { if (this.props && this.props.SyncOnly.display) { - return ( -
-
-
-
-
- { this.renderForksList() } -
-
- -
-
-
-
-
-
- ); + return SyncOnlyRender.call(this); } else { return null; } diff --git a/react/src/components/dashboard/syncOnly.render.js b/react/src/components/dashboard/syncOnly.render.js new file mode 100644 index 0000000..d9f890c --- /dev/null +++ b/react/src/components/dashboard/syncOnly.render.js @@ -0,0 +1,98 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +export const ProgressRender = function (fork) { + return ( +
+
+
+
+ { translate('INDEX.BUNDLES') } ({ fork.coin }) 100.00% - ( { fork.blocks } / { fork.blocks } ) ==>> RT{ fork.RTheight } +
+
+ { translate('INDEX.BUNDLES') } { fork.bundles }% +
+
+
+
+
+
+ utxo { fork.utxo }% +
+
+
+
+ { translate('INDEX.BALANCES') } { fork.balances }% +
+
+
+
+ { translate('INDEX.VALIDATED') } { fork.validated }% +
+
+
+
+ ); +}; + +export const ForkItemRender = function (forkInfo, port) { + return ( +
+
+ { + Full +
{ this.renderCoinName(forkInfo.registry.coin).name } ({ forkInfo.registry.coin.toUpperCase() })
+
+ this._stopIguanaFork(forkInfo.registry.pmid) }> + { translate('INDEX.STOP') } + + this._restartIguanaFork(forkInfo.registry.coin.toUpperCase(), forkInfo.registry.pmid, port) }> + { translate('INDEX.RESTART') } + +
+
+
+ { this.renderProgress(forkInfo.getinfo) } +
+
+ ); +}; + +export const SyncOnlyRender = function () { + return ( +
+
+
+
+
+ { this.renderForksList() } +
+
+ +
+
+
+
+
+
+ ); +}; \ No newline at end of file diff --git a/react/src/components/dashboard/walletsBalance.js b/react/src/components/dashboard/walletsBalance.js index 1c48218..4603765 100755 --- a/react/src/components/dashboard/walletsBalance.js +++ b/react/src/components/dashboard/walletsBalance.js @@ -1,6 +1,8 @@ import React from 'react'; import { translate } from '../../translate/translate'; +import WalletsBalanceRender from './walletsBalance.render'; + class WalletsBalance extends React.Component { constructor(props) { super(props); @@ -94,87 +96,10 @@ class WalletsBalance extends React.Component { this.props.ActiveCoin.mode !== 'native' && !this.props.ActiveCoin.send && !this.props.ActiveCoin.receive) { - return ( -
-
-
-
- -

{ translate('INDEX.ACTIVATING_WALLET_RT') }

-

{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P1') }

-

{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P2') }

-

{ this.renderLB('INDEX.IGUANA_FULL_MODE_SYNC_P3') }

-
- -
- -

{ translate('INDEX.FETCHING_COIN_DATA') }

-

{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P1') }

-

{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P2') }

-

{ this.renderLB('INDEX.IGUANA_FULL_MODE_SYNC_P3') }

-
-
- -
-
-
-
-
-
- { translate('INDEX.BALANCE')} -
- - { this.renderBalance('main') } { this.props.ActiveCoin.coin } - -
-
-
-
-
- -
-
-
-
-
-
- { translate('INDEX.INTEREST_EARNED') } -
- - { this.renderBalance('interest') } { this.props.ActiveCoin.coin } - -
-
-
-
-
- -
-
-
-
-
-
- { translate('INDEX.TOTAL_BALANCE') } -
- - { this.renderBalance('total') } { this.props.ActiveCoin.coin } - -
-
-
-
-
-
-
- ); - } else { - return null; + return WalletsBalanceRender.call(this); } + + return null; } } diff --git a/react/src/components/dashboard/walletsBalance.render.js b/react/src/components/dashboard/walletsBalance.render.js new file mode 100644 index 0000000..3f59404 --- /dev/null +++ b/react/src/components/dashboard/walletsBalance.render.js @@ -0,0 +1,85 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +const WalletsBalanceRender = function () { + return ( +
+
+
+
+ +

{ translate('INDEX.ACTIVATING_WALLET_RT') }

+

{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P1') }

+

{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P2') }

+

{ this.renderLB('INDEX.IGUANA_FULL_MODE_SYNC_P3') }

+
+ +
+ +

{ translate('INDEX.FETCHING_COIN_DATA') }

+

{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P1') }

+

{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P2') }

+

{ this.renderLB('INDEX.IGUANA_FULL_MODE_SYNC_P3') }

+
+
+ +
+
+
+
+
+
+ { translate('INDEX.BALANCE')} +
+ + { this.renderBalance('main') } { this.props.ActiveCoin.coin } + +
+
+
+
+
+ +
+
+
+
+
+
+ { translate('INDEX.INTEREST_EARNED') } +
+ + { this.renderBalance('interest') } { this.props.ActiveCoin.coin } + +
+
+
+
+
+ +
+
+
+
+
+
+ { translate('INDEX.TOTAL_BALANCE') } +
+ + { this.renderBalance('total') } { this.props.ActiveCoin.coin } + +
+
+
+
+
+
+
+ ); +}; + +export default WalletsBalanceRender; \ No newline at end of file diff --git a/react/src/components/dashboard/walletsBasiliskConnection.js b/react/src/components/dashboard/walletsBasiliskConnection.js index 3e9b2d8..402867d 100755 --- a/react/src/components/dashboard/walletsBasiliskConnection.js +++ b/react/src/components/dashboard/walletsBasiliskConnection.js @@ -1,7 +1,7 @@ import React from 'react'; -import { translate } from '../../translate/translate'; import { basiliskConnection } from '../../actions/actionCreators'; import Store from '../../store'; +import WalletsBasiliskConnectionRender from './walletsBasiliskConnection.render'; class WalletsBasiliskConnection extends React.Component { constructor(props) { @@ -26,75 +26,7 @@ class WalletsBasiliskConnection extends React.Component { render() { if (this.isBasiliskConnection()) { - return ( -
this.handleKeydown(event) }> -
-
-
-
-

- { translate('INDEX.REFRESHING_BASILISK_NET') }... -

- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- { `${translate('IAPI.CON_STATUS')}... ${this.props.Dashboard.connectedNotaries.current}/${this.props.Dashboard.connectedNotaries.total}:${this.props.Dashboard.connectedNotaries.currentNodeName}` } { Math.floor(this.props.Dashboard.connectedNotaries.current * 100 / this.props.Dashboard.connectedNotaries.total) }% -
-
-
-
- 
-                  { this.props.Dashboard.connectedNotaries.failedToConnectNodes ? `Failed: ${this.props.Dashboard.connectedNotaries.failedToConnectNodes}` : null }
-
-
-
-
-
-
-
- ); + return WalletsBasiliskConnectionRender.call(this); } else { return null; } diff --git a/react/src/components/dashboard/walletsBasiliskConnection.render.js b/react/src/components/dashboard/walletsBasiliskConnection.render.js new file mode 100644 index 0000000..c0eca66 --- /dev/null +++ b/react/src/components/dashboard/walletsBasiliskConnection.render.js @@ -0,0 +1,76 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +const WalletsBasiliskConnectionRender = function () { + return ( +
this.handleKeydown(event) }> +
+
+
+
+

+ { translate('INDEX.REFRESHING_BASILISK_NET') }... +

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ { `${translate('IAPI.CON_STATUS')}... ${this.props.Dashboard.connectedNotaries.current}/${this.props.Dashboard.connectedNotaries.total}:${this.props.Dashboard.connectedNotaries.currentNodeName}` } { Math.floor(this.props.Dashboard.connectedNotaries.current * 100 / this.props.Dashboard.connectedNotaries.total) }% +
+
+
+
+ 
+                  { this.props.Dashboard.connectedNotaries.failedToConnectNodes ? `Failed: ${this.props.Dashboard.connectedNotaries.failedToConnectNodes}` : null }
+
+
+
+
+
+
+
+ ); +}; + +export default WalletsBasiliskConnectionRender; \ No newline at end of file