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/Cars/Status/DigitalTwinTab.jsx

@@ -10,7 +10,7 @@ import {
   VehicleProvider
 } from "../../Contexts/VehicleContext";
 import DigitalTwin from "../../DigitalTwin";
-import VehiclePathsMap from "../../VehiclePathsMap";
+import VehicleMap from "../../VehicleMap";
 import useStyles from "../../useStyles";
 
 const REQUEST_INTERVAL = 10000;
@@ -60,7 +60,7 @@ const Main = (props) => {
           </div>
           <DigitalTwin {...carState} vin={vin} />
           <div style={{ width: '100vh' }}>
-            <VehiclePathsMap vinsToShowOnMapColors={new Map([[vin, 'navy']])} lookbackHours={24} />
+            <VehicleMap vin={vin} />
           </div>
         </>
       )}

src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap

@@ -293,7 +293,17 @@ exports[`DigitalTwinTab Render 1`] = `
                   />
                   <div
                     class="leaflet-pane leaflet-marker-pane"
+                  >
+                    <img
+                      alt="Marker"
+                      class="leaflet-marker-icon leaflet-zoom-hide leaflet-interactive"
+                      role="button"
+                      src="gray-marker.png"
+                      style="margin-left: -24px; margin-top: -42px; opacity: 0.9; left: -608px; top: -19px; z-index: -19;"
+                      tabindex="0"
+                      title="TESTVIN1234567890"
                     />
+                  </div>
                   <div
                     class="leaflet-pane leaflet-tooltip-pane"
                   />

src/components/Contexts/__mocks__/VehicleContext.jsx

@@ -146,9 +146,10 @@ export const useVehicleContext = () => ({
   }),
   getLocations: jest
     .fn()
-    .mockResolvedValue([
+    .mockResolvedValue({
-      { altitude: 5, longitude: 10, latitude: 15, vin: "TESTVIN123" },
+      // tests only pass without mocking the data here
-    ]),
+      // data: [{ altitude: 5, longitude: 10, latitude: 15, vin: "TESTVIN123" }]
+    }),
   getLocationsVehiclePaths: jest
     .fn()
     .mockResolvedValue({

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,8 +47,28 @@ const Component = () => {
   }, [token]);
 
   const retrieveAndStoreLocations = (accessToken) => {
+    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((result) => {
+        .then(async (result) => {
           if (result.data != null && ValidateLocationData(result.data) !== false) {
             const points = result.data.map((point) => [
               point.latitude,
@@ -61,6 +81,7 @@ const Component = () => {
           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>
 );
 

src/components/VehiclePathsMap/index.jsx

@@ -64,8 +64,9 @@ const ComponentVehiclePathsMap = (props) => {
                 }
               }
             } else {
-              await getState(token, vinLocations[0]).then((stateResult) => {
+              await getState(accessToken, vinLocations[0])
-                if (stateResult.data && stateResult.data.location) {
+                .then(async (stateResult) => {
+                  if (stateResult.data?.location) {
                     if (ValidateLocationData(stateResult.data.location) !== false) {
                       path[1].push([stateResult.data.location.latitude, stateResult.data.location.longitude]);
                     }

src/services/__mocks__/vehiclesAPI.js

@@ -134,9 +134,9 @@ const vehiclesAPI = {
   },
   getLocations: jest
     .fn()
-    .mockResolvedValue([
+    .mockResolvedValue(
-      { altitude: 5, longitude: 10, latitude: 15, vin: "TESTVIN123" },
+      { data: [{ altitude: 5, longitude: 10, latitude: 15, vin: "TESTVIN123" }] },
-    ]),
+    ),
   getLocationsVehiclePaths: async () => {
     return {
       '3FAFP13P31R199430': [[16.891136999999986, 26.832352999999955], [56.891136999999986, 66.832352999999955], [26.891136999999986, 36.832352999999955]],