Merge CEC-394 Car update log (#82)

src/components/VehicleMap/index.jsx

@@ -9,13 +9,14 @@ import { useVehicleContext, VehicleProvider } from "../Contexts/VehicleContext";
 import { VehiclePopUp } from "./popup";
 import GreenMarkerIcon from "../../assets/green-marker.png";
 import GrayMarkerIcon from "../../assets/gray-marker.png";
+import { logger } from "../../services/monitoring";
 
 const Component = () => {
   const classes = useStyles();
   const {
     token: {
       idToken: { jwtToken: token },
-    }
+    },
   } = useUserContext();
   const { getConnections, getLocations, getState } = useVehicleContext();
 
@@ -26,29 +27,34 @@ const Component = () => {
   const [markers, setMarkers] = useState([]);
 
   useEffect(() => {
-    retrieveAndStoreLocations()
-      .then(points => {
-        centerAroundMarkers(points);
-      })
+    retrieveAndStoreLocations().then((points) => {
+      centerAroundMarkers(points);
+    });
     const id = setInterval(function () {
       retrieveAndStoreLocations();
     }, REQUEST_INTERVAL);
-    return () => { clearInterval(id) };
+    return () => {
+      clearInterval(id);
+    };
     // eslint-disable-next-line
   }, []);
 
   const retrieveAndStoreLocations = () => {
     return getLocations(token)
-      .then(result => {
+      .then((result) => {
         if (result.data != null) {
-          const points = result.data.map(point => [point.latitude, point.longitude, point.vin]);
+          const points = result.data.map((point) => [
+            point.latitude,
+            point.longitude,
+            point.vin,
+          ]);
           setMarkers(points);
-          return points
+          return points;
         }
-        return []
+        return [];
       })
-      .catch(error => console.log(error));
-  }
+      .catch((error) => logger.warn(error.stack));
+  };
 
   const centerAroundMarkers = (markers) => {
     // if (markers == null) {
@@ -62,20 +68,19 @@ const Component = () => {
 
     setCenter([37.0902, -95.7129]);
     setZoom(4.5);
-  }
+  };
 
   const [connections, setConnections] = useState({});
 
   useEffect(() => {
     if (markers.length > 0) {
-      const vins = markers.map(marker => marker[2]);
-      getConnections(vins, token)
-        .then(connections => {
-          setConnections(connections);
-        })
+      const vins = markers.map((marker) => marker[2]);
+      getConnections(vins, token).then((connections) => {
+        setConnections(connections);
+      });
     }
     // eslint-disable-next-line
-  }, [markers, token])
+  }, [markers, token]);
 
   const [selectedVIN, setSelectedVIN] = useState(null);
   const [carState, setCarState] = useState(null);
@@ -86,7 +91,9 @@ const Component = () => {
       const id = setInterval(function () {
         retrieveAndStoreCarState(selectedVIN);
       }, REQUEST_INTERVAL);
-      return () => { clearInterval(id) };
+      return () => {
+        clearInterval(id);
+      };
     }
     // eslint-disable-next-line
   }, [selectedVIN]);
@@ -94,14 +101,13 @@ const Component = () => {
   const selectCar = (e, vin) => {
     e.preventDefault();
     setSelectedVIN(vin);
-  }
+  };
 
   const retrieveAndStoreCarState = (vin) => {
-    getState(token, vin)
-      .then(results => {
-        setCarState({ ...results.data, vin: vin });
-      });
-  }
+    getState(token, vin).then((results) => {
+      setCarState({ ...results.data, vin: vin });
+    });
+  };
 
   const handleClose = () => {
     setSelectedVIN(null);
@@ -117,7 +123,7 @@ const Component = () => {
 
     return new L.Icon({
       iconUrl: icon,
-      iconAnchor: [24, 42]
+      iconAnchor: [24, 42],
     });
   }
 
@@ -126,8 +132,8 @@ const Component = () => {
       center={center}
       zoom={zoom}
       style={{
-        width: '100%',
-        height: '900px'
+        width: "100%",
+        height: "900px",
       }}
     >
       <TileLayer
@@ -146,37 +152,36 @@ const Component = () => {
         >
           <Popup>
             <div align="center">
-              <p className={classes.markerTitle}><b>{marker[2]}</b></p>
+              <p className={classes.markerTitle}>
+                <b>{marker[2]}</b>
+              </p>
               <Button
                 type="submit"
                 variant="contained"
                 color="primary"
-                onClick={e => selectCar(e, marker[2])}
+                onClick={(e) => selectCar(e, marker[2])}
               >
                 View Stats
               </Button>
             </div>
           </Popup>
         </Marker>
-      ))
-      }
+      ))}
 
-      {
-        carState ? (
-          <VehiclePopUp
-            key={carState.vin}
-            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 >
+      {carState ? (
+        <VehiclePopUp
+          key={carState.vin}
+          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>
   );
 };
 
@@ -192,12 +197,12 @@ const CenterFocus = ({ center, zoom }) => {
   }, [center, zoom, map]);
 
   return null;
-}
+};
 
 const VehicleMap = () => (
   <VehicleProvider>
     <Component />
   </VehicleProvider>
-)
+);
 
 export default VehicleMap;