Moving sub components out to separate modules

ui/src/components/pre-game.component/join-game-input.component.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+export default ({ gameId, onChangeGameId, onJoinGame, cannotJoinGame }) => (
+  <div style={{
+    display: "flex",
+    flexFlow: "column nowrap",
+    justifyContent: "center",
+    alignItems: "center",
+  }}>
+    <span style={{ padding: "0.1em" }}>Game ID:</span>
+    <input style={{ margin: "0.1em" }} type="text" value={gameId} onChange={onChangeGameId} />
+    <button style={{ margin: "0.1em" }} onClick={onJoinGame} disabled={cannotJoinGame}>
+      Join Existing Game
+    </button>
+  </div>
+);

ui/src/components/pre-game.component/player-name-input.component.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+export default ({ playerName, onChangePlayerName }) => (
+  <div style={{
+    display: "flex",
+    flexFlow: "column nowrap",
+    justifyContent: "center",
+    alignItems: "center",
+  }}>
+    <span style={{ padding: "0.2em" }}>Player Name</span>
+    <input style={{ padding: "0.1em" }} type="text" value={playerName} onChange={onChangePlayerName} />
+  </div>
+);

ui/src/components/pre-game.component/pre-game.component.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from "react";
 import Loading from "../loading.component";
+import PlayerNameInput from "./player-name-input.component";
+import JoinGameInput from "./join-game-input.component";
 import { createGame, joinGame } from "../../services/ggsh.service";
 
 // TODO set round timer for new game
@@ -10,39 +12,12 @@ const initialState = playerName => ({
   playerName,
 });
 
-const PlayerName = ({ playerName, onChangePlayerName }) => (
-  <div style={{
-    display: "flex",
-    flexFlow: "column nowrap",
-    justifyContent: "center",
-    alignItems: "center",
-  }}>
-    <span style={{ padding: "0.2em" }}>Player Name</span>
-    <input style={{ padding: "0.1em" }} type="text" value={playerName} onChange={onChangePlayerName} />
-  </div>
-);
-
 const NewGame = ({ onCreateGame, cannotCreateGame }) => (
   <button onClick={onCreateGame} disabled={cannotCreateGame}>
     Create New Game
   </button>
 );
 
-const JoinGame = ({ gameId, onChangeGameId, onJoinGame, cannotJoinGame }) => (
-  <div style={{
-    display: "flex",
-    flexFlow: "column nowrap",
-    justifyContent: "center",
-    alignItems: "center",
-  }}>
-    <span style={{ padding: "0.1em" }}>Game ID:</span>
-    <input style={{ margin: "0.1em" }} type="text" value={gameId} onChange={onChangeGameId} />
-    <button style={{ margin: "0.1em" }} onClick={onJoinGame} disabled={cannotJoinGame}>
-      Join Existing Game
-    </button>
-  </div>
-);
-
 const PreGame = ({ initPlayerName, onGameJoined }) => {
   const [state, setState] = useState(initialState(initPlayerName));
   const { loading, gameId, playerName } = state;
@@ -69,11 +44,11 @@ const PreGame = ({ initPlayerName, onGameJoined }) => {
 
   return (
     <div>
-      <PlayerName {...{ playerName, onChangePlayerName }} />
+      <PlayerNameInput {...{ playerName, onChangePlayerName }} />
       <hr/>
       <NewGame {...{ onCreateGame, cannotCreateGame }} />
       <hr/>
-      <JoinGame {...{ gameId, onChangeGameId, onJoinGame, cannotJoinGame }} />
+      <JoinGameInput {...{ gameId, onChangeGameId, onJoinGame, cannotJoinGame }} />
     </div>
   );
 }