Merge pull request #49 from Permissionless-Software-Foundation/feature/adminLTE-tabs

add tabs in Configure View

src/components/admin-lte/configure/TabsMenu.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Tabs, Tab } from 'react-bootstrap'
+import MenuComponents from './menu-components'
+
+function TabsMenu (props) {
+  return (
+    <>
+      {MenuComponents.length > 0 && (
+        <Tabs
+          defaultActiveKey='Configure'
+          id='configure-tabs'
+          onSelect={props.onSelect}
+        >
+          <Tab title='General' eventKey='Configure' />
+
+          {MenuComponents.map(menuItem => (
+            <Tab
+              key={menuItem.id}
+              eventKey={menuItem.key}
+              title={menuItem.key}
+            />
+          ))}
+        </Tabs>
+      )}
+    </>
+  )
+}
+
+export default TabsMenu

src/components/admin-lte/configure/index.js

@@ -1,18 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Content, Row, Col, Box, Inputs, Button, ButtonGroup } from 'adminlte-2-react'
+import { Content, Row, Col, Box, Inputs, Button } from 'adminlte-2-react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import MenuComponents from './menu-components'
-// import BchWallet from 'minimal-slp-wallet'
 import Servers from './servers'
 import { setWalletInfo } from '../../localWallet'
+import TabsMenu from './TabsMenu'
 
 const { Text } = Inputs
 
-const BchWallet =
-typeof window !== 'undefined'
-  ? window.SlpWallet
-  : null
+const BchWallet = typeof window !== 'undefined' ? window.SlpWallet : null
 
 let _this
 class Configure extends React.Component {
@@ -28,24 +25,17 @@ class Configure extends React.Component {
     }
 
     _this.BchWallet = BchWallet
+
+    this.handleSelect = key => {
+      _this.setState({ menuItem: key })
+    }
   }
 
   render () {
     return (
       <Content>
-        {MenuComponents.length > 0 &&
-          <ButtonGroup margin>
-            <Button
-              margin
-              text='General'
-              type='primary'
-              className='btn-md mt-1'
-              onClick={() => _this.setState({ menuItem: 'Configure' })}
-            />
-
-            {MenuComponents.map(menuItem => <Button key={menuItem.key} margin className='btn-md mt-1' type='primary' onClick={() => _this.setState({ menuItem: menuItem.key })} text={menuItem.key} />)}
-          </ButtonGroup>}
-        {_this.state.menuItem === 'Configure' &&
+        <TabsMenu onSelect={this.handleSelect} />
+        {_this.state.menuItem === 'Configure' && (
           <>
             <Row>
               <Col sm={12}>
@@ -67,21 +57,22 @@ class Configure extends React.Component {
                             size='xs'
                             icon='exclamation-triangle'
                           />
-                      Be Careful
+                          Be Careful
                         </h3>
                         <p>
-                      Backup your wallet first. Updating the configuration will
-                      restart the app.
+                          Backup your wallet first. Updating the configuration
+                          will restart the app.
                         </p>
                         <p>
-                      This is just a placeholder. This View will allow the user
-                      to pick alternate back-end servers. The default will be{' '}
+                          This is just a placeholder. This View will allow the
+                          user to pick alternate back-end servers. The default
+                          will be{' '}
                           <a
                             href='https://fullstack.cash'
                             target='_blank'
                             rel='noopener noreferrer'
                           >
-                        FullStack.cash
+                            FullStack.cash
                           </a>
                         </p>
                         <Button
@@ -138,8 +129,12 @@ class Configure extends React.Component {
               walletInfo={_this.props.walletInfo}
               setBchWallet={_this.props.setBchWallet}
             />
-          </>}
-        {_this.state.menuItem !== 'Configure' && MenuComponents.filter(menuItem => menuItem.key === _this.state.menuItem)[0].component}
+          </>
+        )}
+        {_this.state.menuItem !== 'Configure' &&
+          MenuComponents.filter(
+            menuItem => menuItem.key === _this.state.menuItem
+          )[0].component}
       </Content>
     )
   }

src/components/admin-lte/configure/menu-components.js

@@ -1,3 +1,13 @@
-const MenuComponents = () => {}
+// const MenuComponents = () => {}
 
-export default MenuComponents
+// export default MenuComponents
+
+import React from 'react'
+
+export default [
+  {
+    key: 'Some key',
+    icon: 'fas-message',
+    component: <><p>test</p></>
+  }
+]