Set state in url hash

package.json

@@ -11,8 +11,6 @@
     "react": "^16.12.0",
     "react-bootstrap": "^1.0.0-beta.16",
     "react-dom": "^16.12.0",
-    "react-router-bootstrap": "^0.25.0",
-    "react-router-dom": "^5.1.2",
     "react-scripts": "3.3.1"
   },
   "scripts": {

src/app.js

@@ -1,24 +1,24 @@
 import React from 'react';
-import { HashRouter, Route, Switch } from 'react-router-dom';
-import { createBrowserHistory } from 'history';
-import { Navigation } from './nav';
 import { Infection } from './view/infection';
-import { Container } from 'react-bootstrap';
+import { Tab, Tabs } from 'react-bootstrap';
+import { useAppState } from './state';
 
-const history = createBrowserHistory();
 
-export const App = () => (
-    <HashRouter history={history}>
-        <Navigation />
-        <Container fluid>
-            <Switch>
-                <Route exact path="/infection">
-                    <Infection />
-                </Route>
-                <Route exact path="/player-cards">
-                    <div>todo</div>
-                </Route>
-            </Switch>
-        </Container>
-    </HashRouter>
-);
+export const App = () => {
+    const [navigation, setNavigation] = useAppState('navigation');
+    if(!navigation) {
+        setNavigation('/infection');
+        return (<></>);
+    }
+
+    return (
+        <Tabs id='navigation' activeKey={navigation} onSelect={k => setNavigation(k)}>
+            <Tab eventKey="/infection" title="Infection">
+                <Infection />
+            </Tab>
+            <Tab eventKey="/player-cards" title="Player Cards">
+                <div>todo</div>
+            </Tab>
+        </Tabs>
+    );
+};

src/state.js

@@ -0,0 +1,37 @@
+import { useState, useEffect } from 'react';
+
+const readBrowserHash = () => {
+    const hash = window.location.hash;
+    if(!hash) {
+        return {}
+    }
+
+    return JSON.parse(Buffer.from(hash, 'base64').toString());
+};
+const writeBrowserHash = (obj) => window.location.hash = Buffer.from(JSON.stringify(obj)).toString("base64");
+
+export const useAppState = (key, defaultValue) => {
+    const [state, setState] = useState(readBrowserHash());
+    const updateHash = (obj) => {
+        writeBrowserHash(obj);
+        setState(obj);
+    };
+
+    useEffect(() => {
+        const listener = () => setState(readBrowserHash());
+
+        window.addEventListener('hashchange', listener);
+        return () => window.removeEventListener('hashchange', listener);
+    });
+
+    const actualState = !key ? state : state[key];
+    const updateState = !key ? (newState) => updateHash(newState) : (newSubState) => {
+        const newState = {
+            ...state,
+            [key]: newSubState
+        };
+        updateHash(newState)
+    };
+
+    return [actualState || defaultValue, updateState]
+};

src/view/infection/index.js

@@ -1,10 +1,13 @@
-import React, { useState } from 'react';
-import { Button } from 'react-bootstrap';
+import React from 'react';
+import { Button, Container } from 'react-bootstrap';
+import { useAppState } from '../../state';
 
 export const Infection = () => {
-    const [count, setCount] = useState(0);
+    const [count, setCount] = useAppState('count', 0);
 
     return (
-        <div>infections<Button onClick={() => setCount(count + 1)}>Count: {count}</Button></div>
+        <Container fluid>
+            <div>infections<Button onClick={() => setCount(count + 1)}>Count: {count}</Button></div>
+        </Container>
     );
 };