Moving google api key fetch to a higher order component

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { compose, withProps } from "recompose";
 import { withScriptjs, withGoogleMap, StreetViewPanorama, GoogleMap, Marker } from "react-google-maps";
 import { gameInfo, getGuesses, sendGuess } from "../services/ggsh.service";
+import withGoogleApiKey from "./with-google-key.component";
 import RoundTimer from "./round-timer.component";
 import Loading from './loading.component';
 
@@ -105,6 +106,8 @@ const GamePanel = ({
   </div>
 );
 
+const GamePanelWithApiKey = withGoogleApiKey(GamePanel);
+
 class GamePanelContainer extends React.Component {
   constructor(props) {
     super(props);
@@ -160,10 +163,8 @@ class GamePanelContainer extends React.Component {
       return <Loading/>
     }
   
-    const { googleApiKey } = this.props;
     return (
-      <GamePanel
-        googleApiKey={googleApiKey}
+      <GamePanelWithApiKey
         onSelectPoint={selectedPoint => this.setState({ selectedPoint })}
         onSubmitGuess={() => this.handleSubmitGuess()}
         streetViewPoint={targetPoint}

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

@@ -13,7 +13,7 @@ import PreRound from '../pre-round.component';
 import GamePanelContainer from "../game-panel.component";
 import RoundSummary from '../round-summary.component';
 import PlayerScoresContainer from "../player-scores.component";
-import { getGoogleApiKey, createGame, joinGame } from "../../services/ggsh.service";
+import { createGame, joinGame } from "../../services/ggsh.service";
 import Loading from "../loading.component";
 
 // TODO I want to break this down into some smaller container components that can handle making the API calls
@@ -23,7 +23,7 @@ class Game extends React.Component {
     super(props);
     this.state = {
       googleApiKey: null,
-      gameState: LOADING,
+      gameState: PRE_GAME,
       playerName: null,
       gameId: null,
       lastRound: null,
@@ -38,11 +38,6 @@ class Game extends React.Component {
   
   // TODO error handling throughout - at the moment it assumes all calls always succeed
   
-  async componentDidMount() {
-    const googleApiKey = await getGoogleApiKey();
-    this.setState({ googleApiKey, gameState: PRE_GAME });
-  }
-  
   async handleCreateGame() {
     this.setState({ gameState: LOADING });
     const { playerName } = this.state;
@@ -83,18 +78,17 @@ class Game extends React.Component {
   }
   
   renderInRound() {
-    const { gameId, playerName, googleApiKey } = this.state;
+    const { gameId, playerName } = this.state;
     return <GamePanelContainer
       gameId={gameId}
       playerName={playerName}
-      googleApiKey={googleApiKey}
       onRoundEnd={lastRound => this.setState({ gameState: POST_ROUND, lastRound })}
       onGameEnd={() => this.setState({ gameState: POST_GAME })}
     />
   }
   
   renderPostRound() {
-    const { googleApiKey, lastRound } = this.state;
+    const { lastRound } = this.state;
     const {
       roundNum,
       selectedPoint,
@@ -103,7 +97,6 @@ class Game extends React.Component {
       totalScore,
     } = lastRound;
     return <RoundSummary
-      googleApiKey={googleApiKey}
       roundNum={roundNum}
       score={score}
       totalScore={totalScore}

ui/src/components/round-summary.component.jsx

@@ -1,9 +1,9 @@
 import React from "react";
+import withGoogleApiKey from "./with-google-key.component";
 
 // TODO eventually we want this to query and show other players
 // TODO also should show the actual location of the last round
 
-
 const RoundSummary = ({
   googleApiKey,
   roundNum, 
@@ -39,6 +39,8 @@ const RoundSummary = ({
     </div>
   );
 }
+
+const RoundSummaryWithApiKey = withGoogleApiKey(RoundSummary);
   
-export default RoundSummary;
+export default RoundSummaryWithApiKey;
   

ui/src/components/with-google-key.component.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { getGoogleApiKey } from "../services/ggsh.service";
+import Loading from "./loading.component";
+
+const withGoogleApiKey = ComposedComponent =>
+  class extends React.Component {
+    constructor(props) {
+      super(props);
+      this.state = { googleApiKey: null }
+    }
+
+    async componentDidMount() {
+      const googleApiKey = await getGoogleApiKey();
+      this.setState({ googleApiKey });
+    }
+
+    render() {
+      const { googleApiKey } = this.state;
+      if (!googleApiKey) {
+        return <Loading/>
+      }
+
+      return <ComposedComponent {...this.props} googleApiKey={googleApiKey} />
+    }
+  }
+
+export default withGoogleApiKey;

ui/src/services/ggsh.service.js

@@ -12,6 +12,7 @@ export const getStatus = async () => {
     }
 }
 
+// TODO save this after the first call since it will never change
 export const getGoogleApiKey = async () => {
     const res = await fetch(`${API_BASE}/googleApiKey`);
     if (!res.ok) {