Refactored menu and app-body components to functional

src/App.js

@@ -36,7 +36,7 @@ function App (props) {
   const [serverUrl, setServerUrl] = useState('https://free-bch.fullstack.cash')
   if (restURL) setServerUrl(restURL)
 
-  const [menuState, setMenuState] = useQueryParam(0)
+  const [menuState, setMenuState] = useState(0)
   const [wallet, setWallet] = useState(false)
   const [servers, setServers] = useState(defaultServerOptions)
 
@@ -146,10 +146,10 @@ function App (props) {
       {
         showStartModal
           ? (<UninitializedView appData={appData} />)
-          : (<InitializedView appData={appData} />)
+          : (<InitializedView menuState={menuState} appData={appData} />)
       }
 
-      <SelectServerButton menuHandler={onMenuClick} />
+      <SelectServerButton menuHandler={onMenuClick} appData={appData} />
       <Footer appData={appData} />
     </>
   )
@@ -170,7 +170,7 @@ function addToModal (inStr, appData) {
 // 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.
 function onMenuClick (menuState, appData) {
-  // console.log('menuState: ', menuState)
+  console.log('onMenuClick() menuState: ', menuState)
 
   appData.setMenuState(menuState)
 }
@@ -203,7 +203,7 @@ function InitializedView (props) {
   return (
     <>
       <br />
-      <AppBody menuState={props.appData.menuState} wallet={props.appData.wallet} appData={props.appData} />
+      <AppBody menuState={props.menuState} appData={props.appData} />
     </>
   )
 }

src/components/app-body/index.js

@@ -15,50 +15,36 @@ import Placeholder2 from '../placeholder2'
 import Placeholder3 from '../placeholder3'
 import ServerSelectView from '../servers/select-server-view'
 
-// let _this
+function AppBody (props) {
+  // Dependency injection through props
+  const appData = props.appData
+  const menuState = props.menuState
+  console.log('AppBody() menuState: ', menuState)
 
-class AppBody extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      activeView: 0,
-      menuState: props.menuState,
-      wallet: props.wallet,
-      appData: props.appData
-    }
-
-    // _this = this
-  }
-
-  render () {
-    // console.log(`AppBody menu state: ${this.props.menuState}`)
-
-    return (
-      <>
-        {this.chooseView(this.props.menuState)}
-      </>
-    )
-  }
-
-  chooseView (menuState) {
-    // console.log(`chooseView() menuState: ${menuState}`)
+  function chooseView (menuState) {
+    console.log(`chooseView() menuState: ${menuState}`)
 
     switch (menuState) {
       case 0:
-        return (<GetBalance wallet={this.state.wallet} />)
+        return (<GetBalance wallet={appData.wallet} />)
       case 1:
         return (<Placeholder2 />)
       case 2:
         return (<Placeholder3 />)
 
-      // Special Views
+        // Special Views
       case 100:
-        return (<ServerSelectView appData={this.state.appData} />)
+        return (<ServerSelectView appData={appData} />)
       default:
-        return (<GetBalance wallet={this.state.wallet} />)
+        return (<GetBalance wallet={appData.wallet} />)
     }
   }
+
+  return (
+    <>
+      {chooseView(menuState)}
+    </>
+  )
 }
 
 export default AppBody

src/components/nav-menu/index.js

@@ -10,43 +10,31 @@ import React from 'react'
 import { Nav, Navbar, Image } from 'react-bootstrap'
 import Logo from './psf-logo.png'
 
-class NavMenu extends React.Component {
-  constructor (props) {
-    super(props)
-
-    // This is the event handler passed in from the Parent component.
-    this.parentMenuHandler = props.menuHandler
-  }
-
-  render () {
-    // console.log(`selectedMenuItem: ${this.state.selectedMenuItem}`)
-    // this.handleMenuClick(this.state.selectedMenuItem)
-
-    return (
-      <>
-        <Navbar collapseOnSelect expand='xxxl' bg='dark' variant='dark' style={{ paddingRight: '20px' }}>
-          <Navbar.Brand href='#home' style={{ paddingLeft: '20px' }}>
-            <Image src={Logo} thumbnail width='50' />{' '}
-            PSF Web3 Demo
-          </Navbar.Brand>
-
-          <Navbar.Toggle aria-controls='responsive-navbar-nav' />
-          <Navbar.Collapse id='responsive-navbar-nav'>
-            <Nav className='mr-auto'>
-              <Nav.Link href='#' onClick={() => this.handleClickEvent(0)}>Check Balance</Nav.Link>
-              <Nav.Link href='#' onClick={() => this.handleClickEvent(1)}>Placeholder2</Nav.Link>
-              <Nav.Link href='#' onClick={() => this.handleClickEvent(2)}>Placeholder 3</Nav.Link>
-            </Nav>
-          </Navbar.Collapse>
-        </Navbar>
-      </>
-    )
-  }
-
-  handleClickEvent (menuItem) {
+function NavMenu (props) {
+  const handleClickEvent = (menuItem) => {
     // Pass the selected menu item up to the parent component.
-    this.parentMenuHandler(menuItem)
+    props.menuHandler(menuItem, props.appData)
   }
+
+  return (
+    <>
+      <Navbar collapseOnSelect expand='xxxl' bg='dark' variant='dark' style={{ paddingRight: '20px' }}>
+        <Navbar.Brand href='#home' style={{ paddingLeft: '20px' }}>
+          <Image src={Logo} thumbnail width='50' />{' '}
+          PSF Web3 Demo
+        </Navbar.Brand>
+
+        <Navbar.Toggle aria-controls='responsive-navbar-nav' />
+        <Navbar.Collapse id='responsive-navbar-nav'>
+          <Nav className='mr-auto'>
+            <Nav.Link href='#' onClick={(e) => handleClickEvent(0)}>Check Balance</Nav.Link>
+            <Nav.Link href='#' onClick={(e) => handleClickEvent(1)}>Placeholder2</Nav.Link>
+            <Nav.Link href='#' onClick={(e) => handleClickEvent(2)}>Placeholder 3</Nav.Link>
+          </Nav>
+        </Navbar.Collapse>
+      </Navbar>
+    </>
+  )
 }
 
 export default NavMenu

src/components/servers/select-server-button.js

@@ -10,17 +10,18 @@ import { Container, Row, Col, Button } from 'react-bootstrap'
 // Local libraries
 // import GistServers from '../../services/gist-servers'
 
-let _this
+// let _this
 
 class ServerSelect extends React.Component {
   constructor (props) {
     super(props)
 
     this.state = {
-      menuHandler: props.menuHandler
+      menuHandler: props.menuHandler,
+      appData: props.appData
     }
 
-    _this = this
+    this.handleServerSelect = this.handleServerSelect.bind(this)
   }
 
   render () {
@@ -46,7 +47,7 @@ class ServerSelect extends React.Component {
   handleServerSelect () {
     console.log('This function should navigate to the server selection view.')
 
-    _this.state.menuHandler(100)
+    this.state.menuHandler(100, this.state.appData)
   }
 }