CEC-3934 refresh digital twin (#300)

* CEC-3934 refresh digital twin

* clean up
This commit is contained in:
John Wu
2023-03-21 13:45:10 -07:00
committed by GitHub
parent 70255d40e4
commit 5a8e823822
2 changed files with 33 additions and 27 deletions

View File

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

View File

@@ -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) => {