CEC-3934 refresh digital twin (#300)

* CEC-3934 refresh digital twin

* clean up

src/components/Cars/Status/DigitalTwinTab.jsx

@@ -1,16 +1,18 @@
-import React, { useEffect, useState } from "react";
-import clsx from "clsx";
 import { Typography } from "@material-ui/core";
+import clsx from "clsx";
+import React, { useEffect, useState } from "react";
 
-import useStyles from "../../useStyles";
+import { logger } from "../../../services/monitoring";
-import DigitalTwin from "../../DigitalTwin";
-import {
-  useVehicleContext,
-  VehicleProvider,
-} from "../../Contexts/VehicleContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import { useUserContext } from "../../Contexts/UserContext";
-import { logger } from "../../../services/monitoring";
+import {
+  useVehicleContext,
+  VehicleProvider
+} from "../../Contexts/VehicleContext";
+import DigitalTwin from "../../DigitalTwin";
+import useStyles from "../../useStyles";
+
+const REQUEST_INTERVAL = 10000;
 
 const Main = (props) => {
   const { getState } = useVehicleContext();
@@ -26,18 +28,22 @@ const Main = (props) => {
 
   useEffect(() => {
     if (!vin) return;
-    (async () => {
+    getCarState();
-      try {
+    const interval = setInterval(getCarState, REQUEST_INTERVAL);
-        const result = await getState(token, vin);
+    return () => { clearInterval(interval); }
-        setCarState(result.data);
-      } catch (e) {
-        setMessage(e.message);
-        logger.warn(e.stack);
-      }
-    })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [vin]);
 
+  const getCarState = async () => {
+    try {
+      const result = await getState(token, vin);
+      setCarState(result.data);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
+
   return (
     <div className={clsx(classes.paper, classes.tableSize)}>
       <Typography variant="h6" style={{ paddingBottom: "10px" }}>

src/components/VehicleMap/index.jsx

@@ -1,16 +1,16 @@
-import React, { useEffect, useState } from "react";
-import useStyles from "../useStyles";
-import L from "leaflet";
-import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet";
 import { Button } from "@material-ui/core";
+import L from "leaflet";
+import React, { useEffect, useState } from "react";
+import { MapContainer, Marker, Popup, TileLayer, useMap } from "react-leaflet";
+import useStyles from "../useStyles";
 
+import GrayMarkerIcon from "../../assets/gray-marker.png";
+import GreenMarkerIcon from "../../assets/green-marker.png";
+import { logger } from "../../services/monitoring";
+import { ValidateLocationData } from "../../utils/locations";
 import { useUserContext } from "../Contexts/UserContext";
 import { useVehicleContext, VehicleProvider } from "../Contexts/VehicleContext";
 import { VehiclePopUp } from "./popup";
-import { ValidateLocationData } from "../../utils/locations"
-import GreenMarkerIcon from "../../assets/green-marker.png";
-import GrayMarkerIcon from "../../assets/gray-marker.png";
-import { logger } from "../../services/monitoring";
 
 const Component = () => {
   const classes = useStyles();
@@ -39,7 +39,7 @@ const Component = () => {
     return () => {
       clearInterval(id);
     };
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [token]);
 
   const retrieveAndStoreLocations = (accessToken) => {