diff --git a/src/App.js b/src/App.js index 6112b05..a8abbbb 100644 --- a/src/App.js +++ b/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 ( <> @@ -92,11 +104,11 @@ class App extends React.Component { { this.state.walletInitialized - ? + ? : } - + > ) @@ -142,7 +154,7 @@ function InitializedView (props) { return ( <> - + > ) } diff --git a/src/components/app-body/index.js b/src/components/app-body/index.js index e42022d..c4705b9 100644 --- a/src/components/app-body/index.js +++ b/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 () case 2: return () + + // Special Views case 100: - return () + return () default: return () } diff --git a/src/components/servers/index.js b/src/components/servers/index.js index c763627..cc860a0 100644 --- a/src/components/servers/index.js +++ b/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({thisServer.label}) - } - - // return ( - // - // - // - // - // - // - // Having trouble loading? Try selecting a different back-end server. - // - // this.selectServer(values)}> - // {this.props.queryParamExists ? (`${this.props.displayUrl}`) : ('Choose a back-end server')} - // {items} - // - // - // - // - // - // ) - return ( @@ -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 diff --git a/src/components/servers/select-server-view.js b/src/components/servers/select-server-view.js index 479f388..1593d50 100644 --- a/src/components/servers/select-server-view.js +++ b/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> + <> + + + + + Select Alternative Server + + + Select an alternative server below. The app will reload and use + the selected server. + + + + + + {serverList} + + > ) } + + // Generate the HTML to display and select a server. + singleServer (server, i) { + const isEven = i % 2 + + const backgroundColor = isEven ? '#eee' : '#fff' + + return ( + + + + Select + + + + {server.label} + + + + ) + } + + // 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 diff --git a/src/services/async-load.js b/src/services/async-load.js index 62f2321..f42130a 100644 --- a/src/services/async-load.js +++ b/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) {
+ Select an alternative server below. The app will reload and use + the selected server. +