CEC-4955 - Digital twin to show vehicle location instead of vehicle paths (#426)

* CEC-4955 - Digital twin show vehicle location

* fix code smell

src/components/VehicleMap/index.jsx

@@ -15,7 +15,7 @@ import { VehiclePopUp } from "./popup";
 import { useLocalStorage } from "../useLocalStorage";
 import zoomLocations from './zoomLocations.json';
 
-const Component = () => {
+const Component = (props) => {
   const classes = useStyles();
   const {
     token: {
@@ -47,20 +47,41 @@ const Component = () => {
   }, [token]);
 
   const retrieveAndStoreLocations = (accessToken) => {
-    return getLocations(accessToken)
-      .then((result) => {
-        if (result.data != null && ValidateLocationData(result.data) !== false) {
-          const points = result.data.map((point) => [
-            point.latitude,
-            point.longitude,
-            point.vin,
-          ]);
-          setMarkers(points);
-          return points;
-        }
-        return [];
-      })
-      .catch((error) => logger.warn(error.stack));
+    if (props.vin) {
+      // if a vin is specified, get its location from vehicle state
+      return getState(accessToken, props.vin)
+        .then(async (stateResult) => {
+          if (stateResult.data?.location) {
+            if (ValidateLocationData(stateResult.data.location) !== false) {
+              const points = [[
+                stateResult.data.location.latitude,
+                stateResult.data.location.longitude,
+                props.vin,
+              ]];
+              setMarkers(points);
+              return points;
+            }
+          }
+          return [];
+        })
+        .catch((error) => logger.warn(error.stack));
+    } else {
+      // if no vin is specified, use getLocations
+      return getLocations(accessToken)
+        .then(async (result) => {
+          if (result.data != null && ValidateLocationData(result.data) !== false) {
+            const points = result.data.map((point) => [
+              point.latitude,
+              point.longitude,
+              point.vin,
+            ]);
+            setMarkers(points);
+            return points;
+          }
+          return [];
+        })
+        .catch((error) => logger.warn(error.stack));
+    }
   };
 
   const centerAroundMarkers = (points) => {
@@ -154,7 +175,7 @@ const Component = () => {
 
   return (
     <>
-      <DropDownList label="Zoom To" data={zoomLocations} classes={classes} onChange={focusMap} value={lastMapCenter} />
+      {!props.vin && <DropDownList label="Zoom To" data={zoomLocations} classes={classes} onChange={focusMap} value={lastMapCenter} />}
       <MapContainer
         center={center}
         zoom={zoom}
@@ -222,9 +243,9 @@ const CenterFocus = ({ center, zoom }) => {
   return null;
 };
 
-const VehicleMap = () => (
+const VehicleMap = (props) => (
   <VehicleProvider>
-    <Component />
+    <Component vin={props.vin} />
   </VehicleProvider>
 );