fix(server): Persist server through refresh

package-lock.json

@@ -17,6 +17,7 @@
         "react-dom": "19.0.0",
         "react-router-dom": "7.1.3",
         "react-scripts": "5.0.1",
+        "use-local-storage-state": "^19.5.0",
         "use-query-params": "1.2.3"
       },
       "devDependencies": {
@@ -18400,6 +18401,22 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-local-storage-state": {
+      "version": "19.5.0",
+      "resolved": "https://registry.npmjs.org/use-local-storage-state/-/use-local-storage-state-19.5.0.tgz",
+      "integrity": "sha512-sUJAyFvsmqMpBhdwaRr7GTKkkoxb6PWeNVvpBDrLuwQF1PpbJRKIbOYeLLeqJI7B3wdfFlLLCBbmOdopiSTBOw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/astoilkov"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/use-query-params": {
       "version": "1.2.3",
       "license": "ISC",

package.json

@@ -11,6 +11,7 @@
     "react-dom": "19.0.0",
     "react-router-dom": "7.1.3",
     "react-scripts": "5.0.1",
+    "use-local-storage-state": "19.5.0",
     "use-query-params": "1.2.3"
   },
   "scripts": {

src/App.js

@@ -29,6 +29,7 @@ function App (props) {
       return prevBody
     })
   }, [])
+
   /** Load all required data before component start. */
   useEffect(() => {
     async function asyncEffect () {

src/components/app-body/index.js

@@ -31,7 +31,7 @@ function AppBody (props) {
         <Route path='/servers' element={<ServerSelectView appData={appData} />} />
       </Routes>
       {/** Show in all paths except the servers view */}
-      {appData.currentPath !== '/servers' && <SelectServerButton linkTo='/servers' />}
+      {appData.currentPath !== '/servers' && <SelectServerButton linkTo='/servers' appData={appData} />}
     </>
   )
 }

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

@@ -9,7 +9,7 @@ import { Container, Row, Col, Button } from 'react-bootstrap'
 import { useNavigate } from 'react-router-dom'
 
 const ServerSelect = (props) => {
-  const { linkTo } = props
+  const { linkTo, appData } = props
 
   // Use the navigate function to navigate to the servers view
   const navigate = useNavigate()
@@ -31,6 +31,7 @@ const ServerSelect = (props) => {
             <h5>
               Having trouble loading? Try selecting a different back-end server.
             </h5>
+            <p style={{ fontStyle: 'italic' }}>Current Server : {appData.serverUrl}</p>
             <Button variant='warning' onClick={handleServerSelect}>
               Select a different back end server
             </Button>

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

@@ -16,8 +16,9 @@ function ServerSelectView (props) {
   const handleReloadServer = (event) => {
     const target = event.target.id
     console.log('server target: ', target)
-
-    window.location.href = `/?restURL=${target}`
+    appData.updateLocalStorage({ serverUrl: target })
+    // Reload the page
+    window.location.href = '/'
   }
 
   return (

src/hooks/state.js

@@ -1,14 +1,22 @@
 import { useState } from 'react'
-import { useQueryParam, StringParam } from 'use-query-params'
 import { useLocation } from 'react-router-dom'
+import useLocalStorageState from 'use-local-storage-state'
+
 function useAppState () {
   const location = useLocation()
 
-  // Get the CashStack URL from query parameter or use default
-  let [restURL] = useQueryParam('restURL', StringParam)
-  if (!restURL) restURL = 'https://free-bch.fullstack.cash'
+  // Load Local storage Data
+  const [lsState, setLSState, { removeItem }] = useLocalStorageState('bchWalletState-template', {
+    ssr: true,
+    defaultValue: {
+      serverUrl: 'https://free-bch.fullstack.cash' // Default server
+    }
+  })
 
-  const [serverUrl, setServerUrl] = useState(restURL)
+  console.log('lsState: ', lsState)
+
+  // Initialize  data states
+  const [serverUrl, setServerUrl] = useState(lsState.serverUrl) // Default server url
   const [menuState, setMenuState] = useState(0)
   const [wallet, setWallet] = useState(false)
   const [servers, setServers] = useState([])
@@ -24,6 +32,14 @@ function useAppState () {
   const [hideSpinner, setHideSpinner] = useState(false)
   const [denyClose, setDenyClose] = useState(false)
 
+  // Update local storage
+  const updateLocalStorage = (lsObj) => {
+    // Progressively overwrite the LocalStorage state.
+    const newObj = Object.assign({}, lsState, lsObj)
+
+    setLSState(newObj)
+  }
+
   return {
     serverUrl,
     setServerUrl,
@@ -47,7 +63,9 @@ function useAppState () {
     setHideSpinner,
     denyClose,
     setDenyClose,
-    currentPath: location.pathname
+    currentPath: location.pathname,
+    updateLocalStorage,
+    removeLocalStorageItem: removeItem
 
   }
 }