Moving the PlayerNameInput into util

client/src/components/screens/PreGame/PreGame.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 import Loading from "../../util/Loading";
-import PlayerNameInput from "./PlayerNameInput";
+import PlayerNameInput from "./../../util/PlayerNameInput";
 import NewGameInput from "./NewGameInput"
 import { createGame } from "../../../domain/GGSHService";
 
@@ -38,7 +38,6 @@ export default ({ initPlayerName, onGameJoined }) => {
     return <Loading/>
   }
 
-  const onChangePlayerName = ({ target }) => setPlayerName(target.value);
   const onCreateGame = async () => {
     setLoading(true);
     const gameId = await createGame(playerName, timer);
@@ -48,7 +47,7 @@ export default ({ initPlayerName, onGameJoined }) => {
 
   return (
     <Container>
-      <PlayerNameInput {...{ playerName, onChangePlayerName }} />
+      <PlayerNameInput playerName={playerName} onChangePlayerName={setPlayerName} />
       <Divider/>
       <NewGameInput {...{ onCreateGame, cannotCreateGame, timer, setTimer }} />
     </Container>

client/src/components/screens/PreRound.jsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import ClickToCopy from "../util/ClickToCopy";
 import Button from "../util/Button";
 import Loading from "../util/Loading";
-import PlayerNameInput from "../screens/PreGame/PlayerNameInput";
+import PlayerNameInput from "../util/PlayerNameInput";
 import usePlayerScores from "../../hooks/usePlayerScores";
 import { joinGame } from "../../domain/GGSHService";
 
@@ -99,7 +99,7 @@ const UnjoinedInfo = ({ gameId, onGameJoined }) => {
     <InfoContainer>
       {failed && <Label>Failed to join the game! Maybe try a different name?</Label>}
       <Label>Joining {gameId}...</Label>
-      <PlayerNameInput playerName={playerName} onChangePlayerName={({ target }) => setPlayerName(target.value)}/>
+      <PlayerNameInput playerName={playerName} onChangePlayerName={setPlayerName}/>
       <FormButton onClick={onJoinGame} disabled={cannotJoinGame}>Join Game</FormButton>
     </InfoContainer>
   );

client/src/components/screens/PreGame/PlayerNameInput.jsx → client/src/components/util/PlayerNameInput.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import Input from "../../util/Input";
+import Input from "./Input";
 
 const Container = styled.div`
   display: flex;
@@ -23,7 +23,7 @@ export default ({ playerName, onChangePlayerName }) => (
     <FormInput
       type="text" 
       value={playerName || ""} 
-      onChange={onChangePlayerName} 
+      onChange={({ target }) => onChangePlayerName(target.value)} 
     />
   </Container>
 );