Pulling out the JoinForm component from Lobby

client/src/components/screens/Lobby/JoinForm.jsx

@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import Button from "../../util/Button";
+import Input from "../../util/Input";
+import Loading from "../../util/Loading";
+import { dispatch, useGameId, usePlayerName } from "../../../domain/gameStore";
+
+const Label = styled.span`
+  padding: 0.2em;
+`
+
+const FormInput = styled(Input)`
+  padding: 0.5em;
+`
+
+const FormButton = styled(Button)`
+  padding: 1em;
+  margin: 0.2em;
+  margin-top: 0.3em;
+`
+
+const JoinForm = () => {
+  const gameId = useGameId();
+  const playerName = usePlayerName();
+  const [loading, setLoading] = useState(false);
+  const [failed, setFailed] = useState(false);
+
+  if (loading) {
+    return <Loading/>
+  }
+
+  const onJoinGame = async () => {
+    // TODO would like to support re-joining a game you left
+    setLoading(true);
+    try {
+      await dispatch.joinGame();
+    } catch (err) {
+      // failed to join the game
+      setFailed(true);
+      setLoading(false);
+      return;
+    }
+    setFailed(false);
+  };
+  const cannotJoinGame = !playerName || playerName.length === 0;
+
+  return (
+    <>
+      {failed && <Label>Failed to join the game! Maybe try a different name?</Label>}
+      <Label>Joining {gameId}...</Label>
+      <Label>Player Name</Label>
+      <FormInput
+        type="text" 
+        value={playerName || ""} 
+        onChange={({ target }) => dispatch.setPlayerName(target.value)} 
+        onKeyDown={({ key }) => { if (key === "Enter") { onJoinGame() }}}
+      />
+      <FormButton onClick={onJoinGame} disabled={cannotJoinGame}>Join Game</FormButton>
+    </>
+  );
+};
+
+export default JoinForm;

client/src/components/screens/Lobby/Lobby.jsx

@@ -1,13 +1,11 @@
-import React, { useState } from "react";
+import React from "react";
 import styled from "styled-components";
 import ClickToCopy from "../../util/ClickToCopy";
-import Button from "../../util/Button";
-import Input from "../../util/Input";
-import Loading from "../../util/Loading";
 import LobbyPlayerList from "./LobbyPlayerList";
 import DelayedButton from "../../util/DelayedButton";
 import HeaderAndFooter from "../../util/HeaderAndFooter";
 import { dispatch, useGameId, usePlayerName, useGameJoined } from "../../../domain/gameStore";
+import JoinForm from "./JoinForm";
 
 const InfoContainer = styled.div`
   flex: 3;
@@ -23,16 +21,6 @@ const Label = styled.span`
   padding: 0.2em;
 `
 
-const FormInput = styled(Input)`
-  padding: 0.5em;
-`
-
-const FormButton = styled(Button)`
-  padding: 1em;
-  margin: 0.2em;
-  margin-top: 0.3em;
-`
-
 const StyledDelayButton = styled(DelayedButton)`
   padding: 1em;
   margin: 0.2em;
@@ -72,47 +60,6 @@ const LobbyInfo = () => {
   )
 };
 
-const JoinForm = () => {
-  const gameId = useGameId();
-  const playerName = usePlayerName();
-  const [loading, setLoading] = useState(false);
-  const [failed, setFailed] = useState(false);
-
-  if (loading) {
-    return <Loading/>
-  }
-
-  const onJoinGame = async () => {
-    // TODO would like to support re-joining a game you left
-    setLoading(true);
-    try {
-      await dispatch.joinGame();
-    } catch (err) {
-      // failed to join the game
-      setFailed(true);
-      setLoading(false);
-      return;
-    }
-    setFailed(false);
-  };
-  const cannotJoinGame = !playerName || playerName.length === 0;
-
-  return (
-    <>
-      {failed && <Label>Failed to join the game! Maybe try a different name?</Label>}
-      <Label>Joining {gameId}...</Label>
-      <Label>Player Name</Label>
-      <FormInput
-        type="text" 
-        value={playerName || ""} 
-        onChange={({ target }) => dispatch.setPlayerName(target.value)} 
-        onKeyDown={({ key }) => { if (key === "Enter") { onJoinGame() }}}
-      />
-      <FormButton onClick={onJoinGame} disabled={cannotJoinGame}>Join Game</FormButton>
-    </>
-  );
-}
-
 const Lobby = ({ onStart }) => {
   const joined = useGameJoined();