From 58890ea40e78781c5eda06247d56c6914f6e8978 Mon Sep 17 00:00:00 2001
From: Alexander Andrews
 <45926661+alexander-e-andrews@users.noreply.github.com>
Date: Mon, 24 Oct 2022 17:31:26 -0400
Subject: [PATCH] CEC-2654: Revert Map polls for current visible area (#222)
 (#223)

Co-authored-by: Alexander Andrews <aandrews@fiskerinc.com>
---
 src/components/Contexts/VehicleContext.jsx    |   4 +-
 .../Contexts/VehicleContext.test.jsx          |  53 -------
 .../__snapshots__/index.test.jsx.snap         | 130 ------------------
 .../__snapshots__/popup.test.jsx.snap         |   7 -
 src/components/VehicleMap/index.jsx           |  85 +++++-------
 src/components/VehicleMap/index.test.jsx      |  30 ----
 src/components/VehicleMap/popup.jsx           |   4 +-
 src/components/VehicleMap/popup.test.jsx      |  43 ------
 src/services/__mocks__/vehiclesAPI.js         |   8 +-
 src/services/vehiclesAPI.js                   |   5 +-
 10 files changed, 45 insertions(+), 324 deletions(-)
 delete mode 100644 src/components/VehicleMap/__snapshots__/index.test.jsx.snap
 delete mode 100644 src/components/VehicleMap/__snapshots__/popup.test.jsx.snap
 delete mode 100644 src/components/VehicleMap/index.test.jsx
 delete mode 100644 src/components/VehicleMap/popup.test.jsx

diff --git a/src/components/Contexts/VehicleContext.jsx b/src/components/Contexts/VehicleContext.jsx
index e525ef7..3896f9d 100644
--- a/src/components/Contexts/VehicleContext.jsx
+++ b/src/components/Contexts/VehicleContext.jsx
@@ -89,10 +89,10 @@ export const VehicleProvider = ({ children }) => {
     }
   };
 
-  const getLocations = async (token, mapLocationInfo) => {
+  const getLocations = async (token) => {
     try {
       setBusy(true);
-      const result = await api.getLocations(token, mapLocationInfo);
+      const result = await api.getLocations(token);
       if (result.error)
         throw new Error(`Get locations error. ${result.message}`);
       return result;
diff --git a/src/components/Contexts/VehicleContext.test.jsx b/src/components/Contexts/VehicleContext.test.jsx
index 867d8d9..a8c79d5 100644
--- a/src/components/Contexts/VehicleContext.test.jsx
+++ b/src/components/Contexts/VehicleContext.test.jsx
@@ -9,7 +9,6 @@ import {
 } from "@testing-library/react";
 import { VehicleProvider, useVehicleContext } from "./VehicleContext";
 import { StatusProvider, useStatusContext } from "./StatusContext";
-import { act } from "react-dom/test-utils";
 
 const checkVehicleResult = (error, busy, vehicle) => {
   checkBaseResults(error, busy);
@@ -438,56 +437,6 @@ describe("VehicleContext", () => {
       checkBaseResults("", "false");
     });
   });
-
-  describe("Get Locations", () => {
-    var locationFilter = {
-      center: {
-        longitude: 0,
-        latitude: 0
-      },
-      width: 0,
-      height: 0
-    }
-
-    var locations;
-    beforeEach(() => {
-      const TestComp = () => {
-        const { busy, error, getLocations } = useVehicleContext();
-
-        return (
-          <>
-            <div data-testid="error">{error}</div>
-            <div data-testid="busy">{busy.toString()}</div>
-            <button data-testid="getLocations" onClick={() => locations = getLocations(null, locationFilter)} />
-            
-          </>
-        ) 
-      }
-      render(
-        <VehicleProvider>
-          <TestComp /> 
-        </VehicleProvider>
-      )
-    })
-
-    afterEach(() => {
-      cleanup()
-    })
-
-    it("Initial state", () => {
-      checkBaseResults("", "false")
-    })
-
-    it("getVehicleLocations", async () => {
-      await act(async () => {
-        fireEvent.click(screen.getByTestId("getLocations"))
-        locations = await locations
-      })
-      
-      checkBaseResults("", "false")
-      expect(locations.data).toStrictEqual(expectedLocationsData)
-    })
-  })
 });
 
 const expectedFilters = [
@@ -579,5 +528,3 @@ const expectedVehiclesData = [
     connectedHMI: false,
   },
 ];
-
-const expectedLocationsData = [{ altitude: 0, longitude: 10, latitude: 15, vin: "TESTVIN123" }]
\ No newline at end of file
diff --git a/src/components/VehicleMap/__snapshots__/index.test.jsx.snap b/src/components/VehicleMap/__snapshots__/index.test.jsx.snap
deleted file mode 100644
index aeb52b4..0000000
--- a/src/components/VehicleMap/__snapshots__/index.test.jsx.snap
+++ /dev/null
@@ -1,130 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`VehicleMap Render 1`] = `
-<div>
-  <div
-    data-testid="mocked-vehicleprovider"
-  >
-    <div
-      class="leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
-      style="width: 100%; height: 900px; position: relative;"
-      tabindex="0"
-    >
-      <div
-        class="leaflet-pane leaflet-map-pane"
-        style="left: 0px; top: 0px;"
-      >
-        <div
-          class="leaflet-pane leaflet-tile-pane"
-        >
-          <div
-            class="leaflet-layer "
-            style="z-index: 1;"
-          >
-            <div
-              class="leaflet-tile-container leaflet-zoom-animated"
-              style="z-index: 18; left: 0px; top: 0px;"
-            >
-              <img
-                alt=""
-                class="leaflet-tile"
-                role="presentation"
-                src="https://b.tile.openstreetmap.org/5/7/12.png"
-                style="width: 256px; height: 256px; left: -126px; top: -114px;"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class="leaflet-pane leaflet-overlay-pane"
-        />
-        <div
-          class="leaflet-pane leaflet-shadow-pane"
-        />
-        <div
-          class="leaflet-pane leaflet-marker-pane"
-        />
-        <div
-          class="leaflet-pane leaflet-tooltip-pane"
-        />
-        <div
-          class="leaflet-pane leaflet-popup-pane"
-        />
-      </div>
-      <div
-        class="leaflet-control-container"
-      >
-        <div
-          class="leaflet-top leaflet-left"
-        >
-          <div
-            class="leaflet-control-zoom leaflet-bar leaflet-control"
-          >
-            <a
-              aria-disabled="false"
-              aria-label="Zoom in"
-              class="leaflet-control-zoom-in"
-              href="#"
-              role="button"
-              title="Zoom in"
-            >
-              <span
-                aria-hidden="true"
-              >
-                +
-              </span>
-            </a>
-            <a
-              aria-disabled="false"
-              aria-label="Zoom out"
-              class="leaflet-control-zoom-out"
-              href="#"
-              role="button"
-              title="Zoom out"
-            >
-              <span
-                aria-hidden="true"
-              >
-                −
-              </span>
-            </a>
-          </div>
-        </div>
-        <div
-          class="leaflet-top leaflet-right"
-        />
-        <div
-          class="leaflet-bottom leaflet-left"
-        />
-        <div
-          class="leaflet-bottom leaflet-right"
-        >
-          <div
-            class="leaflet-control-attribution leaflet-control"
-          >
-            <a
-              href="https://leafletjs.com"
-              title="A JavaScript library for interactive maps"
-            >
-              Leaflet
-            </a>
-             
-            <span
-              aria-hidden="true"
-            >
-              |
-            </span>
-             © 
-            <a
-              href="http://osm.org/copyright"
-            >
-              OpenStreetMap
-            </a>
-             contributors
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/components/VehicleMap/__snapshots__/popup.test.jsx.snap b/src/components/VehicleMap/__snapshots__/popup.test.jsx.snap
deleted file mode 100644
index c6946fb..0000000
--- a/src/components/VehicleMap/__snapshots__/popup.test.jsx.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`VehicleMap popup Render 1`] = `
-<div
-  aria-hidden="true"
-/>
-`;
diff --git a/src/components/VehicleMap/index.jsx b/src/components/VehicleMap/index.jsx
index 391c619..c685dac 100644
--- a/src/components/VehicleMap/index.jsx
+++ b/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;
 };
 
diff --git a/src/components/VehicleMap/index.test.jsx b/src/components/VehicleMap/index.test.jsx
deleted file mode 100644
index e465f6b..0000000
--- a/src/components/VehicleMap/index.test.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-jest.mock("../Contexts/VehicleContext")
-jest.mock("../Contexts/StatusContext");
-jest.mock("../Contexts/UserContext");
-
-import { fireEvent, render, waitFor,screen, getByText } from "@testing-library/react";
-import { setToken } from "../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../utils/testing";
-import addSnapshotSerializer from "../../utils/snapshot";
-import VehicleMap from "./index";
-
-
-const renderVehicleMap = async () => {
-  const { container } = render(
-    <VehicleMap />
-  );
-  await waitFor(() => {});
-  return container;
-};
-
-describe("VehicleMap", () => {
-  beforeAll(() => {
-    addSnapshotSerializer(expect);
-  });
-
-  it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
-    const container = await renderVehicleMap();
-    expect(container).toMatchSnapshot();
-  });
-});
\ No newline at end of file
diff --git a/src/components/VehicleMap/popup.jsx b/src/components/VehicleMap/popup.jsx
index 4292145..60d3f34 100644
--- a/src/components/VehicleMap/popup.jsx
+++ b/src/components/VehicleMap/popup.jsx
@@ -41,8 +41,8 @@ const VehiclePopUp = (props) => {
       <DialogTitle align="center" onClose={onClose}>
         {vin}
         {"  "}
-        <IconButton onClick={toggleView}>
-          <VisibilityIcon fontSize="inherit" />
+        <IconButton>
+          <VisibilityIcon fontSize="inherit" onClick={toggleView} />
         </IconButton>
       </DialogTitle>
       <div align="center" className={classes.popUpContent}>
diff --git a/src/components/VehicleMap/popup.test.jsx b/src/components/VehicleMap/popup.test.jsx
deleted file mode 100644
index 42f48b3..0000000
--- a/src/components/VehicleMap/popup.test.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-jest.mock("../Contexts/UserContext");
-
-import { fireEvent, render, waitFor, screen, getByText } from "@testing-library/react";
-import { setToken } from "../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../utils/testing";
-import addSnapshotSerializer from "../../utils/snapshot";
-import { VehiclePopUp } from "./popup";
-
-const renderPopup = async (online) => {
-  const { container } = render(
-    <VehiclePopUp vin={"F1SKER123456"} online={online} />
-  );
-  await waitFor(() => { });
-  return container;
-};
-
-describe("VehicleMap popup", () => {
-  beforeAll(() => {
-    addSnapshotSerializer(expect);
-  });
-
-  it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
-    const container = await renderPopup(false);
-    expect(container).toMatchSnapshot();
-  });
-
-  it("Online: false", async () => {
-    setToken(TEST_AUTH_OBJECT);
-    const container = await renderPopup(false);
-    const el = screen.getAllByText('Connected', { exact: false })[0]
-    
-    expect(el.parentElement.textContent).toEqual('Connected: false');
-  });
-
-  it("Online: true", async () => {
-    setToken(TEST_AUTH_OBJECT);
-    const container = await renderPopup(true);
-    const el = screen.getAllByText('Connected', { exact: false })[0]
-    
-    expect(el.parentElement.textContent).toEqual('Connected: true');
-  });
-})
diff --git a/src/services/__mocks__/vehiclesAPI.js b/src/services/__mocks__/vehiclesAPI.js
index edc5832..ccd7537 100644
--- a/src/services/__mocks__/vehiclesAPI.js
+++ b/src/services/__mocks__/vehiclesAPI.js
@@ -85,9 +85,11 @@ const vehiclesAPI = {
       data: ["Ocean", "Pear"],
     };
   },
-  getLocations: async (token, locationFilter) => {
-    return {data:[{ altitude: 0, longitude: 10, latitude: 15, vin: "TESTVIN123"}] }
-  },
+  getLocations: jest
+    .fn()
+    .mockResolvedValue([
+      { altitude: 5, longitude: 10, latitude: 15, vin: "TESTVIN123" },
+    ]),
   getVehicle: async (vin) => {
     const index = data.findIndex(element => element.vin === vin);
     return data[index];
diff --git a/src/services/vehiclesAPI.js b/src/services/vehiclesAPI.js
index 09d7947..cc672d5 100644
--- a/src/services/vehiclesAPI.js
+++ b/src/services/vehiclesAPI.js
@@ -68,14 +68,13 @@ const vehiclesAPI = {
       .then(fetchRespHandler)
       .catch(errorHandler),
 
-  getLocations: async (token, mapLocationInfo) =>
+  getLocations: async (token) =>
     fetch(`${API_ENDPOINT}/carslocations`, {
-      method: "POST",
+      method: "GET",
       headers: Object.assign(
         { "Content-Type": "application/json" },
         getAuthHeaderOptions(token)
       ),
-      body: JSON.stringify(mapLocationInfo)
     })
       .then(fetchRespHandler)
       .catch(errorHandler),