Added game provider and shared state for the app

This commit is contained in:
Mitchell McCaffrey 2020-03-17 08:21:19 +11:00
parent e52f3cbdaf
commit 673320988f
5 changed files with 49 additions and 11 deletions

View File

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

View File

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

View File

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

View File

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

View File

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