Rewriting Game Panel to use hooks

client/src/App.css

@@ -21,6 +21,10 @@
   text-align: center;
 }
 
+.loading {
+  text-align: center;
+}
+
 .click-to-copy {
   position: relative;
   display: inline-flex;

client/src/components/screens/game-panel.component/game-panel.component.jsx

@@ -1,66 +1,34 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { gameInfo, getGuesses, sendGuess } from "../../../services/ggsh.service";
 import Loading from '../../util/loading.component';
 import GuessPane from "./guess-pane.component";
 import PositionedStreetView from "./positioned-street-view.component";
 
-const GamePanel = ({
-  onSelectPoint,
-  onSubmitGuess,
-  streetViewPoint,
-  selectedPoint,
-  roundSeconds,
-  onTimeout,
-  submitDisabled,
-}) => (
-  <div className="game-panel">
-    <div className="game-panel__streetview">
-        <PositionedStreetView position={streetViewPoint} />
-    </div>
-    <div className="game-panel__spacer"/>
-    <GuessPane
-      roundSeconds={roundSeconds}
-      onTimeout={onTimeout}
-      onSelectPoint={onSelectPoint}
-      onSubmitGuess={onSubmitGuess}
-      submitDisabled={submitDisabled || selectedPoint === null}
-    />
-  </div>
-);
+const GamePanelContainer = ({ gameId, playerName, onRoundEnd, onGameEnd }) => {
+  const [{ currentRound, targetPoint, roundSeconds }, setRoundInfo] = useState({currentRound: null, targetPoint: null, roundSeconds: null});
+  const [submitDisabled, setSubmitDisabled] = useState(false);
+  const [selectedPoint, setSelectedPoint] = useState(null);
 
-class GamePanelContainer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      currentRound: null,
-      targetPoint: null,
-      selectedPoint: null,
-      roundTimer: null,
-      submitDisabled: false,
+  useEffect(() => {
+    const setup = async () => {
+      const { currentRound } = await getGuesses(gameId, playerName);
+      if (currentRound) {
+        const { coords, timer } = await gameInfo(gameId);
+        const targetPoint = coords[currentRound];
+        setRoundInfo({ currentRound, targetPoint, roundSeconds: timer });
+      } else {
+        onGameEnd();
+      }
     }
-  }
+    setup();
+  }, [gameId, playerName, onGameEnd]);
 
-  async componentDidMount() {
-    const { gameId, playerName } = this.props;
-    const { currentRound } = await getGuesses(gameId, playerName);
-    if (currentRound) {
-      const { coords, timer } = await gameInfo(gameId);
-      const targetPoint = coords[currentRound];
-      this.setState({
-        currentRound,
-        targetPoint,
-        roundTimer: timer,
-      });
-    } else {
-      const { onGameEnd } = this.props;
-      onGameEnd();
-    }
+  if (!currentRound || !targetPoint || !roundSeconds) {
+    return <Loading/>
   }
 
-  async handleSubmitGuess() {
-    this.setState({ submitDisabled: true })
-    const { currentRound, selectedPoint, targetPoint } = this.state;
-    const { gameId, playerName, onRoundEnd } = this.props;
+  const handleSubmitGuess = async () => {
+    setSubmitDisabled(true);
     const { score, totalScore } = await sendGuess(gameId, playerName, currentRound, selectedPoint || { timeout: true });
     onRoundEnd({
       roundNum: currentRound,
@@ -71,30 +39,21 @@ class GamePanelContainer extends React.Component {
     });
   }
 
-  render() {
-    const {
-      currentRound,
-      targetPoint,
-      selectedPoint,
-      roundTimer,
-      submitDisabled
-    } = this.state;
-    if (!currentRound || !targetPoint || !roundTimer) {
-      return <Loading/>
-    }
-
-    return (
-      <GamePanel
-        onSelectPoint={selectedPoint => this.setState({ selectedPoint })}
-        onSubmitGuess={() => this.handleSubmitGuess()}
-        streetViewPoint={targetPoint}
-        selectedPoint={selectedPoint}
-        roundSeconds={roundTimer}
-        onTimeout={() => this.handleSubmitGuess()}
-        submitDisabled={submitDisabled}
+  return (
+    <div className="game-panel">
+      <div className="game-panel__streetview">
+          <PositionedStreetView position={targetPoint} />
+      </div>
+      <div className="game-panel__spacer"/>
+      <GuessPane
+        roundSeconds={roundSeconds}
+        onTimeout={handleSubmitGuess}
+        onSelectPoint={setSelectedPoint}
+        onSubmitGuess={handleSubmitGuess}
+        submitDisabled={submitDisabled || selectedPoint === null}
       />
-    );
-  }
+    </div>
+  );
 }
 
 export default GamePanelContainer;

client/src/components/util/loading.component.jsx

@@ -1,5 +1,5 @@
 import React from "react";
 
-const Loading = () => <p>Loading...</p>
+const Loading = () => <div className="loading">Loading...</div>
 
 export default Loading;