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 DigitalTwin from "../../DigitalTwin";
-import {
-  useVehicleContext,
-  VehicleProvider,
-} from "../../Contexts/VehicleContext";
+import { logger } from "../../../services/monitoring";
 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 () => {
-      try {
-        const result = await getState(token, vin);
-        setCarState(result.data);
-      } catch (e) {
-        setMessage(e.message);
-        logger.warn(e.stack);
-      }
-    })();
+    getCarState();
+    const interval = setInterval(getCarState, REQUEST_INTERVAL);
+    return () => { clearInterval(interval); }
     // 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" }}>