Able to switch to server selection View from pressing button

src/App.js

@@ -89,8 +89,14 @@ class App extends React.Component {
         <GetRestUrl />
         <LoadScripts />
         <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 displayUrl={this.state.serverUrl} queryParamExists={queryParamExists} />
+        {
+          this.state.walletInitialized
+            ? <InitializedView wallet={this.state.wallet} menuState={this.state.menuState} />
+            : <UninitializedView modalBody={this.state.modalBody} hideSpinner={this.state.hideSpinner} />
+        }
+
+        <ServerSelect displayUrl={this.state.serverUrl} queryParamExists={queryParamExists} menuHandler={this.onMenuClick} />
         <Footer />
       </>
     )

src/components/app-body/index.js

@@ -13,6 +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'
 
 let _this
 
@@ -49,6 +50,8 @@ class AppBody extends React.Component {
         return (<Placeholder2 />)
       case 2:
         return (<Placeholder3 />)
+      case 100:
+        return (<ServerSelectView />)
       default:
         return (<GetBalance wallet={_this.state.wallet} />)
     }

src/components/servers/index.js

@@ -6,7 +6,7 @@
 // Global npm libraries
 import React from 'react'
 // import Select from 'react-dropdown-select'
-import { Container, Row, Col, Form } from 'react-bootstrap'
+import { Container, Row, Col, Button } from 'react-bootstrap'
 
 // Local libraries
 import GistServers from '../../services/gist-servers'
@@ -18,6 +18,8 @@ const defaultOptions = [
   { value: 'https://wa-usa-bch-consumer.fullstackcash.nl', label: 'https://wa-usa-bch-consumer.fullstackcash.nl' }
 ]
 
+let _this
+
 class ServerSelect extends React.Component {
   constructor (props) {
     super(props)
@@ -26,8 +28,11 @@ class ServerSelect extends React.Component {
     // this.wallet = props.wallet
 
     this.state = {
-      options: defaultOptions
+      options: defaultOptions,
+      menuHandler: props.menuHandler
     }
+
+    _this = this
   }
 
   // This is called when the a new drop-down item is selected.
@@ -49,19 +54,35 @@ class ServerSelect extends React.Component {
       items.push(<option key={`server-${i}`} value={thisServer.value}>{thisServer.label}</option>)
     }
 
+    // return (
+    //   <Container>
+    //     <hr />
+    //     <Row>
+    //       <Col>
+    //         <br />
+    //         <h5 style={{ textAlign: 'center' }}>
+    //           Having trouble loading? Try selecting a different back-end server.
+    //         </h5>
+    //         <Form.Select onChange={(values) => this.selectServer(values)}>
+    //           <option>{this.props.queryParamExists ? (`${this.props.displayUrl}`) : ('Choose a back-end server')}</option>
+    //           {items}
+    //         </Form.Select>
+    //         <br />
+    //       </Col>
+    //     </Row>
+    //   </Container>
+    // )
+
     return (
       <Container>
         <hr />
         <Row>
-          <Col>
+          <Col style={{ textAlign: 'center', padding: '25px' }}>
             <br />
-            <h5 style={{ textAlign: 'center' }}>
+            <h5>
               Having trouble loading? Try selecting a different back-end server.
             </h5>
-            <Form.Select onChange={(values) => this.selectServer(values)}>
+            <Button variant='warning' onClick={this.handleServerSelect}>Select a different back end server</Button>
-              <option>{this.props.queryParamExists ? (`${this.props.displayUrl}`) : ('Choose a back-end server')}</option>
-              {items}
-            </Form.Select>
             <br />
           </Col>
         </Row>
@@ -69,6 +90,14 @@ class ServerSelect extends React.Component {
     )
   }
 
+  // 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.menuHandler(100)
+  }
+
   // Retrieve an array of server URLs from the GitHub Gist.
   async getServers () {
     const gistLib = new GistServers()

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

@@ -0,0 +1,17 @@
+/*
+  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'
+
+class ServerSelectView extends React.Component {
+  render () {
+    return (
+      <>Server Select View Placeholder</>
+    )
+  }
+}
+
+export default ServerSelectView