Streamlining the logic of the click marker map and removing some console.logs

client/src/components/screens/game-panel.component/click-marker-map.component.jsx

@@ -1,8 +1,10 @@
 import React, { useRef, useEffect } from "react";
 /* global google */
 
-const MapComponent = React.memo(({
-  onMapClick
+// avoid re-rendering with memo(..., () => true)
+// this reduces reusability of this component, but that's fine for this
+export default React.memo(({
+  onMarkerMoved
 }) => {
   const mapDivRef = useRef(null);
   useEffect(() => {
@@ -12,10 +14,17 @@ const MapComponent = React.memo(({
       disableDefaultUI: true,
       fullscreenControl: true,
     });
-    console.log("Created Map");
-    if (onMapClick) {
-      console.log("Adding click listener");
-      googleMap.addListener("click", ({latLng}) => onMapClick(googleMap, latLng));
+    
+    if (onMarkerMoved) {
+      googleMap.addListener("click", ({ latLng }) => {
+        if (mapDivRef.current.mapMarker) {
+          mapDivRef.current.mapMarker.setMap(null);
+        }
+        mapDivRef.current.mapMarker = new google.maps.Marker({ map: googleMap, position: latLng });
+        if (onMarkerMoved) {
+          onMarkerMoved({ lat: latLng.lat(), lng: latLng.lng() });
+        }
+      });
     }
   });
 
@@ -26,19 +35,3 @@ const MapComponent = React.memo(({
     />
   );
 }, () => true);
-
-export default ({
-  onMarkerMoved,
-}) => {
-  // avoid re-rendering by using let (similar to instance field)
-  let marker = null;
-  return <MapComponent onMapClick={(map, position) => {
-    if (marker) {
-      marker.setMap(null);
-    }
-    marker = new google.maps.Marker({ map, position });
-    if (onMarkerMoved) {
-      onMarkerMoved({ lat: position.lat(), lng: position.lng() });
-    }
-  }}/>
-};

client/src/components/screens/game-panel.component/positioned-street-view.component.jsx

@@ -12,8 +12,7 @@ export default React.memo(({ position }) => {
       clickToGo: true,
       visible: true,
     });
-    console.log("Created Street View Pano");
-    console.log("Setting up reset button");
+    
     buttonRef.current.onclick = () => pano.setPosition(position);
   });