feat(router): Adding browser router functionality

package-lock.json

@@ -15,6 +15,7 @@
         "react": "19.0.0",
         "react-bootstrap": "2.10.7",
         "react-dom": "19.0.0",
+        "react-router-dom": "7.1.3",
         "react-scripts": "5.0.1",
         "use-query-params": "1.2.3"
       },
@@ -3461,6 +3462,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "http://94.130.170.209:4873/@types%2fcookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+      "license": "MIT"
+    },
     "node_modules/@types/eslint": {
       "version": "7.29.0",
       "license": "MIT",
@@ -15109,6 +15116,55 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.1.3",
+      "resolved": "http://94.130.170.209:4873/react-router/-/react-router-7.1.3.tgz",
+      "integrity": "sha512-EezYymLY6Guk/zLQ2vRA8WvdUhWFEj5fcE3RfWihhxXBW7+cd1LsIiA3lmx+KCmneAGQuyBv820o44L2+TtkSA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/cookie": "^0.6.0",
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0",
+        "turbo-stream": "2.4.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.1.3",
+      "resolved": "http://94.130.170.209:4873/react-router-dom/-/react-router-dom-7.1.3.tgz",
+      "integrity": "sha512-qQGTE+77hleBzv9SIUIkGRvuFBQGagW+TQKy53UTZAO/3+YFNBYvRsNIZ1GT17yHbc63FylMOdS+m3oUriF1GA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.1.3"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/react-router/node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "http://94.130.170.209:4873/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "license": "MIT",
@@ -16033,6 +16089,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "http://94.130.170.209:4873/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "license": "ISC"
@@ -17131,6 +17193,12 @@
       "version": "1.14.1",
       "license": "0BSD"
     },
+    "node_modules/turbo-stream": {
+      "version": "2.4.0",
+      "resolved": "http://94.130.170.209:4873/turbo-stream/-/turbo-stream-2.4.0.tgz",
+      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
+      "license": "ISC"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "license": "MIT",

package.json

@@ -9,6 +9,7 @@
     "react": "19.0.0",
     "react-bootstrap": "2.10.7",
     "react-dom": "19.0.0",
+    "react-router-dom": "7.1.3",
     "react-scripts": "5.0.1",
     "use-query-params": "1.2.3"
   },

src/App.js

@@ -92,8 +92,8 @@ function App (props) {
       <LoadScripts />
       <div className='app-container'>
         <NavMenu appData={appData} />
-        {/** Define View to show */}
+          {/** Define View to show */}
-        <div className='main-content'>
+          <div className='main-content'>
           {
             appData.showStartModal
               ? (<UninitializedView appData={appData} />)

src/components/app-body/index.js

@@ -8,6 +8,7 @@
 
 // Global npm libraries
 import React from 'react'
+import { BrowserRouter, Route, Routes } from 'react-router-dom'
 
 // Local libraries
 import GetBalance from './balance'
@@ -16,35 +17,21 @@ import Placeholder3 from './placeholder3'
 import ServerSelectView from './servers/select-server-view'
 
 function AppBody (props) {
-  // Dependency injection through props
+    // Dependency injection through props
-  const appData = props.appData
+    const appData = props.appData
-  const menuState = props.menuState
+    // const menuState = props.menuState
-  // console.log('AppBody() menuState: ', menuState)
 
-  function chooseView (menuState) {
+    return (
-    // console.log(`chooseView() menuState: ${menuState}`)
+      <BrowserRouter>
-
+        <Routes>
-    switch (menuState) {
+            <Route path='/' element={<GetBalance wallet={appData.wallet} />} />
-      case 0:
+            <Route path='/balance' element={<GetBalance wallet={appData.wallet} />} />
-        return (<GetBalance wallet={appData.wallet} />)
+            <Route path='/placeholder2' element={<Placeholder2 />} />
-      case 1:
+            <Route path='/placeholder3' element={<Placeholder3 />} />
-        return (<Placeholder2 />)
+            <Route path='/servers' element={<ServerSelectView appData={appData} />} />
-      case 2:
+        </Routes>
-        return (<Placeholder3 />)
+      </BrowserRouter>
-
+    )
-        // Special Views
-      case 100:
-        return (<ServerSelectView appData={appData} />)
-      default:
-        return (<GetBalance wallet={appData.wallet} />)
-    }
-  }
-
-  return (
-    <>
-      {chooseView(menuState)}
-    </>
-  )
 }
 
 export default AppBody

src/components/nav-menu/index.js

@@ -12,10 +12,10 @@ import Logo from './psf-logo.png'
 
 function NavMenu (props) {
   const selectedMenu = props.appData.menuState
-  const handleClickEvent = (menuItem) => {
+  // const handleClickEvent = (menuItem) => {
-    // Pass the selected menu item up to the parent component.
+  //   // Pass the selected menu item up to the parent component.
-    props.appData.setMenuState(menuItem)
+  //   props.appData.setMenuState(menuItem)
-  }
+  // }
 
   return (
     <>
@@ -30,22 +30,19 @@ function NavMenu (props) {
           <Nav className='mr-auto'>
             <Nav.Link
               className={selectedMenu === 0 ? 'nav-link-active' : 'nav-link-inactive'}
-              href='#'
+              href='/balance'
-              onClick={(e) => handleClickEvent(0)}
             >
               Check Balance
             </Nav.Link>
             <Nav.Link
               className={selectedMenu === 1 ? 'nav-link-active' : 'nav-link-inactive'}
-              href='#'
+              href='/placeholder2'
-              onClick={(e) => handleClickEvent(1)}
             >
               Placeholder2
             </Nav.Link>
             <Nav.Link
               className={selectedMenu === 2 ? 'nav-link-active' : 'nav-link-inactive'}
-              href='#'
+              href='/placeholder3'
-              onClick={(e) => handleClickEvent(2)}
             >
               Placeholder 3
             </Nav.Link>