fix(servers): Providing alternative UI for selecting servers

src/App.js

@@ -40,7 +40,8 @@ class App extends React.Component {
       hideSpinner: false,
       menuState: 0,
       queryParamExists: false,
-      serverUrl
+      serverUrl,
+      servers: []
     }
 
     this.cnt = 0
@@ -54,6 +55,10 @@ class App extends React.Component {
 
       await this.asyncLoad.loadWalletLib()
 
+      this.addToModal('Getting alternative servers')
+      const servers = await this.asyncLoad.getServers()
+      // console.log('servers: ', servers)
+
       this.addToModal('Initializing wallet')
       // console.log(`Initializing wallet with back end server ${serverUrl}`)
       // console.log(`queryParamExists: ${queryParamExists}`)
@@ -64,7 +69,8 @@ class App extends React.Component {
         wallet,
         walletInitialized: true,
         serverUrl,
-        queryParamExists
+        queryParamExists,
+        servers
       })
     } catch (err) {
       this.modalBody = [
@@ -84,6 +90,12 @@ class App extends React.Component {
     // console.log(`App component menuState: ${this.state.menuState}`)
     // console.log(`render() this.state.serverUrl: ${this.state.serverUrl}`)
 
+    // This is a macro object that is passed to all child components. It gathers
+    // all the data and handlers used throughout the app.
+    const appData = {
+      servers: this.state.servers // Alternative back end servers
+    }
+
     return (
       <>
         <GetRestUrl />
@@ -92,11 +104,11 @@ class App extends React.Component {
 
         {
           this.state.walletInitialized
-            ? <InitializedView wallet={this.state.wallet} menuState={this.state.menuState} />
+            ? <InitializedView wallet={this.state.wallet} menuState={this.state.menuState} appData={appData} />
             : <UninitializedView modalBody={this.state.modalBody} hideSpinner={this.state.hideSpinner} />
         }
 
-        <ServerSelect displayUrl={this.state.serverUrl} queryParamExists={queryParamExists} menuHandler={this.onMenuClick} />
+        <ServerSelect menuHandler={this.onMenuClick} />
         <Footer />
       </>
     )
@@ -142,7 +154,7 @@ function InitializedView (props) {
   return (
     <>
       <br />
-      <AppBody menuState={_this.state.menuState} wallet={props.wallet} />
+      <AppBody menuState={_this.state.menuState} wallet={props.wallet} appData={props.appData} />
     </>
   )
 }

src/components/app-body/index.js

@@ -24,7 +24,8 @@ class AppBody extends React.Component {
     this.state = {
       activeView: 0,
       menuState: props.menuState,
-      wallet: props.wallet
+      wallet: props.wallet,
+      appData: props.appData
     }
 
     _this = this
@@ -50,8 +51,10 @@ class AppBody extends React.Component {
         return (<Placeholder2 />)
       case 2:
         return (<Placeholder3 />)
+
+      // Special Views
       case 100:
-        return (<ServerSelectView />)
+        return (<ServerSelectView appData={this.state.appData} />)
       default:
         return (<GetBalance wallet={_this.state.wallet} />)
     }

src/components/servers/index.js

@@ -5,18 +5,10 @@
 
 // Global npm libraries
 import React from 'react'
-// import Select from 'react-dropdown-select'
 import { Container, Row, Col, Button } from 'react-bootstrap'
 
 // Local libraries
-import GistServers from '../../services/gist-servers'
-
-const defaultOptions = [
-  { value: 'https://free-bch.fullstack.cash', label: 'https://free-bch.fullstack.cash' },
-  { value: 'https://bc01-ca-bch-consumer.fullstackcash.nl', label: 'https://bc01-ca-bch-consumer.fullstackcash.nl' },
-  { value: 'https://pdx01-usa-bch-consumer.fullstackcash.nl', label: 'https://pdx01-usa-bch-consumer.fullstackcash.nl' },
-  { value: 'https://wa-usa-bch-consumer.fullstackcash.nl', label: 'https://wa-usa-bch-consumer.fullstackcash.nl' }
-]
+// import GistServers from '../../services/gist-servers'
 
 let _this
 
@@ -24,55 +16,14 @@ class ServerSelect extends React.Component {
   constructor (props) {
     super(props)
 
-    this.props = props
-    // this.wallet = props.wallet
-
     this.state = {
-      options: defaultOptions,
       menuHandler: props.menuHandler
     }
 
     _this = this
   }
 
-  // This is called when the a new drop-down item is selected.
-  selectServer (event) {
-    console.log('event.target.value: ', event.target.value)
-
-    const value = event.target.value
-
-    if (!value) return
-
-    window.location.href = `/?restURL=${value}`
-  }
-
   render () {
-    const items = []
-    for (let i = 0; i < this.state.options.length; i++) {
-      const thisServer = this.state.options[i]
-
-      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 />
@@ -97,20 +48,6 @@ class ServerSelect extends React.Component {
 
     _this.state.menuHandler(100)
   }
-
-  // Retrieve an array of server URLs from the GitHub Gist.
-  async getServers () {
-    const gistLib = new GistServers()
-    const gistServers = await gistLib.getServerList()
-
-    const serversAry = []
-
-    for (let i = 0; i < gistServers.length; i++) {
-      serversAry.push({ value: gistServers[i].url, label: gistServers[i].url })
-    }
-
-    return serversAry
-  }
 }
 
 export default ServerSelect

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

@@ -5,13 +5,86 @@
 
 // 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 (
-      <>Server Select View Placeholder</>
+      <>
+        <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

src/services/async-load.js

@@ -5,6 +5,9 @@
 // Global npm libraries
 import axios from 'axios'
 
+// Local libraries
+import GistServers from './gist-servers'
+
 class AsyncLoad {
   constructor () {
     this.BchWallet = false
@@ -80,6 +83,35 @@ class AsyncLoad {
 
     return data
   }
+
+  // Get a list of alternative back end servers.
+  async getServers () {
+    // Try to get the list from GitHub
+    try {
+      const gistLib = new GistServers()
+      const gistServers = await gistLib.getServerList()
+
+      const serversAry = []
+
+      for (let i = 0; i < gistServers.length; i++) {
+        serversAry.push({ value: gistServers[i].url, label: gistServers[i].url })
+      }
+
+      return serversAry
+    } catch (err) {
+      console.error('Error trying to retrieve list of servers from GitHub: ', err)
+      console.log('Returning hard-coded list of servers.')
+
+      const defaultOptions = [
+        { value: 'https://free-bch.fullstack.cash', label: 'https://free-bch.fullstack.cash' },
+        { value: 'https://bc01-ca-bch-consumer.fullstackcash.nl', label: 'https://bc01-ca-bch-consumer.fullstackcash.nl' },
+        { value: 'https://pdx01-usa-bch-consumer.fullstackcash.nl', label: 'https://pdx01-usa-bch-consumer.fullstackcash.nl' },
+        { value: 'https://wa-usa-bch-consumer.fullstackcash.nl', label: 'https://wa-usa-bch-consumer.fullstackcash.nl' }
+      ]
+
+      return defaultOptions
+    }
+  }
 }
 
 function sleep (ms) {