CEC-2654: Map polls for curren visible area (#222)

Update index.jsx
Added some tests, still don't meet  threshold

Co-authored-by: Alexander Andrews <aandrews@fiskerinc.com>

src/components/VehicleMap/index.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import useStyles from "../useStyles";
 import L from "leaflet";
-import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet";
+import { MapContainer, TileLayer, Marker, Popup, useMap, useMapEvents } from "react-leaflet";
 import { Button } from "@material-ui/core";
 
 import { useUserContext } from "../Contexts/UserContext";
@@ -22,27 +22,23 @@ const Component = () => {
 
   const REQUEST_INTERVAL = 10000;
 
-  const [center, setCenter] = useState([0, 0]);
-  const [zoom, setZoom] = useState(2);
+  const [center] = useState([37.0902, -95.7129]);
+  const [zoom] = useState(4.5);
   const [markers, setMarkers] = useState([]);
   const [connections, setConnections] = useState({});
-
-  useEffect(() => {
-    if (!token) return;
-    retrieveAndStoreLocations(token).then((points) => {
-      centerAroundMarkers(points);
-    });
-    const id = setInterval(function () {
-      retrieveAndStoreLocations(token);
-    }, REQUEST_INTERVAL);
-    return () => {
-      clearInterval(id);
-    };
-    // eslint-disable-next-line
-  }, [token]);
+  const [mapMoveTimer, setMapMoveTimer] = useState(null)
+  const [mapUpdateInterval, setMapUpdateInterval] = useState(null)
+  const [mapLocationInfo, setMapLocationInfo] = useState({
+    center: {
+      latitude: 0,
+      longitude: 0
+    },
+    width: 100,
+    height: 100
+  })// MapLocationInfo is the center, height and width of the map
 
   const retrieveAndStoreLocations = (accessToken) => {
-    return getLocations(accessToken)
+    return getLocations(accessToken, mapLocationInfo)
       .then((result) => {
         if (result.data != null) {
           const points = result.data.map((point) => [
@@ -58,20 +54,6 @@ const Component = () => {
       .catch((error) => logger.warn(error.stack));
   };
 
-  const centerAroundMarkers = (points) => {
-    // if (markers == null) {
-    //   markers = []
-    // }
-    // const coord = markers.reduce((coord, marker) => {
-    //   coord[0] += marker[0] / markers.length;
-    //   coord[1] += marker[1] / markers.length;
-    //   return coord;
-    // }, [0, 0])
-
-    setCenter([37.0902, -95.7129]);
-    setZoom(4.5);
-  };
-
   useEffect(() => {
     if (!token) return;
 
@@ -139,17 +121,54 @@ const Component = () => {
       iconUrl: icon,
       iconAnchor: [24, 42],
     });
+
+  }
+
+  function GetVisibleCarLocations() {
+    const map = useMapEvents({
+      move: () => { // Zoom also triggers this
+        var width = map.distance(map.getBounds().getNorthEast(), map.getBounds().getNorthWest()) // Float of meters
+        var height = map.distance(map.getBounds().getNorthEast(), map.getBounds().getSouthEast()) // Float of meters
+        var center = map.getCenter()
+        setMapLocationInfo({
+          center: {
+            longitude: center.lng,
+            latitude: center.lat
+          },
+          width: width / 1000, // Meters to KiloMeters
+          height: height / 1000
+        })
+        // Remove the old interval and timeout that was running
+        clearTimeout(mapMoveTimer)
+        clearInterval(mapUpdateInterval)
+        setMapMoveTimer(
+          setTimeout(() => {
+            retrieveAndStoreLocations(token)
+          }, 1000) // We wait 1 second before contacting the server, just so we don't poll 1000 as the user is moving the map
+        )
+        // Get car updates every 30 seconds, as they are driving around
+        setMapUpdateInterval(
+          setInterval(() => {
+            retrieveAndStoreLocations(token)
+          }, 30000) 
+        )
+      },
+    })
+
+    return null
   }
 
   return (
     <MapContainer
       center={center}
       zoom={zoom}
+
       style={{
         width: "100%",
         height: "900px",
       }}
     >
+      <GetVisibleCarLocations />
       <TileLayer
         attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
@@ -204,7 +223,6 @@ const Component = () => {
 
 const CenterFocus = ({ center, zoom }) => {
   const map = useMap();
-
   useEffect(() => {
     if (center[0] === 0 && center[1] === 0) {
       map.flyTo([0, 0], 2, { duration: 1.5 });
@@ -212,7 +230,6 @@ const CenterFocus = ({ center, zoom }) => {
       map.flyTo(center, zoom, { duration: 1.5 });
     }
   }, [center, zoom, map]);
-
   return null;
 };