Implementing the first pass at the street view pano component

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

@@ -1,37 +1,12 @@
 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 GuessPane from "./guess-pane.component";
 import Loading from '../loading.component';
+import PositionedStreetView from "../maps/positioned-street-view.component";
 
 // TODO want a button for moving the pano back to start somehow
 
-const getMapUrl = googleApiKey => `https://maps.googleapis.com/maps/api/js?key=${googleApiKey}&v=3.exp&libraries=geometry,drawing,places`
-
-const PositionedStreetView = compose(
-  withProps({
-    loadingElement: <div style={{ height: `100%` }} />,
-    containerElement: <div style={{ height: "100%" }} />,
-    mapElement: <div style={{ height: `100%` }} />,
-  }),
-  withScriptjs,
-  withGoogleMap
-)(({ point }) =>
-  <StreetViewPanorama
-    defaultPosition={point}
-    options={{
-      addressControl: false,
-      showRoadLabels: false,
-      clickToGo: true,
-    }}
-    visible
-  />
-);
-
 const GamePanel = ({
-  googleApiKey,
   onSelectPoint,
   onSubmitGuess,
   streetViewPoint,
@@ -47,12 +22,7 @@ const GamePanel = ({
     alignItems: "center"
   }}>
     <div style={{ height: "100%", margin: "2px", flex: 3 }}>
-      <div style={{ position: "relative", height: "100%" }}>
-        <PositionedStreetView
-          googleMapURL={getMapUrl(googleApiKey)}
-          point={streetViewPoint}
-        />
-      </div>
+        <PositionedStreetView position={streetViewPoint} />
     </div>
     <GuessPane 
       roundSeconds={roundSeconds}
@@ -64,8 +34,6 @@ const GamePanel = ({
   </div>
 );
 
-const GamePanelWithApiKey = withGoogleApiKey(GamePanel);
-
 class GamePanelContainer extends React.Component {
   constructor(props) {
     super(props);
@@ -122,7 +90,7 @@ class GamePanelContainer extends React.Component {
     }
   
     return (
-      <GamePanelWithApiKey
+      <GamePanel
         onSelectPoint={selectedPoint => this.setState({ selectedPoint })}
         onSubmitGuess={() => this.handleSubmitGuess()}
         streetViewPoint={targetPoint}

client/src/components/game-panel.component/guess-pane.component.jsx

@@ -8,28 +8,26 @@ export default ({
   onSelectPoint,
   onSubmitGuess,
   submitDisabled,
-}) => {
-  return (
-    <div 
-      style={{
-        height: "100%",
-        flex: 1,
-        display: "flex",
-        flexDirection: "column",
-        justifyContent:"space-around",
-      }}
-    >
-      <RoundTimer style={{ flex: 1 }} seconds={roundSeconds} onTimeout={onTimeout} />
-      <div style={{ height: "100%", margin: "5px", flex: 6 }}>
-        <ClickMarkerMap onMarkerMoved={onSelectPoint} />
-      </div>
-      <button
-        style={{ margin: "5px", flex: 1 }}
-        onClick={onSubmitGuess}
-        disabled={submitDisabled}
-      >
-        Submit Guess
-      </button>
+}) => (
+  <div 
+    style={{
+      height: "100%",
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+      justifyContent:"space-around",
+    }}
+  >
+    <RoundTimer style={{ flex: 1 }} seconds={roundSeconds} onTimeout={onTimeout} />
+    <div style={{ height: "100%", margin: "5px", flex: 6 }}>
+      <ClickMarkerMap onMarkerMoved={onSelectPoint} />
     </div>
-  );
-};
+    <button
+      style={{ margin: "5px", flex: 1 }}
+      onClick={onSubmitGuess}
+      disabled={submitDisabled}
+    >
+      Submit Guess
+    </button>
+  </div>
+);

client/src/components/maps/click-marker-map.component.jsx

@@ -20,12 +20,8 @@ const MapComponent = React.memo(({
   });
 
   return (
-    <div style={{ 
-        height: "100%",
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-      }} 
+    <div 
+      style={{ height: "100%" }}
       ref={mapDivRef}
     />
   );

client/src/components/maps/positioned-street-view.component.jsx

@@ -0,0 +1,24 @@
+import React, { useRef, useEffect } from "react";
+/* global google */
+
+export default React.memo(({ position }) => {
+  const panoDivRef = useRef(null);
+  useEffect(() => {
+    const pano = new google.maps.StreetViewPanorama(panoDivRef.current, {
+      position,
+      addressControl: false,
+      showRoadLabels: false,
+      clickToGo: true,
+      visible: true,
+    });
+    console.log("Created Street View Pano");
+    
+  });
+
+  return (
+    <div
+      style={{ height: "100%" }}
+      ref={panoDivRef}
+    />
+  );
+});