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 { useRoutes } from "hookrouter";
import { ThemeProvider } from "theme-ui"; import { ThemeProvider } from "theme-ui";
import { GameProvider } from "./contexts/GameContext";
import theme from "./theme.js"; import theme from "./theme.js";
import Home from "./routes/Home"; import Home from "./routes/Home";
@ -17,7 +18,7 @@ function App() {
const route = useRoutes(routes); const route = useRoutes(routes);
return ( return (
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
{route} <GameProvider>{route}</GameProvider>
</ThemeProvider> </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 { A } from "hookrouter";
import GameContext from "../contexts/GameContext";
function Game() { function Game() {
const [gameId, setGameId] = useContext(GameContext);
return ( return (
<div> <div>
{gameId ? `You've joined ${gameId}` : "You've started a new game"}
<A href="/">GO TO HOME</A>GAME! <A href="/">GO TO HOME</A>GAME!
</div> </div>
); );

View File

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

View File

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