diff --git a/package-lock.json b/package-lock.json index 54f79eb..87c20c0 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index d4fded0..39382b4 100644 --- a/package.json +++ b/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": { diff --git a/src/App.js b/src/App.js index f814837..e52473a 100644 --- a/src/App.js +++ b/src/App.js @@ -29,6 +29,7 @@ function App (props) { return prevBody }) }, []) + /** Load all required data before component start. */ useEffect(() => { async function asyncEffect () { diff --git a/src/components/app-body/index.js b/src/components/app-body/index.js index 8305005..b7c4092 100644 --- a/src/components/app-body/index.js +++ b/src/components/app-body/index.js @@ -31,7 +31,7 @@ function AppBody (props) { } /> {/** Show in all paths except the servers view */} - {appData.currentPath !== '/servers' && } + {appData.currentPath !== '/servers' && } ) } diff --git a/src/components/app-body/servers/select-server-button.js b/src/components/app-body/servers/select-server-button.js index 7e6d13d..a6072eb 100644 --- a/src/components/app-body/servers/select-server-button.js +++ b/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) => {
Having trouble loading? Try selecting a different back-end server.
+

Current Server : {appData.serverUrl}

diff --git a/src/components/app-body/servers/select-server-view.js b/src/components/app-body/servers/select-server-view.js index 7a44f64..c5e5026 100644 --- a/src/components/app-body/servers/select-server-view.js +++ b/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 ( diff --git a/src/hooks/state.js b/src/hooks/state.js index 6ce8091..9437d41 100644 --- a/src/hooks/state.js +++ b/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 } }