+ >
+ )
}
export default Placeholder3
diff --git a/src/components/app-body/servers/select-server-button.js b/src/components/app-body/servers/select-server-button.js
new file mode 100644
index 0000000..3d544a2
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+ Having trouble loading? Try selecting a different back-end server.
+
+
+
+
+
+
+ )
+}
+
+export default ServerSelect
diff --git a/src/components/app-body/servers/select-server-view.js b/src/components/app-body/servers/select-server-view.js
new file mode 100644
index 0000000..7a44f64
--- /dev/null
+++ b/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 (
+ <>
+
+
+
+
+ Select Alternative Server
+
+
+ Select an alternative server below. The app will reload and use
+ the selected server.
+
+
+
+
+
+ {
+ /** 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 (
+
+
+
+
+
+
+
+ {server.label}
+
+
+
+ )
+ })
+ }
+
+ >
+ )
+}
+
+export default ServerSelectView
diff --git a/src/components/nav-menu/index.js b/src/components/nav-menu/index.js
index 7b91099..23e8c4e 100644
--- a/src/components/nav-menu/index.js
+++ b/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) {
diff --git a/src/components/nav-menu/old-index.js b/src/components/nav-menu/old-index.js
deleted file mode 100644
index 84647e8..0000000
--- a/src/components/nav-menu/old-index.js
+++ /dev/null
@@ -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 (
- <>
-
-
- {' '}
- PSF Web3 Demo
-
-
-
-
-
-
-
- >
- )
- }
-
- handleClickEvent (menuItem) {
- // Pass the selected menu item up to the parent component.
- this.parentMenuHandler(menuItem)
- }
-}
-
-export default NavMenu
diff --git a/src/components/servers/select-server-button.js b/src/components/servers/select-server-button.js
deleted file mode 100644
index e6aef80..0000000
--- a/src/components/servers/select-server-button.js
+++ /dev/null
@@ -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 (
-
-
-
-
-
-
- Having trouble loading? Try selecting a different back-end server.
-
-
-
-
-
-
- )
- }
-
- // 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
diff --git a/src/components/servers/select-server-view.js b/src/components/servers/select-server-view.js
deleted file mode 100644
index 1593d50..0000000
--- a/src/components/servers/select-server-view.js
+++ /dev/null
@@ -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 (
- <>
-
-
-
-
- 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 (
-
-
-
-
-
-
-
- {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