Implement SharedState component

frontend/src/app.jsx

@@ -1,20 +1,36 @@
-import { useState } from "preact/hooks";
-
 import "./app.css";
 
 import TLP from "./pages/tlp";
 import LHTLP from "./pages/lhtlp";
 import Index from "./pages/index";
-import { LHTLP_PATH, ROOT_PATH, TLP_PATH } from "./constants";
+import Nav from "./components/Nav";
+import { LHTLP_PATH, TLP_PATH } from "./constants";
+import { SharedStateProvider, useSharedState } from "./components/SharedState";
 
 export function App() {
-  const [path, setPath] = useState(ROOT_PATH);
+  return (
+    <SharedStateProvider>
+      <Page />
+    </SharedStateProvider>
+  );
+}
+
+function Page() {
+  const { path } = useSharedState();
+
+  let page = <Index />;
 
   if (path === TLP_PATH) {
-    return <TLP path={path} setPath={setPath} />;
+    page = <TLP />;
   } else if (path === LHTLP_PATH) {
-    return <LHTLP path={path} setPath={setPath} />;
+    page = <LHTLP />;
   }
 
-  return <Index path={path} setPath={setPath} />;
+  return (
+    <>
+      <Nav />
+      <hr />
+      {page}
+    </>
+  );
 }

frontend/src/components/Nav.jsx

@@ -1,6 +1,9 @@
 import { ROOT_PATH } from "../constants";
+import { useSharedState } from "./SharedState";
+
+export default function Nav() {
+  const { path, setPath } = useSharedState();
 
-export default function Nav({ path, setPath }) {
   return (
     <nav>
       <ul>

frontend/src/components/SharedState.jsx

@@ -0,0 +1,34 @@
+// See: https://kentcdodds.com/blog/application-state-management-with-react
+
+import { createContext } from "preact";
+import { useContext, useState } from "preact/hooks";
+
+import { ROOT_PATH } from "../constants";
+
+const SharedStateContext = createContext();
+
+export function useSharedState() {
+  const context = useContext(SharedStateContext);
+
+  if (!context) {
+    throw new Error("useSharedState must be used within a SharedStateProvider");
+  }
+
+  return context;
+}
+
+export function SharedStateProvider(props) {
+  const { children } = props;
+  const [path, setPath] = useState(ROOT_PATH);
+
+  return (
+    <SharedStateContext.Provider
+      value={{
+        path,
+        setPath,
+      }}
+    >
+      {children}
+    </SharedStateContext.Provider>
+  );
+}

frontend/src/pages/index.jsx

@@ -1,11 +1,11 @@
-import Nav from "../components/Nav";
 import { TLP_PATH, LHTLP_PATH } from "../constants";
+import { useSharedState } from "../components/SharedState";
+
+export default function Index() {
+  const { setPath } = useSharedState();
 
-export default function Index({ path, setPath }) {
   return (
     <div>
-      <Nav path={path} setPath={setPath} />
-      <hr />
       <h1>Time-Lock Puzzle Implementations</h1>
       <ul>
         <li>

frontend/src/pages/lhtlp.jsx

@@ -1,9 +1,8 @@
 import { useEffect, useState } from "preact/hooks";
 
-import Nav from "../components/Nav";
 import { useWorker } from "../hooks";
 
-export default function LHTLP({ path, setPath }) {
+export default function LHTLP() {
   const [result, setResult] = useState();
   const [message1, setMessage1] = useState(42);
   const [message2, setMessage2] = useState(24);
@@ -56,8 +55,6 @@ export default function LHTLP({ path, setPath }) {
 
   return (
     <div>
-      <Nav path={path} setPath={setPath} />
-      <hr />
       <h1>Linearly Homomorphic Time-Lock Puzzle</h1>
       <p>
         Implementation of{" "}

frontend/src/pages/tlp.jsx

@@ -1,9 +1,8 @@
 import { useEffect, useState } from "preact/hooks";
 
-import Nav from "../components/Nav";
 import { useWorker } from "../hooks";
 
-export default function TLP({ path, setPath }) {
+export default function TLP() {
   const [result, setResult] = useState();
   const [message, setMessage] = useState(42);
   const [puzzleJSON, setPuzzleJSON] = useState();
@@ -54,8 +53,6 @@ export default function TLP({ path, setPath }) {
 
   return (
     <div>
-      <Nav path={path} setPath={setPath} />
-      <hr />
       <h1>Time-Lock Puzzle</h1>
       <p>
         Implementation of{" "}