Moved join screen to a modal

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() {
           <Route path="/faq">
             <FAQ />
           </Route>
-          <Route path="/join">
-            <Join />
-          </Route>
           <Route path="/game/:id">
             <Game />
           </Route>

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}
       <Close

src/modals/JoinModal.js

@@ -1,10 +1,10 @@
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import { Box, Label, Input, Button, Flex } from "theme-ui";
 import { useHistory } from "react-router-dom";
 
-import Footer from "../components/Footer";
+import Modal from "../components/Modal";
 
-function Join() {
+function JoinModal({ isOpen, onRequestClose }) {
   let history = useHistory();
   const [gameId, setGameId] = useState("");
 
@@ -17,14 +17,16 @@ function Join() {
     history.push(`/game/${gameId}`);
   }
 
+  const inputRef = useRef();
+  function focusInput() {
+    inputRef.current && inputRef.current.focus();
+  }
+
   return (
-    <Flex
+    <Modal
-      sx={{
+      isOpen={isOpen}
-        flexDirection: "column",
+      onRequestClose={onRequestClose}
-        justifyContent: "space-between",
+      onAfterOpen={focusInput}
-        minHeight: "100%",
-        alignItems: "center",
-      }}
     >
       <Flex
         sx={{
@@ -33,7 +35,7 @@ function Join() {
           maxWidth: "300px",
           flexGrow: 1,
         }}
-        mb={2}
+        m={2}
       >
         <Box as="form" onSubmit={handleSubmit}>
           <Label htmlFor="id">Let me see your identification</Label>
@@ -44,13 +46,13 @@ function Join() {
             name="id"
             value={gameId || ""}
             onChange={handleChange}
+            ref={inputRef}
           />
           <Button disabled={!gameId}>Join › (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧</Button>
         </Box>
       </Flex>
-      <Footer />
+    </Modal>
-    </Flex>
   );
 }
 
-export default Join;
+export default JoinModal;

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() {
+  const [isJoinModalOpen, setIsJoinModalOpen] = useState(false);
-    history.push("/join");
-  }
 
   return (
     <Flex
@@ -42,12 +42,16 @@ function Home() {
         <Button m={2} onClick={handleStartGame}>
           Start Game
         </Button>
-        <Button m={2} onClick={handleJoinGame}>
+        <Button m={2} onClick={() => setIsJoinModalOpen(true)}>
           Join Game
         </Button>
         <Text variant="caption" as="p" sx={{ textAlign: "center" }}>
           Alpha v0.8.0
         </Text>
+        <JoinModal
+          isOpen={isJoinModalOpen}
+          onRequestClose={() => setIsJoinModalOpen(false)}
+        />
       </Flex>
       <Footer />
     </Flex>