diff --git a/src/components/admin-lte/index.js b/src/components/admin-lte/index.js index e3c062f..19c8675 100644 --- a/src/components/admin-lte/index.js +++ b/src/components/admin-lte/index.js @@ -32,7 +32,7 @@ class AdminLTEPage extends React.Component { this.state = { bchBalance: 0, showScannerModal: false, - section: 'Tokens', + section: '', menuIsHide: false, walletInfo: {}, inFetch: false, @@ -43,6 +43,12 @@ class AdminLTEPage extends React.Component { _this.BchWallet = BchWallet _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 () { @@ -145,8 +151,6 @@ class AdminLTEPage extends React.Component { _this.customMenuItems() // _this.addOnClickEventToScanner() - _this.activeItemById('Tokens') - _this.setDefaultServers() await _this.updateState() @@ -161,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) { @@ -194,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) } } @@ -218,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 @@ -229,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) } @@ -278,7 +294,15 @@ class AdminLTEPage extends React.Component { renderNewMenuItems (props) { try { const _menuComponents = menuComponents(props) - return _menuComponents && _menuComponents.map(m => m.menuItem) + 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() // @@ -298,7 +322,7 @@ class AdminLTEPage extends React.Component { return '' }) ) - } catch (err) {} + } catch (err) { } } getInvisibleMenuItem () { diff --git a/src/components/menu-components.js b/src/components/menu-components.js index ac790e1..50275bd 100644 --- a/src/components/menu-components.js +++ b/src/components/menu-components.js @@ -12,27 +12,27 @@ const MenuComponents = props => { return [ { key: 'Tokens', - component: , + component: , menuItem: ( - + ) }, { key: 'Send/Receive BCH', - component: , + component: , menuItem: ( - + ) }, { key: 'Wallet', - component: , - menuItem: + component: , + menuItem: }, { key: 'Configure', - component: , - menuItem: + component: , + menuItem: } ] }