fix(menu): Can now react to clicks of nav menu

package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "nft-browser-v2",
+  "name": "react-bootstrap-web3-spa",
   "version": "1.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "nft-browser-v2",
+      "name": "react-bootstrap-web3-spa",
       "version": "1.0.0",
       "dependencies": {
         "axios": "0.27.2",

src/App.js

@@ -10,13 +10,13 @@ import { useQueryParam, StringParam } from 'use-query-params'
 // Local libraries
 import './App.css'
 import LoadScripts from './components/load-scripts'
-// import NFTs from './components/nfts'
 import WaitingModal from './components/waiting-modal'
 import AsyncLoad from './services/async-load'
 import ServerSelect from './components/servers'
 import Footer from './components/footer'
 import GetBalance from './components/balance'
 import NavMenu from './components/nav-menu'
+import AppBody from './components/app-body'
 
 // Default restURL for a back-end server.
 let serverURL = 'https://free-bch.fullstack.cash'
@@ -38,7 +38,8 @@ class App extends React.Component {
       walletInitialized: false,
       wallet: false,
       modalBody: this.modalBody,
-      hideSpinner: false
+      hideSpinner: false,
+      menuState: 0
     }
 
     this.cnt = 0
@@ -56,27 +57,6 @@ class App extends React.Component {
 
       const wallet = await this.asyncLoad.initWallet(serverURL)
 
-      // this.addToModal('Getting Group Token Information')
-
-      // Get Group Token info
-      // const groupData = await this.asyncLoad.getGroupData(groupTokenId)
-      // console.log(`groupData: ${JSON.stringify(groupData, null, 2)}`)
-
-      // this.addToModal('Getting NFT Information')
-
-      /// Get NFT child info
-      // const nftData = []
-      // for (let i = 0; i < groupData.nfts.length; i++) {
-      //   const tokenData = await this.asyncLoad.getTokenData(groupData.nfts[i])
-      //   nftData.push(tokenData)
-      // }
-      // console.log(`nft data: ${JSON.stringify(nftData, null, 2)}`)
-
-      // this.tokenData = {
-      //   groupData,
-      //   nftData
-      // }
-
       this.setState({
         wallet,
         walletInitialized: true
@@ -101,7 +81,7 @@ class App extends React.Component {
       <>
         <GetRestUrl />
         <LoadScripts />
-        <NavMenu />
+        <NavMenu menuHandler={this.handleMenuClick}/>
         {this.state.walletInitialized ? <InitializedView wallet={this.state.wallet} tokens={this.tokenData} /> : <UninitializedView modalBody={this.state.modalBody} hideSpinner={this.state.hideSpinner} />}
         <ServerSelect />
         <Footer />
@@ -117,6 +97,17 @@ class App extends React.Component {
       modalBody: this.modalBody
     })
   }
+
+  // This handler is passed into the child menu component. When an item in the
+  // nav menu is clicked, this handler will update the state. The state is
+  // used by the AppBody component to determine which View component to display.
+  handleMenuClick(menuState) {
+    console.log('menuState: ', menuState)
+
+    this.setState({
+      menuState
+    })
+  }
 }
 
 // This is rendered *before* the BCH wallet is initialized.
@@ -135,11 +126,13 @@ function InitializedView (props) {
   return (
     <>
       <br />
+      <AppBody />
       <GetBalance wallet={_this.state.wallet} />
     </>
   )
 }
 
+// Get the restURL query parameter.
 function GetRestUrl (props) {
   const [restURL] = useQueryParam('restURL', StringParam)
   // console.log('restURL: ', restURL)
@@ -149,8 +142,4 @@ function GetRestUrl (props) {
   return (<></>)
 }
 
-// function sleep (ms) {
-//   return new Promise(resolve => setTimeout(resolve, ms))
-// }
-
 export default App

src/components/app-body/index.js

@@ -0,0 +1,29 @@
+/*
+  This Body component is a container for all the different Views of the app.
+  Views are equivalent to 'pages' in a multi-page app. Views are hidden or
+  displayed to simulate the use of pages in an SPA.
+  The Body app contains all the Views and chooses which to show, based on
+  the state of the Menu component.
+*/
+
+// Global npm libraries
+import React from 'react'
+
+class AppBody extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      activeView: 0,
+      menuState: props.menuState
+    }
+  }
+
+  render() {
+    return(
+      <></>
+    )
+  }
+}
+
+export default AppBody

src/components/nav-menu/index.js

@@ -7,17 +7,25 @@
 
 // Global npm libraries
 import React from 'react'
-import { Nav, Navbar, NavDropdown, Image } from "react-bootstrap"
+import { Nav, Navbar, Image } from "react-bootstrap"
 import Logo from './psf-logo.png'
-// import { ReactComponent as Logo } from "./psf-logo.png"
 
 class NavMenu extends React.Component {
   constructor(props) {
     super(props)
-    console.log('NavMenu')
+
+    // This is the event handler passed in from the Parent component.
+    this.parentMenuHandler = props.menuHandler
+
+    // this.state = {
+    //   selectedMenuItem: 0
+    // }
   }
 
   render() {
+    // console.log(`selectedMenuItem: ${this.state.selectedMenuItem}`)
+    // this.handleMenuClick(this.state.selectedMenuItem)
+
     return(
       <>
         <Navbar collapseOnSelect expand="xxxl" bg="dark" variant="dark" style={{paddingRight: '20px'}} >
@@ -29,30 +37,23 @@ class NavMenu extends React.Component {
           <Navbar.Toggle aria-controls="responsive-navbar-nav" />
           <Navbar.Collapse id="responsive-navbar-nav">
             <Nav className="mr-auto">
-              <Nav.Link href="#features">Placeholder 1</Nav.Link>
-              <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
-                <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
-                <NavDropdown.Item href="#action/3.2">
-                  Another action
-                </NavDropdown.Item>
-                <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
-                <NavDropdown.Divider />
-                <NavDropdown.Item href="#action/3.4">
-                  Separated link
-                </NavDropdown.Item>
-              </NavDropdown>
-            </Nav>
-            <Nav>
-              <Nav.Link href="#deets">Placeholder 2</Nav.Link>
-              <Nav.Link eventKey={2} href="#memes">
-                Placeholder 3
-              </Nav.Link>
+              <Nav.Link href="#" onClick={() => this.handleClickEvent(0)}>Check Balance</Nav.Link>
+              <Nav.Link href="#" onClick={() => this.handleClickEvent(1)}>Take Picture</Nav.Link>
+              <Nav.Link href="#">Placeholder 3</Nav.Link>
             </Nav>
           </Navbar.Collapse>
         </Navbar>
       </>
     )
   }
+
+  handleClickEvent(menuItem) {
+    // Update the
+    // this.setState({selectedMenuItem: menuItem})
+
+    // Pass the selected menu item up to the parent component.
+    this.parentMenuHandler(menuItem)
+  }
 }
 
 export default NavMenu