fixing warnings and updating snapshots

src/components/Home/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { Typography } from "@material-ui/core";
 import useStyles from "../useStyles";
 

src/components/UpdatePackages/Create/__snapshots__/Create.test.js.snap

@@ -46,10 +46,10 @@ exports[`File Upload Form Should render 1`] = `
             />
             <fieldset
               aria-hidden="true"
-              class="PrivateNotchedOutline-root-37 MuiOutlinedInput-notchedOutline"
+              class="PrivateNotchedOutline-root-38 MuiOutlinedInput-notchedOutline"
             >
               <legend
-                class="PrivateNotchedOutline-legendLabelled-39"
+                class="PrivateNotchedOutline-legendLabelled-40"
               >
                 <span>
                   Package name
@@ -92,10 +92,10 @@ exports[`File Upload Form Should render 1`] = `
             />
             <fieldset
               aria-hidden="true"
-              class="PrivateNotchedOutline-root-37 MuiOutlinedInput-notchedOutline"
+              class="PrivateNotchedOutline-root-38 MuiOutlinedInput-notchedOutline"
             >
               <legend
-                class="PrivateNotchedOutline-legendLabelled-39"
+                class="PrivateNotchedOutline-legendLabelled-40"
               >
                 <span>
                   Version
@@ -138,10 +138,10 @@ exports[`File Upload Form Should render 1`] = `
             />
             <fieldset
               aria-hidden="true"
-              class="PrivateNotchedOutline-root-37 MuiOutlinedInput-notchedOutline"
+              class="PrivateNotchedOutline-root-38 MuiOutlinedInput-notchedOutline"
             >
               <legend
-                class="PrivateNotchedOutline-legendLabelled-39"
+                class="PrivateNotchedOutline-legendLabelled-40"
               >
                 <span>
                   Description
@@ -185,10 +185,10 @@ exports[`File Upload Form Should render 1`] = `
             />
             <fieldset
               aria-hidden="true"
-              class="PrivateNotchedOutline-root-37 MuiOutlinedInput-notchedOutline"
+              class="PrivateNotchedOutline-root-38 MuiOutlinedInput-notchedOutline"
             >
               <legend
-                class="PrivateNotchedOutline-legendLabelled-39"
+                class="PrivateNotchedOutline-legendLabelled-40"
               >
                 <span>
                   Release Notes URL

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}>

src/components/useStyles.jsx

@@ -173,10 +173,6 @@ const useStyles = makeStyles((theme) => ({
     width: "100%",
     paddingTop: "56.25%",
   },
-  root: {
-    margin: 0,
-    padding: theme.spacing(2),
-  },
   closeButton: {
     position: 'absolute',
     right: theme.spacing(1),
@@ -189,6 +185,10 @@ const useStyles = makeStyles((theme) => ({
   popUp: {
     minHeight: "15vh",
   },
+  popUpTitle: {
+    margin: 0,
+    padding: theme.spacing(2),
+  },
   popUpContent: {
     "& p": {
       margin: 0,

src/services/monitoring.js

@@ -6,24 +6,24 @@ const clientToken = 'pubeb25449bb91773fc993855c7378e375a';
 const site = 'datadoghq.com';
 const service = 'ota-portal';
 
-// datadogRum.init({
-//     applicationId,
-//     clientToken,
-//     site,
-//     service,
-//     // Specify a version number to identify the deployed version of your application in Datadog 
-//     // version: '1.0.0',
-//     sampleRate: 100,
-//     trackInteractions: true
-// });
+datadogRum.init({
+    applicationId,
+    clientToken,
+    site,
+    service,
+    // Specify a version number to identify the deployed version of your application in Datadog 
+    // version: '1.0.0',
+    sampleRate: 100,
+    trackInteractions: true
+});
 
-// datadogLogs.init({
-//     clientToken,
-//     site,
-//     service,
-//     forwardErrorsToLogs: true,
-//     sampleRate: 100,
-// });
+datadogLogs.init({
+    clientToken,
+    site,
+    service,
+    forwardErrorsToLogs: true,
+    sampleRate: 100,
+});
 
 const logger = datadogLogs.logger;