linting

src/App.js

@@ -14,7 +14,6 @@ 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'
 
@@ -81,7 +80,7 @@ class App extends React.Component {
       <>
         <GetRestUrl />
         <LoadScripts />
-        <NavMenu menuHandler={this.handleMenuClick}/>
+        <NavMenu menuHandler={this.onMenuClick} />
         {this.state.walletInitialized ? <InitializedView wallet={this.state.wallet} menuState={this.state.menuState} /> : <UninitializedView modalBody={this.state.modalBody} hideSpinner={this.state.hideSpinner} />}
         <ServerSelect />
         <Footer />
@@ -101,7 +100,7 @@ class App extends React.Component {
   // 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) {
+  onMenuClick (menuState) {
     // console.log('menuState: ', menuState)
 
     _this.setState({

src/components/app-body/index.js

@@ -16,7 +16,7 @@ import TakePicture from '../take-picture'
 let _this
 
 class AppBody extends React.Component {
-  constructor(props) {
+  constructor (props) {
     super(props)
 
     this.state = {
@@ -28,28 +28,26 @@ class AppBody extends React.Component {
     _this = this
   }
 
-  render() {
+  render () {
     // console.log(`AppBody menu state: ${this.props.menuState}`)
 
-    return(
+    return (
       <>
         {this.chooseView(this.props.menuState)}
       </>
     )
   }
 
-  chooseView(menuState) {
+  chooseView (menuState) {
     // console.log(`chooseView() menuState: ${menuState}`)
 
-    switch(menuState) {
+    switch (menuState) {
       case 0:
-        return(<GetBalance wallet={_this.state.wallet} />)
-        break
+        return (<GetBalance wallet={_this.state.wallet} />)
       case 1:
         return (<TakePicture />)
-        break
       default:
-       return(<GetBalance wallet={_this.state.wallet} />)
+        return (<GetBalance wallet={_this.state.wallet} />)
     }
   }
 }

src/components/balance.js

@@ -9,7 +9,7 @@ import { Container, Row, Col, Form, Button, Spinner } from 'react-bootstrap'
 let _this
 
 class GetBalance extends React.Component {
-  constructor(props) {
+  constructor (props) {
     super(props)
 
     this.state = {
@@ -31,10 +31,10 @@ class GetBalance extends React.Component {
               <Form>
                 <Form.Group className='mb-3' controlId='formBasicEmail'>
                   <Form.Label>Enter a BCH address to check the balance.</Form.Label>
-                  <Form.Control type='text' placeholder='bitcoincash:qqlrzp23w08434twmvr4fxw672whkjy0py26r63g3d' onChange={e => this.setState({textInput: e.target.value})} />
+                  <Form.Control type='text' placeholder='bitcoincash:qqlrzp23w08434twmvr4fxw672whkjy0py26r63g3d' onChange={e => this.setState({ textInput: e.target.value })} />
                 </Form.Group>
 
-                <Button variant='primary' onClick={this.getBalance}>
+                <Button variant='primary' onClick={this.handleGetBalance}>
                   Check Balance
                 </Button>
               </Form>
@@ -51,13 +51,13 @@ class GetBalance extends React.Component {
     )
   }
 
-  async getBalance(event) {
+  async handleGetBalance (event) {
     try {
       const textInput = _this.state.textInput
 
       // Exit on invalid input
-      if(!textInput) return
-      if(!textInput.includes('bitcoincash:')) return
+      if (!textInput) return
+      if (!textInput.includes('bitcoincash:')) return
 
       _this.setState({
         balance: (<span>Retrieving balance... <Spinner animation='border' /></span>)
@@ -71,7 +71,7 @@ class GetBalance extends React.Component {
       _this.setState({
         balance: `Balance: ${balance} sats, ${bchBalance} BCH`
       })
-    } catch(err) {
+    } catch (err) {
       _this.setState({
         balance: `Error: ${err.message}`
       })

src/components/nav-menu/index.js

@@ -7,11 +7,11 @@
 
 // Global npm libraries
 import React from 'react'
-import { Nav, Navbar, Image } from "react-bootstrap"
+import { Nav, Navbar, Image } from 'react-bootstrap'
 import Logo from './psf-logo.png'
 
 class NavMenu extends React.Component {
-  constructor(props) {
+  constructor (props) {
     super(props)
 
     // This is the event handler passed in from the Parent component.
@@ -22,24 +22,24 @@ class NavMenu extends React.Component {
     // }
   }
 
-  render() {
+  render () {
     // console.log(`selectedMenuItem: ${this.state.selectedMenuItem}`)
     // this.handleMenuClick(this.state.selectedMenuItem)
 
-    return(
+    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" />{' '}
+        <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)}>Take Picture</Nav.Link>
-              <Nav.Link href="#">Placeholder 3</Nav.Link>
+          <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)}>Take Picture</Nav.Link>
+              <Nav.Link href='#'>Placeholder 3</Nav.Link>
             </Nav>
           </Navbar.Collapse>
         </Navbar>
@@ -47,7 +47,7 @@ class NavMenu extends React.Component {
     )
   }
 
-  handleClickEvent(menuItem) {
+  handleClickEvent (menuItem) {
     // Update the
     // this.setState({selectedMenuItem: menuItem})
 

src/components/take-picture/index.js

@@ -7,17 +7,19 @@
 import React from 'react'
 
 class TakePicture extends React.Component {
-  constructor(props) {
+  constructor (props) {
     super(props)
 
+    console.log('Take Picture component loaded')
+
     // this.state = {
     //   activeView: 0,
     //   menuState: props.menuState
     // }
   }
 
-  render() {
-    return(
+  render () {
+    return (
       <>
         <p>Take Picture Component Placeholder</p>
       </>