Add simple routes to page

co-authored-by: mitchemmc <mitchemmc@gmail.com>
This commit is contained in:
nicola 2020-03-16 21:31:08 +11:00
parent 16b120f7e4
commit a5034ef576
6 changed files with 42 additions and 69 deletions

View File

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

View File

@ -1,80 +1,23 @@
import React, { useState, useRef } from "react"; 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 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() { function App() {
const [connectId, setConnectId] = useState(""); const route = useRoutes(routes);
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);
return ( return (
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<Box width={256}> {route}
<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>
</ThemeProvider> </ThemeProvider>
); );
} }

8
src/routes/Game.js Normal file
View File

@ -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;

8
src/routes/Home.js Normal file
View File

@ -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;

8
src/routes/Join.js Normal file
View File

@ -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;

View File

@ -5136,6 +5136,11 @@ hmac-drbg@^1.0.0:
minimalistic-assert "^1.0.0" minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.1" 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: hosted-git-info@^2.1.4:
version "2.8.5" version "2.8.5"
resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.5.tgz#759cfcf2c4d156ade59b0b2dfabddc42a6b9c70c" resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.5.tgz#759cfcf2c4d156ade59b0b2dfabddc42a6b9c70c"