fixing warnings and updating snapshots

src/components/VehicleMap/index.jsx

@@ -37,6 +37,7 @@ const Component = () => {
       retrieveAndStoreLocations();
     }, REQUEST_INTERVAL);
     return () => { clearInterval(id) };
+    // eslint-disable-next-line
   }, []);
 
   const retrieveAndStoreLocations = () => {
@@ -76,7 +77,8 @@ const Component = () => {
           setConnections(connections);
         })
     }
-  }, [markers])
+    // eslint-disable-next-line
+  }, [markers, token])
 
   const [selectedVIN, setSelectedVIN] = useState(null);
   const [carState, setCarState] = useState(null);
@@ -89,6 +91,7 @@ const Component = () => {
       }, REQUEST_INTERVAL);
       return () => { clearInterval(id) };
     }
+    // eslint-disable-next-line
   }, [selectedVIN]);
 
   const selectCar = (e, vin) => {
@@ -166,6 +169,7 @@ const Component = () => {
       {
         carState ? (
           <VehiclePopUp
+            key={carState.vin}
             vin={carState.vin}
             online={carState.online}
             battery={carState.battery}
@@ -183,13 +187,15 @@ const Component = () => {
 
 const CenterFocus = ({ center, zoom }) => {
   const map = useMap();
+
   useEffect(() => {
     if (center[0] === 0 && center[1] === 0) {
-      center = [0, 0]
-      zoom = 2
+      map.flyTo([0, 0], 2, { duration: 1.5 });
+    } else {
+      map.flyTo(center, zoom, { duration: 1.5 });
     }
-    map.flyTo(center, zoom, { duration: 1.5 });
-  }, [center, zoom]);
+  }, [center, zoom, map]);
+
   return null;
 }
 

src/components/VehicleMap/popup.jsx

@@ -1,9 +1,6 @@
 import React from "react";
-import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
 import MuiDialogTitle from '@material-ui/core/DialogTitle';
-import MuiDialogContent from '@material-ui/core/DialogContent';
-import MuiDialogActions from '@material-ui/core/DialogActions';
 import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
 import Typography from '@material-ui/core/Typography';
@@ -32,19 +29,19 @@ const VehiclePopUp = (props) => {
                         {doors != null && (
                             <div>
                                 <h3>Doors</h3>
-                                {Object.entries(doors).map((value) => (<p><b>{value[0]}</b>: {value[1] ? "open" : "closed"}</p>))}
+                                {Object.entries(doors).map((value) => (<p key={value[0]}><b>{value[0]}</b>: {value[1] ? "open" : "closed"}</p>))}
                             </div>
                         )}
                         {windows != null && (
                             <div>
                                 <h3>Windows</h3>
-                                {Object.entries(windows).map((value) => (<p><b>{value[0]}</b>: {value[1] ? "open" : "closed"}</p>))}
+                                {Object.entries(windows).map((value) => (<p key={value[0]}><b>{value[0]}</b>: {value[1] ? "open" : "closed"}</p>))}
                             </div>
                         )}
                         {location != null && (
                             <div>
                                 <h3>Location</h3>
-                                {Object.entries(location).map((value) => (<p><b>{value[0]}</b>: {value[1]}</p>))}
+                                {Object.entries(location).map((value) => (<p key={value[0]}><b>{value[0]}</b>: {value[1]}</p>))}
                             </div>
                         )}
                     </div>
@@ -61,7 +58,7 @@ const DialogTitle = (props) => {
     const { children, onClose, ...other } = props;
     const classes = useStyles();
     return (
-        <MuiDialogTitle disableTypography className={classes.root} {...other}>
+        <MuiDialogTitle disableTypography className={classes.ppopUpTItle} {...other}>
             <Typography variant="h6">{children}</Typography>
             {onClose ? (
                 <IconButton aria-label="close" className={classes.closeButton} onClick={onClose}>