diff --git a/src/components/admin-lte/index.js b/src/components/admin-lte/index.js
index 33604c5..19c8675 100644
--- a/src/components/admin-lte/index.js
+++ b/src/components/admin-lte/index.js
@@ -1,8 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
-import Configure from './configure'
-import Tokens from './tokens'
-import Wallet from './wallet'
+
import siteConfig from '../site-config'
// import Audit from "./audit"
@@ -16,8 +14,6 @@ import VersionStatus from '../version-status'
// import { BrowserRouter as Router } from 'react-router-dom'
import menuComponents from '../menu-components.js'
-import SendReceive from './send-receive'
-
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
const { Item } = Sidebar
@@ -25,10 +21,7 @@ const { Item } = Sidebar
// Screen width to hide the side menu on click
const MENU_HIDE_WIDTH = 770
-const BchWallet =
- typeof window !== 'undefined'
- ? window.SlpWallet
- : null
+const BchWallet = typeof window !== 'undefined' ? window.SlpWallet : null
let _this
@@ -39,7 +32,7 @@ class AdminLTEPage extends React.Component {
this.state = {
bchBalance: 0,
showScannerModal: false,
- section: 'Tokens',
+ section: '',
menuIsHide: false,
walletInfo: {},
inFetch: false,
@@ -49,13 +42,13 @@ class AdminLTEPage extends React.Component {
_this.BchWallet = BchWallet
- _this.sidebar = [
- ,
- ,
- ,
- /* , */
-
- ]
+ _this.sidebar = []
+
+ // This variables don't get added to
+ // the state to avoid 'setState()' errors inside render()
+ _this.activedItem = ''
+ _this.menuLoaded = false
+ _this.defaultSection = 'Tokens'
}
render () {
@@ -74,7 +67,6 @@ class AdminLTEPage extends React.Component {
>
-
{!_this.state.inFetch && (
@@ -83,8 +75,7 @@ class AdminLTEPage extends React.Component {
{_this.state.bchBalance}
- USD: ${_this.state.usdBalance}
-
+ USD: ${_this.state.usdBalance}
-
)}
+
+ )}
-
{_this.sidebar}
- {_this.renderNewMenuItems()}
+ {_this.renderNewMenuItems(_this.props)}
@@ -109,45 +100,7 @@ class AdminLTEPage extends React.Component {
- {_this.state.section === 'Send/Receive' && (
-
- )}
-
- {_this.state.section === 'Wallet' && (
-
- )}
-
- {_this.state.section === 'Tokens' && (
-
- )}
-
- {_this.state.section === 'Configure' && (
-
- )}
-
- {_this.renderNewViewItems()}
+ {_this.renderNewViewItems(_this.props)}
@@ -158,8 +111,7 @@ class AdminLTEPage extends React.Component {
handleOnHide={_this.onHandleToggleScannerModal}
path='/'
/>
- */
- }
+ */}
>
)
}
@@ -199,8 +151,6 @@ class AdminLTEPage extends React.Component {
_this.customMenuItems()
// _this.addOnClickEventToScanner()
- _this.activeItemById('Tokens')
-
_this.setDefaultServers()
await _this.updateState()
@@ -215,6 +165,17 @@ class AdminLTEPage extends React.Component {
_this.updateState()
}
+ componentWillUpdate () {
+ // Update state with the active item-menu selected in component-menu.js
+ if (_this.menuLoaded && !_this.state.section) {
+ if (_this.activedItem) {
+ _this.changeSection(_this.activedItem)
+ } else {
+ _this.changeSection(_this.defaultSection)
+ }
+ }
+ }
+
// Update component state when props change
updateState () {
if (_this.props.walletInfo.mnemonic !== _this.state.walletInfo.mnemonic) {
@@ -248,7 +209,7 @@ class AdminLTEPage extends React.Component {
childrens[i].id = textValue
const ignore = ignoreItems.find(val => textValue === val)
// Ignore menu items without link to components
- if (!ignore) {
+ if (!ignore && childrens[i]) {
childrens[i].onclick = () => this.changeSection(textValue)
}
}
@@ -272,6 +233,7 @@ class AdminLTEPage extends React.Component {
// to the selected section. each menu item corresponds
// to a section.
changeSection (section) {
+ if (_this.state.section === section) return
_this.activeItemById(section)
_this.setState({
section: section
@@ -283,9 +245,9 @@ class AdminLTEPage extends React.Component {
activeItemById (id) {
try {
const elementActived = document.getElementsByClassName('active')
- elementActived[0].className = ''
+ if (elementActived[0]) { elementActived[0].className = '' }
const element = document.getElementById(id)
- element.className = `${element.className} active`
+ if (element) element.className = `${element.className} active`
} catch (error) {
console.error(error)
}
@@ -329,9 +291,18 @@ class AdminLTEPage extends React.Component {
// Render non-default menu items. The catch ensures that the render function
// won't be interrupted if there is an issue porting new menu items.
- renderNewMenuItems () {
+ renderNewMenuItems (props) {
try {
- return menuComponents && menuComponents.map(m => m.menuItem)
+ const _menuComponents = menuComponents(props)
+ return _menuComponents && _menuComponents.map((m, i) => {
+ if (m.active && !_this.activedItem && !_this.menuLoaded) {
+ _this.activedItem = m.key // Prevents this action from being repeated
+ }
+ if (!_this.menuLoaded && i === _menuComponents.length - 1) {
+ _this.menuLoaded = true
+ }
+ return m.menuItem
+ })
} catch (err) {
// TODO: Figure out how to return an invisible Item.
return _this.getInvisibleMenuItem() //
@@ -339,11 +310,12 @@ class AdminLTEPage extends React.Component {
}
// Displays the View corresponding to the dynamically loaded menu item.
- renderNewViewItems () {
+ renderNewViewItems (props) {
try {
+ const _menuComponents = menuComponents(props)
return (
- menuComponents &&
- menuComponents.map(m => {
+ _menuComponents &&
+ _menuComponents.map(m => {
if (_this.state.section === m.key) {
return m.component
}
diff --git a/src/components/menu-components.js b/src/components/menu-components.js
index 443bc69..50275bd 100644
--- a/src/components/menu-components.js
+++ b/src/components/menu-components.js
@@ -1,3 +1,40 @@
-const MenuComponents = () => {}
+import React from 'react'
+import { Sidebar } from 'adminlte-2-react'
+
+import Wallet from './admin-lte/wallet'
+import Tokens from './admin-lte/tokens'
+import Configure from './admin-lte/configure'
+import SendReceive from './admin-lte/send-receive'
+
+const { Item } = Sidebar
+
+const MenuComponents = props => {
+ return [
+ {
+ key: 'Tokens',
+ component: ,
+ menuItem: (
+
+ )
+ },
+ {
+ key: 'Send/Receive BCH',
+ component: ,
+ menuItem: (
+
+ )
+ },
+ {
+ key: 'Wallet',
+ component: ,
+ menuItem:
+ },
+ {
+ key: 'Configure',
+ component: ,
+ menuItem:
+ }
+ ]
+}
export default MenuComponents