From 39c8c54c3a62ba426b7044142b1fe22004ed7796 Mon Sep 17 00:00:00 2001
From: Chris Troutner <chris.troutner@gmail.com>
Date: Fri, 10 Feb 2023 11:42:34 -0800
Subject: [PATCH] more refactoring to reduce props

---
 src/App.js                           | 10 ++----
 src/components/nav-menu/old-index.js | 52 ++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 7 deletions(-)
 create mode 100644 src/components/nav-menu/old-index.js

diff --git a/src/App.js b/src/App.js
index 4a73b2b..ea6a2a6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -141,16 +141,12 @@ function App (props) {
   return (
     <>
       <LoadScripts />
-      <NavMenu menuHandler={onMenuClick} />
+      <NavMenu menuHandler={onMenuClick} appData={appData} />
 
       {
         showStartModal
-          ? (<UninitializedView
-              appData={appData}
-             />)
-          : (<InitializedView
-              appData={appData}
-             />)
+          ? (<UninitializedView appData={appData} />)
+          : (<InitializedView appData={appData} />)
       }
 
       <SelectServerButton menuHandler={onMenuClick} />
diff --git a/src/components/nav-menu/old-index.js b/src/components/nav-menu/old-index.js
new file mode 100644
index 0000000..84647e8
--- /dev/null
+++ b/src/components/nav-menu/old-index.js
@@ -0,0 +1,52 @@
+/*
+  This component controlls the navigation menu.
+
+  Inspired from this example:
+  https://codesandbox.io/s/react-bootstrap-hamburger-menu-example-rnud4?from-embed
+*/
+
+// Global npm libraries
+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) {
+    // Pass the selected menu item up to the parent component.
+    this.parentMenuHandler(menuItem)
+  }
+}
+
+export default NavMenu