Added game provider and shared state for the app

src/App.js

@@ -1,6 +1,7 @@
-import React, { useState, useRef } from "react";
+import React from "react";
 import { useRoutes } from "hookrouter";
 import { ThemeProvider } from "theme-ui";
+import { GameProvider } from "./contexts/GameContext";
 
 import theme from "./theme.js";
 import Home from "./routes/Home";
@@ -17,7 +18,7 @@ function App() {
   const route = useRoutes(routes);
   return (
     <ThemeProvider theme={theme}>
-      {route}
+      <GameProvider>{route}</GameProvider>
     </ThemeProvider>
   );
 }

src/contexts/GameContext.js

@@ -0,0 +1,11 @@
+import React, { useState } from "react";
+
+const GameContext = React.createContext();
+
+export function GameProvider({ children }) {
+  const [gameId, setGameId] = useState(null);
+  const value = [gameId, setGameId];
+  return <GameContext.Provider value={value}>{children}</GameContext.Provider>;
+}
+
+export default GameContext;

src/routes/Game.js

@@ -1,9 +1,14 @@
-import React from "react";
+import React, { useContext } from "react";
 import { A } from "hookrouter";
 
+import GameContext from "../contexts/GameContext";
+
 function Game() {
+  const [gameId, setGameId] = useContext(GameContext);
+
   return (
     <div>
+      {gameId ? `You've joined ${gameId}` : "You've started a new game"}
       <A href="/">GO TO HOME</A>GAME!
     </div>
   );

src/routes/Home.js

@@ -1,15 +1,28 @@
-import React from "react";
+import React, { useContext } from "react";
 import { navigate } from "hookrouter";
 import { Container, Flex, Button } from "theme-ui";
 
+import GameContext from "../contexts/GameContext";
+
 function Home() {
+  const [gameId, setGameId] = useContext(GameContext);
+
+  function handleStartGame() {
+    setGameId(null);
+    navigate("/game");
+  }
+
+  function handleJoinGame() {
+    navigate("/join");
+  }
+
   return (
     <Container p={4} sx={{ maxWidth: "300px" }}>
       <Flex sx={{ flexDirection: "column" }}>
-        <Button m={2} onClick={() => navigate("/game")}>
+        <Button m={2} onClick={handleStartGame}>
           Start Game
         </Button>
-        <Button m={2} onClick={() => navigate("/join")}>
+        <Button m={2} onClick={handleJoinGame}>
           Join Game
         </Button>
       </Flex>

src/routes/Join.js

@@ -1,12 +1,14 @@
-import React, { useState } from "react";
+import React, { useState, useContext } from "react";
 import { navigate } from "hookrouter";
 import { Container, Box, Label, Input, Button } from "theme-ui";
 
+import GameContext from "../contexts/GameContext";
+
 function Join() {
-  const [id, setId] = useState("");
+  const [gameId, setGameId] = useContext(GameContext);
 
   function handleChange(event) {
-    setId(event.target.value);
+    setGameId(event.target.value);
   }
 
   function handleSubmit(event) {
@@ -18,7 +20,13 @@ function Join() {
     <Container p={4} sx={{ maxWidth: "300px" }}>
       <Box as="form" onSubmit={handleSubmit}>
         <Label htmlFor="id">Shove an ID in me</Label>
-        <Input my={4} id="id" name="id" value={id} onChange={handleChange} />
+        <Input
+          my={4}
+          id="id"
+          name="id"
+          value={gameId}
+          onChange={handleChange}
+        />
         <Button>Go ʕ•ᴥ•ʔ</Button>
       </Box>
     </Container>