fear(config): Changed server selection view to configuration view

src/components/app-body/configuration/index.js

@@ -0,0 +1,20 @@
+/*
+ This component is a View that allows the user to handle configuration
+ settings for the app.
+*/
+
+// Global npm libraries
+import React from 'react'
+import ServerSelectView from './select-server-view'
+
+function ConfigurationView (props) {
+  const { appData } = props
+
+  return (
+    <>
+      <ServerSelectView appData={appData} />
+    </>
+  )
+}
+
+export default ConfigurationView

src/components/app-body/configuration/select-server-view.js

@@ -0,0 +1,86 @@
+/*
+  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, { useState } from 'react'
+import { Row, Col, Form, Card } from 'react-bootstrap'
+
+function ServerSelectView (props) {
+  const { appData } = props
+  const [selectedServer, setSelectedServer] = useState(appData.serverUrl)
+  const servers = appData.servers
+
+  // Update server when dropdown selection changes
+  const handleServerChange = (event) => {
+    setSelectedServer(event.target.value)
+  }
+
+  const onSaveServer = (serverUrl) => {
+    console.log('server target: ', serverUrl)
+    appData.updateLocalStorage({ serverUrl })
+    window.location.href = '/'
+  }
+
+  return (
+    <>
+      <Card className='m-3'>
+        <Row className='mb-3 mt-3 mx-3'>
+          <Col className='text-end'>
+            <button
+              className='btn btn-primary'
+              style={{ minWidth: '100px' }}
+              onClick={() => onSaveServer(selectedServer)}
+            >
+              Save
+            </button>
+          </Col>
+        </Row>
+
+        <Card.Body>
+          <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 />
+
+          <Row className='justify-content-center'>
+            <Col xs={12} md={6}>
+              <Form.Select
+                value={selectedServer}
+                onChange={handleServerChange}
+                className='mb-3'
+              >
+                {servers.map((server, i) => (
+                  <option key={`server-${i}`} value={server.value}>
+                    {server.value === appData.serverUrl ? `${server.label} (current)` : server.label}
+                  </option>
+                ))}
+              </Form.Select>
+            </Col>
+          </Row>
+
+          <Row className='justify-content-center mt-3'>
+            <Col xs={12} md={6} className='text-center'>
+              <button
+                className='btn btn-primary'
+                style={{ minWidth: '100px' }}
+                onClick={() => onSaveServer(selectedServer)}
+              >
+                Save
+              </button>
+            </Col>
+          </Row>
+        </Card.Body>
+      </Card>
+    </>
+  )
+}
+
+export default ServerSelectView

src/components/app-body/index.js

@@ -14,8 +14,7 @@ import { Route, Routes } from 'react-router-dom'
 import GetBalance from './balance'
 import Placeholder2 from './placeholder2'
 import Placeholder3 from './placeholder3'
-import ServerSelectView from './servers/select-server-view'
-import SelectServerButton from './servers/select-server-button'
+import ServerSelectView from './configuration/select-server-view'
 
 function AppBody (props) {
   // Dependency injection through props
@@ -28,10 +27,10 @@ function AppBody (props) {
         <Route path='/balance' element={<GetBalance wallet={appData.wallet} />} />
         <Route path='/placeholder2' element={<Placeholder2 />} />
         <Route path='/placeholder3' element={<Placeholder3 />} />
-        <Route path='/servers' element={<ServerSelectView appData={appData} />} />
+        <Route path='/configuration' element={<ServerSelectView appData={appData} />} />
       </Routes>
       {/** Show in all paths except the servers view */}
-      {appData.currentPath !== '/servers' && <SelectServerButton linkTo='/servers' appData={appData} />}
+      {/* {appData.currentPath !== '/servers' && <SelectServerButton linkTo='/servers' appData={appData} />} */}
     </>
   )
 }

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

@@ -1,78 +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'
-
-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)
-    appData.updateLocalStorage({ serverUrl: target })
-    // Reload the page
-    window.location.href = '/'
-  }
-
-  return (
-    <>
-      <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 />
-
-        {
-          /** 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 (
-              <div key={`server-${i}`}>
-                <Row
-                  style={{
-                    padding: '25px',
-                    backgroundColor
-                  }}
-                >
-                  <Col xs={4}>
-                    <Button
-                      style={{ minWidth: 120 }}
-                      id={server.value}
-                      onClick={handleReloadServer}
-                    >
-                      {selectedServer === server.value ? 'Current' : 'Select'}
-                    </Button>
-                  </Col>
-
-                  <Col xs={8}>
-                    {server.label}
-                  </Col>
-                </Row>
-              </div>
-            )
-          })
-        }
-      </Container>
-    </>
-  )
-}
-
-export default ServerSelectView

src/components/nav-menu/index.js

@@ -59,6 +59,13 @@ function NavMenu (props) {
             >
               Placeholder 3
             </NavLink>
+            <NavLink
+              className={currentPath === '/configuration' ? 'nav-link-active' : 'nav-link-inactive'}
+              to='/configuration'
+              onClick={handleClickEvent}
+            >
+              Configuration
+            </NavLink>
           </Nav>
         </Navbar.Collapse>
       </Navbar>