Merge pull request #78 from Permissionless-Software-Foundation/dh-menu-components

refactor(menu): Moving menu item defaults to menu-component.js

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 = [
-      <Item icon='fas-coins' key='Tokens' text='Tokens' activeOn='/' />,
-      <Item icon='fa-exchange-alt' key='SendReceive' text='Send/Receive' />,
-      <Item icon='fa-wallet' key='Wallet' text='Wallet' />,
-      /* <Item icon='fa-qrcode' key='qrReader' text='Qr Scanner' />, */
-      <Item icon='fas-cog' key='Configure' text='Configure' />
-    ]
+    _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 {
               >
                 <div className='sidebar-balance'>
                   <div>
-
                     {!_this.state.inFetch && (
                       <div className='siderbar-balance-content'>
                         <span>
@@ -83,8 +75,7 @@ class AdminLTEPage extends React.Component {
                           <span style={{ fontSize: '18px' }}>
                             {_this.state.bchBalance}
                           </span>
-                          <small>USD:  ${_this.state.usdBalance}</small>
-
+                          <small>USD: ${_this.state.usdBalance}</small>
                         </span>
                         <FontAwesomeIcon
                           className='ml-1 icon'
@@ -92,16 +83,16 @@ class AdminLTEPage extends React.Component {
                           icon='redo'
                           onClick={_this.handleGetBalance}
                         />
-                      </div>)}
+                      </div>
+                    )}
                   </div>
                 </div>
               </Box>
-
             </Item>
 
             {_this.sidebar}
 
-            {_this.renderNewMenuItems()}
+            {_this.renderNewMenuItems(_this.props)}
           </Sidebar.Core>
 
           <Navbar.Core>
@@ -109,45 +100,7 @@ class AdminLTEPage extends React.Component {
           </Navbar.Core>
           <Layout path='/'>
             <div className='components-container'>
-              {_this.state.section === 'Send/Receive' && (
-                <SendReceive
-                  setWalletInfo={_this.props.setWalletInfo}
-                  walletInfo={_this.props.walletInfo}
-                  updateBalance={_this.props.updateBalance}
-                  setBchWallet={_this.props.setBchWallet}
-                  bchWallet={_this.props.bchWallet}
-                  currentRate={_this.state.currentRate}
-                />
-              )}
-
-              {_this.state.section === 'Wallet' && (
-                <Wallet
-                  setWalletInfo={_this.props.setWalletInfo}
-                  walletInfo={_this.props.walletInfo}
-                  updateBalance={_this.props.updateBalance}
-                  setBchWallet={_this.props.setBchWallet}
-                  bchWallet={_this.props.bchWallet}
-                />
-              )}
-
-              {_this.state.section === 'Tokens' && (
-                <Tokens
-                  walletInfo={_this.props.walletInfo}
-                  bchWallet={_this.props.bchWallet}
-                  setTokensInfo={_this.props.setTokensInfo}
-                  tokensInfo={_this.props.tokensInfo}
-                />
-              )}
-
-              {_this.state.section === 'Configure' && (
-                <Configure
-                  walletInfo={_this.props.walletInfo}
-                  setWalletInfo={_this.props.setWalletInfo}
-                  setBchWallet={_this.props.setBchWallet}
-                />
-              )}
-
-              {_this.renderNewViewItems()}
+              {_this.renderNewViewItems(_this.props)}
             </div>
           </Layout>
         </AdminLTE>
@@ -158,8 +111,7 @@ class AdminLTEPage extends React.Component {
             handleOnHide={_this.onHandleToggleScannerModal}
             path='/'
           />
-        </Router> */
-        }
+        </Router> */}
       </>
     )
   }
@@ -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() // <Item style={{ display: 'none' }} />
@@ -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
           }

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: <Tokens key='Tokens' {...props} />,
+      menuItem: (
+        <Item icon='fas-coins' key='Tokens' text='Tokens' />
+      )
+    },
+    {
+      key: 'Send/Receive BCH',
+      component: <SendReceive key='Send/Receive BCH' {...props} />,
+      menuItem: (
+        <Item icon='fa-exchange-alt' key='Send/Receive BCH' text='Send/Receive BCH' />
+      )
+    },
+    {
+      key: 'Wallet',
+      component: <Wallet key='Wallet' {...props} />,
+      menuItem: <Item icon='fa-wallet' key='Wallet' text='Wallet' />
+    },
+    {
+      key: 'Configure',
+      component: <Configure key='Configure' {...props} />,
+      menuItem: <Item icon='fas-cog' key='Configure' text='Configure' />
+    }
+  ]
+}
 
 export default MenuComponents