Doing some cleanup to the useMap hook and the ApiInfo component

client/src/components/screens/GamePanel/ClickMarkerMap.jsx

@@ -10,7 +10,6 @@ const useClickMarker = (map, onMove) => {
         marker.current.setMap(null);
       }
       marker.current = new google.maps.Marker({ map: map.current, position: latLng });
-      console.log({ lat: latLng.lat(), lng: latLng.lng() });
       onMove({ lat: latLng.lat(), lng: latLng.lng() });
     });
 
@@ -19,7 +18,8 @@ const useClickMarker = (map, onMove) => {
 }
 
 export default ({ onMarkerMoved }) => {
-  const [mapDivRef, mapRef] = useMap();
+  const mapDivRef = useRef(null);
+  const mapRef = useMap(mapDivRef);
   useClickMarker(mapRef, onMarkerMoved);
   return <div className="map-div" ref={mapDivRef} />
 }

client/src/components/screens/RoundSummary.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useRef, useEffect } from "react";
 import ClickToCopy from "../util/ClickToCopy";
 import Button from "../util/Button";
 import useMap from "../../hooks/useMap";
@@ -84,7 +84,8 @@ export default ({ round, onNext }) => {
     score,
     totalScore,
   } = round;
-  const [mapDivRef, mapRef] = useMap();
+  const mapDivRef = useRef(null);
+  const mapRef = useMap(mapDivRef);
   useMarkedPoints(mapRef, selectedPoint, targetPoint);
 
   return (

client/src/components/util/ApiInfo.jsx

@@ -1,10 +1,15 @@
 import React, { useState, useEffect } from "react";
 import { getStatus } from "../../domain/GGSHService";
 
-export default () => {
+const useApiHeath = () => {
   const [data, setData] = useState(null);
   useEffect(() => { getStatus().then(setData) }, []);
+  return data;
+}
 
+export default () => {
+  const data = useApiHeath();
+  
   if (data === null) {
     return <p>Connecting to back-end...</p>
   }

client/src/hooks/useMap.jsx

@@ -1,8 +1,7 @@
 import { useRef, useEffect } from "react";
 /* global google */
 
-export default () => {
-  const mapDiv = useRef(null);
+export default mapDiv => {
   const map = useRef(null);
   useEffect(() => {
     if (map.current) {
@@ -16,7 +15,7 @@ export default () => {
       disableDefaultUI: true,
       fullscreenControl: true,
     });
-  }, []);
+  }, [mapDiv]);
 
-  return [mapDiv, map];
+  return map;
 }