CEC-2654: Revert Map polls for current visible area (#222) (#223)

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, useMapEvents } from "react-leaflet";
+import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet";
 import { Button } from "@material-ui/core";
 
 import { useUserContext } from "../Contexts/UserContext";
@@ -22,23 +22,27 @@ const Component = () => {
 
   const REQUEST_INTERVAL = 10000;
 
-  const [center] = useState([37.0902, -95.7129]);
-  const [zoom] = useState(4.5);
+  const [center, setCenter] = useState([0, 0]);
+  const [zoom, setZoom] = useState(2);
   const [markers, setMarkers] = useState([]);
   const [connections, setConnections] = useState({});
-  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
+
+  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 retrieveAndStoreLocations = (accessToken) => {
-    return getLocations(accessToken, mapLocationInfo)
+    return getLocations(accessToken)
       .then((result) => {
         if (result.data != null) {
           const points = result.data.map((point) => [
@@ -54,6 +58,20 @@ 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;
 
@@ -121,54 +139,17 @@ 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"
@@ -223,6 +204,7 @@ 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 });
@@ -230,6 +212,7 @@ const CenterFocus = ({ center, zoom }) => {
       map.flyTo(center, zoom, { duration: 1.5 });
     }
   }, [center, zoom, map]);
+
   return null;
 };