CEC-4543 - Add location to digital twin map (#376)

package-lock.json

@@ -41,6 +41,7 @@
         "react-router-dom": "^5.3.0",
         "react-router-hash-link": "^2.4.3",
         "react-scripts": "5.0.0",
+        "semver-compare": "^1.0.0",
         "usehooks-ts": "^2.7.1",
         "web-vitals": "^2.1.4",
         "webpack": "^5.74.0"
@@ -15130,6 +15131,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/semver-compare": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
+      "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow=="
+    },
     "node_modules/send": {
       "version": "0.17.2",
       "resolved": "https://registry.npmjs.org/send/-/send-0.17.2.tgz",
@@ -28020,6 +28026,11 @@
         "lru-cache": "^6.0.0"
       }
     },
+    "semver-compare": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
+      "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow=="
+    },
     "send": {
       "version": "0.17.2",
       "resolved": "https://registry.npmjs.org/send/-/send-0.17.2.tgz",

src/components/Contexts/VehicleContext.jsx

@@ -105,7 +105,7 @@ export const VehicleProvider = ({ children }) => {
       setBusy(true);
       const result = await api.getLocations(token);
       if (result.error)
-        throw new Error(`Get locations vehicle paths error. ${result.message}`);
+        throw new Error(`Get locations error. ${result.message}`);
       return result;
     } finally {
       setBusy(false);

src/components/Contexts/__mocks__/VehicleContext.jsx

@@ -153,9 +153,9 @@ export const useVehicleContext = () => ({
     .fn()
     .mockResolvedValue({
       // tests only pass without mocking the data here
-      // '3FAFP13P71R199267': [],
       // '3FAFP13P31R199430': [[16.891136999999986, 26.832352999999955], [56.891136999999986, 66.832352999999955], [26.891136999999986, 36.832352999999955]],
       // '3FAFP13P71R199060': [[36.891136999999986, 46.832352999999955], [76.891136999999986, 16.832352999999955]],
+      // '3FAFP13P61R199390': [],
     }),
   getModels: jest.fn(() => {
     models = ["Ocean", "PEAR"];

src/components/VehiclePathsMap/index.jsx

@@ -7,7 +7,7 @@ import useStyles from "../useStyles";
 import GrayMarkerIcon from "../../assets/gray-marker.png";
 import GreenMarkerIcon from "../../assets/green-marker.png";
 import { logger } from "../../services/monitoring";
-import { ValidateLocationVehiclePathsData } from "../../utils/locations";
+import { ValidateLocationData, ValidateLocationVehiclePathsData } from "../../utils/locations";
 import { useUserContext } from "../Contexts/UserContext";
 import { useVehicleContext, VehicleProvider } from "../Contexts/VehicleContext";
 import { VehiclePopUp } from "../VehicleMap/popup";
@@ -54,23 +54,32 @@ const ComponentVehiclePathsMap = (props) => {
     vinsParam += props.lookbackHours
 
     return getLocationsVehiclePaths(accessToken, vinsParam)
-      .then((result) => {
+      .then(async (result) => {
         let resultArray = Object.entries(result)
         const points = []
 
         // validate each location
         for (let vinLocations of resultArray) {
-          // if there are points for the vin; skip if empty points array
-          if (vinLocations[0] && vinLocations[1] && vinLocations[1][0]) {
-            let path = []
-            path[0] = vinLocations[0]
-            path[1] = []
+          if (vinLocations[0]) {
+            let path = [];
+            path[0] = vinLocations[0];
+            path[1] = [];
+            if (vinLocations[1] && vinLocations[1][0]) {
               for (let location of vinLocations[1]) {
                 if (ValidateLocationVehiclePathsData(location) !== false) {
                   path[1].push(location);
                 }
               }
-            points.push(path)
+            } else {
+              await getState(token, vinLocations[0]).then((stateResult) => {
+                if (stateResult.data && stateResult.data.location) {
+                  if (ValidateLocationData(stateResult.data.location) !== false) {
+                    path[1].push([stateResult.data.location.latitude, stateResult.data.location.longitude]);
+                  }
+                }
+              });
+            }
+            points.push(path);
           }
         }
 

src/services/__mocks__/vehiclesAPI.js

@@ -134,6 +134,7 @@ const vehiclesAPI = {
     return {
       '3FAFP13P31R199430': [[16.891136999999986, 26.832352999999955], [56.891136999999986, 66.832352999999955], [26.891136999999986, 36.832352999999955]],
       '3FAFP13P71R199060': [[36.891136999999986, 46.832352999999955], [76.891136999999986, 16.832352999999955]],
+      '3FAFP13P61R199390': [],
     };
   },
   getVehicle: async (vin) => {