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