Bug/hyp 177 navbar link fix (#85)

* Fixes NavBar links by saving context to local storage and then using the AppBar link. Should also make the demonstrator less fragile to refreshes

* 0.3.9

* Linting fixes

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@digicatapult/sqnc-hyproof-client",
-    "version": "0.3.8",
+    "version": "0.3.9",
     "description": "User interface for HyProof",
     "homepage": "https://github.com/digicatapult/sqnc-hyproof-client",
     "main": "src/index.js",

src/App.js

@@ -50,6 +50,7 @@ export const personas = [
 
 export default function App() {
   const {
+    reset,
     update,
     current,
     currentId,
@@ -65,6 +66,7 @@ export default function App() {
 
   const resetDemonstrator = (e) => {
     e.preventDefault()
+    reset()
     window.location.replace('/')
   }
 

src/pages/components/Nav.js

@@ -12,7 +12,6 @@ export default function Nav() {
   const path = window.location.pathname
 
   const dialogRef = useRef(null)
-  const inactive = (e) => e.preventDefault()
   const showPopup = (e) => {
     e.preventDefault()
     dialogRef.current?.showModal()
@@ -33,14 +32,14 @@ export default function Nav() {
             accent: '#FFF',
           }}
         >
-          <AppBar.Item onClick={inactive}>
-            <WhiteLink onClick={showPopup}>what we do</WhiteLink>
+          <AppBar.Item onClick={showPopup} active={false}>
+            what we do
           </AppBar.Item>
           <AppBar.Item
-            onClick={inactive}
+            href="/certificate"
             active={path.startsWith('/certificate')}
           >
-            <WhiteLink to="/certificate">certificates</WhiteLink>
+            certificates
           </AppBar.Item>
         </AppBar>
       </Grid.Panel>
@@ -71,11 +70,3 @@ const Home = styled(Grid.Panel)`
   padding-left: 20px;
   padding-right: 20px;
 `
-
-const WhiteLink = styled(Link)`
-  color: white;
-  text-decoration: none;
-  &:hover {
-    color: #dbe9e8;
-  }
-`

src/utils/Context.js

@@ -1,20 +1,31 @@
-import React, { createContext, useState } from 'react'
+import React, { createContext, useEffect, useState } from 'react'
 
 export const Context = createContext({})
 
+const stateKey = 'demo-state'
+const defaultState = {
+  current: 'heidi',
+  currentId: '',
+  currentCommitment: '',
+  currentCommitmentSalt: '',
+  currentEnergyConsumedWh: 0,
+  currentProductionStartTime: '',
+  currentProductionEndTime: '',
+  emma: {},
+  heidi: {},
+  reginald: {},
+}
+let initState = defaultState
+try {
+  initState = JSON.parse(localStorage.getItem(stateKey)) || initState
+} catch (e) {
+  localStorage.removeItem(stateKey)
+}
+
 // this is a provider for initial and state updates
 export const ContextProvider = ({ children }) => {
   const [state, setState] = useState({
-    current: 'heidi',
-    currentId: '',
-    currentCommitment: '',
-    currentCommitmentSalt: '',
-    currentEnergyConsumedWh: 0,
-    currentProductionStartTime: '',
-    currentProductionEndTime: '',
-    emma: {},
-    heidi: {},
-    reginald: {},
+    ...initState,
     update: (val, key) => {
       if (!val) return state
       if (!key) return setState({ ...state, ...val })
@@ -27,7 +38,15 @@ export const ContextProvider = ({ children }) => {
         },
       })
     },
+    reset: () => {
+      localStorage.removeItem(stateKey)
+    },
   })
 
+  useEffect(() => {
+    const { update, ...storedState } = state
+    localStorage.setItem(stateKey, JSON.stringify(storedState))
+  }, [state])
+
   return <Context.Provider value={state}>{children}</Context.Provider>
 }