Converting game component into a hooks-based functional component, and restoring the name persistence feature

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import {
   PRE_GAME,
   PRE_ROUND,
@@ -13,55 +13,53 @@ import GamePanelContainer from "../game-panel.component";
 import RoundSummary from '../round-summary.component';
 import PlayerScoresContainer from "../player-scores.component";
 
-class Game extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      gameState: PRE_GAME,
-      gameId: null,
-      playerName: null,
-      lastRound: null,
-    }
-  }
+const initialState = {
+  gameState: PRE_GAME,
+  gameId: null,
+  playerName: null,
+  lastRound: null,
+}
+
+const Game = () => {
+  const [ state, rawSetState ] = useState(initialState);
+  const setGameState = gameState => rawSetState({ ...state, gameState });
+  const setGameStateAnd = (gameState, updates) => rawSetState({ ...state, gameState, ...updates });
 
-  render() {
-    const { gameState, gameId, playerName, lastRound } = this.state;
-    
-    switch (gameState) {
-      case PRE_GAME:
-        return <PreGameContainer 
-          onGameJoined={({ gameId, playerName }) => this.setState({ gameState: PRE_ROUND, gameId, playerName })}
-        />
-      case PRE_ROUND:
-        return <PreRound
-          gameId={gameId}
-          playerName={playerName}
-          onStart={() => this.setState({ gameState: IN_ROUND })}
-        />
-      case IN_ROUND:
-        return <GamePanelContainer
-          gameId={gameId}
-          playerName={playerName}
-          onRoundEnd={lastRound => this.setState({ gameState: POST_ROUND, lastRound })}
-          onGameEnd={() => this.setState({ gameState: POST_GAME })}
-        />
-      case POST_ROUND:
-        return <RoundSummary
-          round={lastRound}
-          onNext={() => this.setState({ gameState: IN_ROUND })}
-        />
-      case POST_GAME:
-        return <PlayerScoresContainer
-          gameId={gameId}
-          onReturnToStart={() => this.setState({ gameState: PRE_GAME })}
-        />
-      case ERROR:
-        // TODO - would be nice to hook this into the sub-components, maybe with a HOC?
-        return <p>Application encountered unrecoverable error, please refresh the page.</p>
-      default:
-        this.setState({ gameState: ERROR });
-        return <p>Application state is inconsistent, please refresh and rejoin your previous game.</p>
-    }
+  switch (state.gameState) {
+    case PRE_GAME:
+      return <PreGameContainer
+        playerName={state.playerName}
+        onGameJoined={({ gameId, playerName }) => setGameStateAnd(PRE_ROUND, { gameId, playerName })}
+      />
+    case PRE_ROUND:
+      return <PreRound
+        gameId={state.gameId}
+        playerName={state.playerName}
+        onStart={() => setGameState(IN_ROUND)}
+      />
+    case IN_ROUND:
+      return <GamePanelContainer
+        gameId={state.gameId}
+        playerName={state.playerName}
+        onRoundEnd={lastRound => setGameStateAnd(POST_ROUND, { lastRound })}
+        onGameEnd={() => setGameState(POST_GAME)}
+      />
+    case POST_ROUND:
+      return <RoundSummary
+        round={state.lastRound}
+        onNext={() => setGameState(IN_ROUND)}
+      />
+    case POST_GAME:
+      return <PlayerScoresContainer
+        gameId={state.gameId}
+        onReturnToStart={() => setGameState(PRE_GAME)}
+      />
+    case ERROR:
+      // TODO - would be nice to hook this into the sub-components, maybe with a HOC?
+      return <p>Application encountered unrecoverable error, please refresh the page.</p>
+    default:
+      setGameState(ERROR);
+      return <p>Application state is inconsistent, please refresh and rejoin your previous game.</p>
   }
 }
 

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

@@ -39,10 +39,11 @@ const PreGame = ({
 class PreGameContainer extends React.Component {
   constructor(props) {
     super(props);
+    const { playerName } = this.props;
     this.state = {
       loading: false,
       gameId: null,
-      playerName: null,
+      playerName,
     }
   }