passing react tests

src/components/VehicleMap/index.jsx

@@ -1,74 +1,127 @@
 import React, { useEffect, useState } from "react";
 import useStyles from "../useStyles";
-import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet'
+import L from "leaflet";
+import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet";
+import { Button } from "@material-ui/core";
 
 import { useUserContext } from "../Contexts/UserContext";
 import { useStatusContext } from "../Contexts/StatusContext";
 import { useVehicleContext, VehicleProvider } from "../Contexts/VehicleContext";
 import { VehiclePopUp } from "./popup";
+import GreenCarIcon from "../../assets/green-car.png";
+import RedCarIcon from "../../assets/red-car.png";
 
 const Component = () => {
   const classes = useStyles();
   const { token } = useUserContext();
   const { setTitle } = useStatusContext();
-  const { getLocations, getState } = useVehicleContext();
+  const { getConnections, getLocations, getState } = useVehicleContext();
+
+  const REQUEST_INTERVAL = 10000;
 
   useEffect(() => {
     setTitle("");
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const [center, setCenter] = useState([0, 0])
+  const [center, setCenter] = useState([0, 0]);
   const [zoom, setZoom] = useState(2);
   const [markers, setMarkers] = useState([]);
 
-  const retrieveLocations = () => {
-    return getLocations(token)
-      .then((result) => {
-        var points = result.data.map(point => [point.latitude, point.longitude, point.vin]);
-        setMarkers(points);
-        console.log(points);
-        return points
+  useEffect(() => {
+    retrieveAndStoreLocations()
+      .then(points => {
+        centerAroundMarkers(points);
       })
-      .catch(() => console.log("token error"));
+    const id = setInterval(function () {
+      retrieveAndStoreLocations();
+    }, REQUEST_INTERVAL);
+    return () => { clearInterval(id) };
+  }, []);
+
+  const retrieveAndStoreLocations = () => {
+    return getLocations(token)
+      .then(result => {
+        if (result.data != null) {
+          var points = result.data.map(point => [point.latitude, point.longitude, point.vin]);
+          setMarkers(points);
+          return points
+        }
+        return []
+      })
+      .catch(error => console.log(error));
   }
 
   const centerAroundMarkers = (markers) => {
+    if (markers == null) {
+      markers = []
+    }
     var coord = markers.reduce((coord, marker) => {
       coord[0] += marker[0] / markers.length;
       coord[1] += marker[1] / markers.length;
       return coord;
     }, [0, 0])
 
-    console.log(coord);
     setCenter(coord);
     setZoom(4);
   }
 
-  useEffect(() => {
-    retrieveLocations()
-      .then(points => {
-        centerAroundMarkers(points);
-      })
-  }, []);
+  const [connections, setConnections] = useState({});
 
   useEffect(() => {
-    const id = setInterval(function () {
-      retrieveLocations();
-    }, 10000)
-    return () => { clearInterval(id) }
-  }, []);
+    if (markers.length > 0) {
+      var vins = markers.map(marker => marker[2]);
+      getConnections(vins, token)
+        .then(connections => {
+          setConnections(connections);
+        })
+    }
+  }, [markers])
 
-  const retrieveState = (e) => {
-    var vin = e.target.options.title;
+  const [selectedVIN, setSelectedVIN] = useState(null);
+  const [carState, setCarState] = useState(null);
+
+  useEffect(() => {
+    if (selectedVIN != null) {
+      retrieveAndStoreCarState(selectedVIN);
+      const id = setInterval(function () {
+        retrieveAndStoreCarState(selectedVIN);
+      }, REQUEST_INTERVAL);
+      return () => { clearInterval(id) };
+    }
+  }, [selectedVIN]);
+
+  const selectCar = (e, vin) => {
+    e.preventDefault();
+    setSelectedVIN(vin);
+  }
+
+  const retrieveAndStoreCarState = (vin) => {
     getState(token, vin)
       .then(results => {
-        console.log(results);
-        setSelected({ ...results.data, vin: vin });
+        setCarState({ ...results.data, vin: vin });
       });
   }
 
-  const [selected, setSelected] = useState(null);
+  const handleClose = () => {
+    setSelectedVIN(null);
+    setCarState(null);
+  };
+
+  function getCarIcon(vin) {
+    var icon = RedCarIcon;
+
+    if (connections[vin]) {
+      icon = GreenCarIcon;
+    } else {
+      icon = RedCarIcon;
+    }
+
+    return new L.Icon({
+      iconUrl: icon,
+      iconAnchor: [15, 0]
+    });
+  }
 
   return (
     <MapContainer
@@ -83,45 +136,60 @@ const Component = () => {
         attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
       />
-      <ChangeView center={center} zoom={zoom} />
+      <CenterFocus center={center} zoom={zoom} />
 
-      {
-        markers.map((marker) => (
-          <Marker
-            key={marker[2]}
-            position={[marker[0], marker[1]]}
-            title={marker[2]}
-            opacity={0.9}
-            eventHandlers={{
-              click: retrieveState
-            }}
-          >
-            <Popup>
-              {marker[2]} <br /> see more
-            </Popup>
-          </Marker>
-        ))
+      {markers.map((marker) => (
+        <Marker
+          icon={getCarIcon(marker[2])}
+          key={marker[2]}
+          position={[marker[0], marker[1]]}
+          title={marker[2]}
+          opacity={0.9}
+        >
+          <Popup>
+            <div align="center">
+              <p className={classes.markerTitle}><b>{marker[2]}</b></p>
+              <Button
+                type="submit"
+                variant="contained"
+                color="primary"
+                onClick={e => selectCar(e, marker[2])}
+              >
+                View Stats
+              </Button>
+            </div>
+          </Popup>
+        </Marker>
+      ))
       }
 
       {
-        selected != null && (
+        carState ? (
           <VehiclePopUp
-            vin={selected.vin}
-            online={selected.online}
-            doors={selected.doors}
-            location={selected.location}
-            windows={selected.windows}
+            vin={carState.vin}
+            online={carState.online}
+            battery={carState.battery}
+            doors={carState.doors}
+            location={carState.location}
+            windows={carState.windows}
+            className={classes.popup}
+            onClose={handleClose}
           />
-        )
+        ) : null
       }
     </MapContainer >
   );
 };
 
-const ChangeView = ({ center, zoom }) => {
+const CenterFocus = ({ center, zoom }) => {
   const map = useMap();
-  map.flyTo(center, zoom, { duration: 1.5 });
-  console.log("centered");
+  useEffect(() => {
+    if (center[0] === 0 && center[1] === 0) {
+      center = [0, 0]
+      zoom = 2
+    }
+    map.flyTo(center, zoom, { duration: 1.5 });
+  }, [center, zoom]);
   return null;
 }