Replacing the guess pane with the new logic, organized into the ClickMarkerMap

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

@@ -3,7 +3,7 @@ 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 GuessPane from "./guess-pane.component";
 import Loading from '../loading.component';
 
 // TODO want a button for moving the pano back to start somehow
@@ -30,32 +30,6 @@ const PositionedStreetView = compose(
   />
 );
 
-const SelectionMap = compose(
-  withProps({
-    loadingElement: <div style={{ height: `100%` }} />,
-    containerElement: <div style={{ height: `100%` }} />,
-    mapElement: <div style={{ height: `100%` }} />,
-  }),
-  withScriptjs,
-  withGoogleMap
-)(({onClick, markerPosition}) =>
-  <GoogleMap
-    defaultZoom={1}
-    defaultCenter={{ lat: 25, lng: -25}}
-    clickableIcons={false}
-    options={{
-      disableDefaultUI: true,
-      fullscreenControl: true,
-    }}
-    onClick={onClick}>
-      {markerPosition ? <Marker
-        clickable={false}
-        draggable={false}
-        position={markerPosition}
-      /> : null}
-  </GoogleMap>
-);
-
 const GamePanel = ({
   googleApiKey,
   onSelectPoint,
@@ -80,29 +54,13 @@ const GamePanel = ({
         />
       </div>
     </div>
-    <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 }}>
-        <SelectionMap
-          googleMapURL={getMapUrl(googleApiKey)}
-          onClick={({ latLng }) => onSelectPoint({ lat: latLng.lat(), lng: latLng.lng() })}
-          markerPosition={selectedPoint}
-        />
-      </div>
-      <button
-        style={{ margin: "5px", flex: 1 }}
-        onClick={onSubmitGuess}
-        disabled={submitDisabled || selectedPoint === null}
-      >
-        Submit Guess
-      </button>
-    </div>
+    <GuessPane 
+      roundSeconds={roundSeconds}
+      onTimeout={onTimeout}
+      onSelectPoint={onSelectPoint}
+      onSubmitGuess={onSubmitGuess}
+      submitDisabled={submitDisabled || selectedPoint === null}
+    />
   </div>
 );
 

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

@@ -0,0 +1,35 @@
+import React from "react";
+import ClickMarkerMap from "../maps/click-marker-map.component";
+import RoundTimer from "../round-timer.component";
+
+export default ({
+  roundSeconds,
+  onTimeout,
+  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>
+  );
+};

client/src/components/map-screen.component.jsx

@@ -1,26 +0,0 @@
-import React, { useRef, useEffect } from "react";
-/* global google */
-
-const MapComponent = () => {
-  const mapDivRef = useRef(null);
-  useEffect(() => {
-    const googleMap = new google.maps.Map(mapDivRef.current, {
-      center: { lat: 25, lng: -25 },
-      zoom: 0,
-    });
-    console.log("Created Map");
-  });
-
-  return (
-    <div style={{ 
-        height: "100%",
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-      }} 
-      ref={mapDivRef}
-    />
-  );
-}
-
-export default MapComponent;

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

@@ -1,9 +1,38 @@
-import React from "react";
-import MapComponent from "./map.component";
+import React, { useRef, useEffect } from "react";
 /* global google */
 
+const MapComponent = React.memo(({
+  onMapClick
+}) => {
+  const mapDivRef = useRef(null);
+  useEffect(() => {
+    const googleMap = new google.maps.Map(mapDivRef.current, {
+      center: { lat: 25, lng: -25 },
+      zoom: 0,
+      disableDefaultUI: true,
+      fullscreenControl: true,
+    });
+    console.log("Created Map");
+    if (onMapClick) {
+      console.log("Adding click listener");
+      googleMap.addListener("click", ({latLng}) => onMapClick(googleMap, latLng));
+    }
+  });
+
+  return (
+    <div style={{ 
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+      }} 
+      ref={mapDivRef}
+    />
+  );
+}, () => true);
+
 export default ({
-  onMarkerMoved
+  onMarkerMoved,
 }) => {
   // avoid re-rendering by using let (similar to instance field)
   let marker = null;

client/src/components/maps/map.component.jsx

@@ -1,33 +0,0 @@
-import React, { useRef, useEffect } from "react";
-/* global google */
-
-// TODO might want to look into forcing this to avoid updates
-export default ({
-  onMapClick
-}) => {
-  const mapDivRef = useRef(null);
-  useEffect(() => {
-    const googleMap = new google.maps.Map(mapDivRef.current, {
-      center: { lat: 25, lng: -25 },
-      zoom: 0,
-      disableDefaultUI: true,
-      fullscreenControl: true,
-    });
-    console.log("Created Map");
-    if (onMapClick) {
-      console.log("Adding click listener");
-      googleMap.addListener("click", ({latLng}) => onMapClick(googleMap, latLng));
-    }
-  });
-
-  return (
-    <div style={{ 
-        height: "100%",
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-      }} 
-      ref={mapDivRef}
-    />
-  );
-};