diff --git a/src/App.js b/src/App.js
index ac1b803..f5afa39 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,7 +5,6 @@ import { HashRouter as Router, Switch, Route } from "react-router-dom";
import theme from "./theme.js";
import Home from "./routes/Home";
import Game from "./routes/Game";
-import Join from "./routes/Join";
import About from "./routes/About";
import FAQ from "./routes/FAQ";
@@ -20,9 +19,6 @@ function App() {
-
-
-
diff --git a/src/components/Modal.js b/src/components/Modal.js
index 79c23d6..1b9bd00 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -2,7 +2,7 @@ import React from "react";
import Modal from "react-modal";
import { useThemeUI, Close } from "theme-ui";
-function StyledModal({ isOpen, onRequestClose, children }) {
+function StyledModal({ isOpen, onRequestClose, children, ...props }) {
const { theme } = useThemeUI();
return (
@@ -22,6 +22,7 @@ function StyledModal({ isOpen, onRequestClose, children }) {
maxHeight: "100%",
},
}}
+ {...props}
>
{children}
@@ -44,13 +46,13 @@ function Join() {
name="id"
value={gameId || ""}
onChange={handleChange}
+ ref={inputRef}
/>
-
-
+
);
}
-export default Join;
+export default JoinModal;
diff --git a/src/routes/Home.js b/src/routes/Home.js
index 5072e3c..f9ffddd 100644
--- a/src/routes/Home.js
+++ b/src/routes/Home.js
@@ -1,10 +1,12 @@
-import React from "react";
+import React, { useState } from "react";
import { Flex, Button, Image, Text } from "theme-ui";
import shortid from "shortid";
import { useHistory } from "react-router-dom";
import Footer from "../components/Footer";
+import JoinModal from "../modals/JoinModal";
+
import owlington from "../images/Owlington.png";
function Home() {
@@ -13,9 +15,7 @@ function Home() {
history.push(`/game/${shortid.generate()}`);
}
- function handleJoinGame() {
- history.push("/join");
- }
+ const [isJoinModalOpen, setIsJoinModalOpen] = useState(false);
return (
Start Game
-