Merge pull request #29 from Permissionless-Software-Foundation/dh-refactor2

fix(refactor): Refactored class components to function components

src/App.css

@@ -1,3 +1,28 @@
 .header {
   text-align: center;
 }
+
+.app-container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.main-content {
+  flex: 1 0 auto;
+}
+
+.balance-spinner-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.nav-link-active {
+  color: white !important;
+}
+
+.nav-link-inactive {
+  color: gray !important;
+}

src/App.js

@@ -9,7 +9,7 @@ import React, { useEffect, useCallback } from 'react'
 import './App.css'
 import LoadScripts from './components/load-scripts'
 import AsyncLoad from './services/async-load'
-import SelectServerButton from './components/servers/select-server-button'
+import SelectServerButton from './components/app-body/servers/select-server-button'
 import Footer from './components/footer'
 import NavMenu from './components/nav-menu'
 import useAppState from './hooks/state'
@@ -90,16 +90,19 @@ function App (props) {
   return (
     <>
       <LoadScripts />
-      <NavMenu appData={appData} />
-      {/** Define View to show */}
-      {
-        appData.showStartModal
-          ? (<UninitializedView appData={appData} />)
-          : (<InitializedView menuState={appData.menuState} appData={appData} />)
-      }
-
-      <SelectServerButton appData={appData} />
-      <Footer appData={appData} />
+      <div className='app-container'>
+        <NavMenu appData={appData} />
+        {/** Define View to show */}
+        <div className='main-content'>
+          {
+            appData.showStartModal
+              ? (<UninitializedView appData={appData} />)
+              : (<InitializedView menuState={appData.menuState} appData={appData} />)
+          }
+          <SelectServerButton appData={appData} />
+        </div>
+        <Footer appData={appData} />
+      </div>
     </>
   )
 }

src/components/app-body/balance.js

