Add simple routes to page

co-authored-by: mitchemmc <mitchemmc@gmail.com>

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "hookrouter": "^1.2.3",
     "peerjs": "^1.2.0",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",

src/App.js

@@ -1,80 +1,23 @@
 import React, { useState, useRef } from "react";
+import { useRoutes } from "hookrouter";
+import { ThemeProvider } from "theme-ui";
 
-import {
-  ThemeProvider,
-  Box,
-  Heading,
-  Text,
-  Label,
-  Input,
-  Button
-} from "theme-ui";
 import theme from "./theme.js";
+import Home from "./routes/Home";
+import Game from "./routes/Game";
+import Join from "./routes/Join";
 
-import useSession from "./useSession";
+const routes = { 
+  "/": () => <Home />,
+  "/game": () => <Game />,
+  "/join": () => <Join />
+};
 
 function App() {
-  const [connectId, setConnectId] = useState("");
-  const connectToId = () => {
-    const connection = peer.connect(connectId);
-    connection.on("open", () => {
-      connection.on("data", data => {
-        const blob = new Blob([data]);
-        imgRef.current = blob;
-        setImgSrc(URL.createObjectURL(imgRef.current));
-      });
-    });
-  };
-
-  const [imgSrc, setImgSrc] = useState("");
-  const imgRef = useRef(null);
-  const loadImage = e => {
-    imgRef.current = e.target.files[0];
-    setImgSrc(URL.createObjectURL(imgRef.current));
-    for (let connection of Object.values(connections)) {
-      connection.send(imgRef.current);
-    }
-  };
-
-  const [peer, peerId, connections] = useSession(imgRef);
-
+  const route = useRoutes(routes);
   return (
     <ThemeProvider theme={theme}>
-      <Box width={256}>
-        <Heading as="h3">Your ID</Heading>
-        <Text>{peerId}</Text>
-
-        <Box>
-          <img src={imgSrc} />
-          <Label htmlFor="image">Image</Label>
-          <Input
-            type="file"
-            accept="image/*"
-            name="image"
-            id="file"
-            onChange={loadImage}
-          />
-        </Box>
-
-        <Box
-          as="form"
-          width={1 / 2}
-          onSubmit={e => {
-            e.preventDefault();
-            connectToId();
-          }}
-          py={3}
-        >
-          <Label htmlFor="connectId">Connect to</Label>
-          <Input
-            id="connectId"
-            name="connectId"
-            value={connectId}
-            onChange={e => setConnectId(e.target.value)}
-          />
-          <Button>Connect</Button>
-        </Box>
-      </Box>
+      {route}
     </ThemeProvider>
   );
 }

src/routes/Game.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { A } from "hookrouter";
+
+function Game() {
+    return <div><A href="/">GO TO HOME</A>GAME!</div>
+}
+
+export default Game;

src/routes/Home.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { A } from "hookrouter";
+
+function Home() {
+    return <div><A href="/join">JOIN GAME</A>HOME!</div>
+}
+
+export default Home; 

src/routes/Join.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { A } from "hookrouter";
+
+function Join() {
+    return <div><A href="/game">GO TO GAME</A>JOIN!</div>
+}
+
+export default Join;

yarn.lock

@@ -5136,6 +5136,11 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
+hookrouter@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/hookrouter/-/hookrouter-1.2.3.tgz#a65599a1be376b51734caf7c4f7f8aba59bb2c77"
+  integrity sha512-n0mqEBGgXIxYRNMHlwCzoyTOk0OB5Es3jwUyA3+2l5nte/52n0CMMj1bmoCabC8K43YTUEr0zzexTBfo//tq2Q==
+
 hosted-git-info@^2.1.4:
   version "2.8.5"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.5.tgz#759cfcf2c4d156ade59b0b2dfabddc42a6b9c70c"