Cleaning up the Lobby component

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

@@ -2,8 +2,8 @@ import React, { useState } 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 PlayerNameInput from "./PlayerNameInput";
 import LobbyPlayerList from "./LobbyPlayerList";
 import DelayedButton from "../../util/DelayedButton";
 import HeaderAndFooter from "../../util/HeaderAndFooter";
@@ -23,6 +23,10 @@ const Label = styled.span`
   padding: 0.2em;
 `
 
+const FormInput = styled(Input)`
+  padding: 0.5em;
+`
+
 const FormButton = styled(Button)`
   padding: 1em;
   margin: 0.2em;
@@ -54,7 +58,7 @@ const LobbyInfo = () => {
   const playerName = usePlayerName();
 
   return (
-    <InfoContainer>
+    <>
       <Label>Playing as {playerName}</Label>
       <Label>Use this link to invite other players:</Label>
       <Label><ClickToCopy text={getUrl(gameId)} /></Label>
@@ -64,7 +68,7 @@ const LobbyInfo = () => {
       >
         Start Game
       </StyledDelayButton>
-    </InfoContainer>
+    </>
   )
 };
 
@@ -75,7 +79,7 @@ const JoinForm = () => {
   const [failed, setFailed] = useState(false);
 
   if (loading) {
-    return <InfoContainer><Loading/></InfoContainer>
+    return <Loading/>
   }
 
   const onJoinGame = async () => {
@@ -94,12 +98,18 @@ const JoinForm = () => {
   const cannotJoinGame = !playerName || playerName.length === 0;
 
   return (
-    <InfoContainer>
+    <>
       {failed && <Label>Failed to join the game! Maybe try a different name?</Label>}
       <Label>Joining {gameId}...</Label>
-      <PlayerNameInput/>
+      <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>
-    </InfoContainer>
+    </>
   );
 }
 
@@ -109,11 +119,13 @@ const Lobby = ({ onStart }) => {
   return (
     <HeaderAndFooter>
       <PageContainer>
-        {
-          joined
-            ? <LobbyInfo onStart={onStart}/>
-            : <JoinForm />
-        }
+        <InfoContainer>
+          {
+            joined
+              ? <LobbyInfo onStart={onStart}/>
+              : <JoinForm />
+          }
+        </InfoContainer>
         <LobbyPlayerList/>
       </PageContainer>
     </HeaderAndFooter>

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

@@ -1,34 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import Input from "../../util/Input";
-import { usePlayerName, dispatch } from "../../../domain/gameStore";
-
-const Container = styled.div`
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  align-items: center;
-`
-
-const Label = styled.span`
-  padding: 0.2em;
-`
-
-const FormInput = styled(Input)`
-  padding: 0.5em;
-`
-
-export default () => {
-  const playerName = usePlayerName();
-  
-  return (
-    <Container>
-      <Label>Player Name</Label>
-      <FormInput
-        type="text" 
-        value={playerName || ""} 
-        onChange={({ target }) => dispatch.setPlayerName(target.value)} 
-      />
-    </Container>
-  )
-};