@@ -20,7 +20,12 @@ function GetBalance (props) {
       if (!textInput) return
       if (!textInput.includes('bitcoincash:')) return
 
-      setBalance(<span>Retrieving balance... <Spinner animation='border' /></span>)
+      setBalance(
+        <div className='balance-spinner-container'>
+          <span>Retrieving balance...</span>
+          <Spinner animation='border' />
+        </div>
+      )
 
       const balance = await wallet.getBalance({ bchAddress: textInput })
       console.log('balance: ', balance)

src/components/app-body/index.js

@@ -13,7 +13,7 @@ import React from 'react'
 import GetBalance from './balance'
 import Placeholder2 from './placeholder2'
 import Placeholder3 from './placeholder3'
-import ServerSelectView from '../servers/select-server-view'
+import ServerSelectView from './servers/select-server-view'
 
 function AppBody (props) {
   // Dependency injection through props

src/components/app-body/placeholder2.js

@@ -3,22 +3,18 @@
 */
 
 // Global npm libraries
-import React from 'react'
-
-class Placeholder2 extends React.Component {
-  constructor (props) {
-    super(props)
+import React, { useEffect } from 'react'
 
+function Placeholder2 (props) {
+  useEffect(() => {
     console.log('Placeholder 2 loaded.')
-  }
+  }, [])
 
-  render () {
-    return (
-      <>
-        <p style={{ padding: '25px' }}>This is placeholder View #2</p>
-      </>
-    )
-  }
+  return (
+    <>
+      <p style={{ padding: '25px' }}>This is placeholder View #2</p>
+    </>
+  )
 }
 
 export default Placeholder2

src/components/app-body/placeholder3.js

@@ -3,22 +3,18 @@
 */
 
 // Global npm libraries
-import React from 'react'
-
-class Placeholder3 extends React.Component {
-  constructor (props) {
-    super(props)
+import React, { useEffect } from 'react'
 
+function Placeholder3 (props) {
+  useEffect(() => {
     console.log('Placeholder 3 loaded.')
-  }
+  }, [])
 
-  render () {
-    return (
-      <>
-        <p style={{ padding: '25px' }}>This is placeholder View #3</p>
-      </>
-    )
-  }
+  return (
+    <>
+      <p style={{ padding: '25px' }}>This is placeholder View #3</p>
+    </>
+  )
 }
 
 export default Placeholder3

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

@@ -0,0 +1,39 @@
+/*
+  This component contains a drop-down form that lets the user select from
+  a range of Global Back End servers.
+*/
+
+// Global npm libraries
+import React from 'react'
+import { Container, Row, Col, Button } from 'react-bootstrap'
+
+const ServerSelect = (props) => {
+  const { appData } = props
+
+  // This is a click handler for the server select button. It brings up the
+  // server selection View.
+  const handleServerSelect = () => {
+    console.log('This function should navigate to the server selection view.')
+    appData.setMenuState(100)
+  }
+
+  return (
+    <Container>
+      <hr />
+      <Row>
+        <Col style={{ textAlign: 'center', padding: '25px' }}>
+          <br />
+          <h5>
+            Having trouble loading? Try selecting a different back-end server.
+          </h5>
+          <Button variant='warning' onClick={handleServerSelect}>
+            Select a different back end server
+          </Button>
+          <br />
+        </Col>
+      </Row>
+    </Container>
+  )
+}
+
+export default ServerSelect

src/components/app-body/servers/select-server-view.js

@@ -0,0 +1,77 @@
+/*
+  This component is a View that allows the user to select a back end server
+  from a list of servers.
+*/
+
+// Global npm libraries
+import React from 'react'
+import { Container, Row, Col, Button } from 'react-bootstrap'
+
+function ServerSelectView (props) {
+  const { appData } = props
+  const selectedServer = appData.serverUrl // Selected server
+  const servers = appData.servers // List of servers
+
+  // Update location ref after server url changes
+  const handleReloadServer = (event) => {
+    const target = event.target.id
+    console.log('server target: ', target)
+
+    window.location.href = `/?restURL=${target}`
+  }
+
+  return (
+    <>
+      <Container>
+        <Row>
+          <Col style={{ textAlign: 'center' }}>
+            <h2>
+              Select Alternative Server
+            </h2>
+            <p>
+              Select an alternative server below. The app will reload and use
+              the selected server.
+            </p>
+          </Col>
+        </Row>
+        <br />
+
+        {
+          /** Map all server data and render a row for each server */
+          servers.map((server, i) => {
+            // Background color for each row
+            const isEven = i % 2
+            const backgroundColor = isEven ? '#eee' : '#fff'
+
+            return (
+              <div key={`server-${i}`}>
+                <Row
+                  style={{
+                    padding: '25px',
+                    backgroundColor
+                  }}
+                >
+                  <Col xs={4}>
+                    <Button
+                      style={{ minWidth: 120 }}
+                      id={server.value}
+                      onClick={handleReloadServer}
+                    >
+                      {selectedServer === server.value ? 'Current' : 'Select'}
+                    </Button>
+                  </Col>
+
+                  <Col xs={8}>
+                    {server.label}
+                  </Col>
+                </Row>
+              </div>
+            )
+          })
+        }
+      </Container>
+    </>
+  )
+}
+
+export default ServerSelectView

src/components/nav-menu/index.js

@@ -11,6 +11,7 @@ import { Nav, Navbar, Image } from 'react-bootstrap'
 import Logo from './psf-logo.png'
 
 function NavMenu (props) {
+  const selectedMenu = props.appData.menuState
   const handleClickEvent = (menuItem) => {
     // Pass the selected menu item up to the parent component.
     props.appData.setMenuState(menuItem)
@@ -27,9 +28,27 @@ function NavMenu (props) {
         <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.Link
+              className={selectedMenu === 0 ? 'nav-link-active' : 'nav-link-inactive'}
+              href='#'
+              onClick={(e) => handleClickEvent(0)}
+            >
+              Check Balance
+            </Nav.Link>
+            <Nav.Link
+              className={selectedMenu === 1 ? 'nav-link-active' : 'nav-link-inactive'}
+              href='#'
+              onClick={(e) => handleClickEvent(1)}
+            >
+              Placeholder2
+            </Nav.Link>
+            <Nav.Link
+              className={selectedMenu === 2 ? 'nav-link-active' : 'nav-link-inactive'}
+              href='#'
+              onClick={(e) => handleClickEvent(2)}
+            >
+              Placeholder 3
+            </Nav.Link>
           </Nav>
         </Navbar.Collapse>
       </Navbar>

src/components/nav-menu/old-index.js

@@ -1,52 +0,0 @@
-/*
-  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

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

@@ -1,54 +0,0 @@
-/*
-  This component contains a drop-down form that lets the user select from
-  a range of Global Back End servers.
-*/
-
-// Global npm libraries
-import React from 'react'
-import { Container, Row, Col, Button } from 'react-bootstrap'
-
-// Local libraries
-// import GistServers from '../../services/gist-servers'
-
-// let _this
-
-class ServerSelect extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      menuHandler: props.menuHandler,
-      appData: props.appData
-    }
-
-    this.handleServerSelect = this.handleServerSelect.bind(this)
-  }
-
-  render () {
-    return (
-      <Container>
-        <hr />
-        <Row>
-          <Col style={{ textAlign: 'center', padding: '25px' }}>
-            <br />
-            <h5>
-              Having trouble loading? Try selecting a different back-end server.
-            </h5>
-            <Button variant='warning' onClick={this.handleServerSelect}>Select a different back end server</Button>
-            <br />
-          </Col>
-        </Row>
-      </Container>
-    )
-  }
-
-  // This is a click handler for the server select button. It brings up the
-  // server selection View.
-  handleServerSelect () {
-    console.log('This function should navigate to the server selection view.')
-
-    this.state.appData.setMenuState(100)
-  }
-}
-
-export default ServerSelect

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

@@ -1,90 +0,0 @@
-/*
-  This component is a View that allows the user to select a back end server
-  from a list of servers.
-*/
-
-// Global npm libraries
-import React from 'react'
-import { Container, Row, Col, Button } from 'react-bootstrap'
-
-class ServerSelectView extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      appData: props.appData
-    }
-  }
-
-  render () {
-    // console.log('this.state.appData: ', this.state.appData)
-    const servers = this.state.appData.servers
-
-    // Loop through each server in the list
-    const serverList = []
-    for (let i = 0; i < servers.length; i++) {
-      const thisServer = servers[i]
-
-      const serverComponent = this.singleServer(thisServer, i)
-
-      serverList.push(serverComponent)
-    }
-
-    return (
-      <>
-        <Container>
-          <Row>
-            <Col style={{ textAlign: 'center' }}>
-              <h2>
-                Select Alternative Server
-              </h2>
-              <p>
-                Select an alternative server below. The app will reload and use
-                the selected server.
-              </p>
-            </Col>
-          </Row>
-          <br />
-
-          {serverList}
-        </Container>
-      </>
-    )
-  }
-
-  // Generate the HTML to display and select a server.
-  singleServer (server, i) {
-    const isEven = i % 2
-
-    const backgroundColor = isEven ? '#eee' : '#fff'
-
-    return (
-      <div key={`server-${i}`}>
-        <Row
-          style={{
-            padding: '25px',
-            backgroundColor
-          }}
-        >
-          <Col xs={4}>
-            <Button id={server.value} onClick={this.handleReloadServer}>Select</Button>
-          </Col>
-
-          <Col xs={8}>
-            {server.label}
-          </Col>
-        </Row>
-      </div>
-    )
-  }
-
-  // Click handler for the button. Reloads the app using the selected back-end server.
-  handleReloadServer (event) {
-    const target = event.target.id
-    console.log('server target: ', target)
-
-    window.location.href = `/?restURL=${target}`
-  }
-}
-
-export default ServerSelectView