CEC-287 Car connection status (#59) (#60)

* Car connection status

* Formatting

src/components/Cars/CarSelectionTable/index.jsx

@@ -10,6 +10,7 @@ import {
   TablePagination,
   TableRow,
 } from "@material-ui/core";
+import CheckCircleIcon from "@material-ui/icons/CheckCircle";
 
 import { useVehicleContext } from "../../Contexts/VehicleContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
@@ -133,6 +134,14 @@ const CarSelectionTable = (props) => {
                   />
                 </TableCell>
                 <TableCell align="center">
+                  {row.connected && (
+                    <>
+                      <CheckCircleIcon
+                        style={{ color: "Green", fontSize: 12 }}
+                      />
+                      <span>&nbsp;</span>
+                    </>
+                  )}
                   <Link to={`/vehicle-status/${row.vin}`}>{row.vin}</Link>
                 </TableCell>
                 <TableCell align="center">{row.model}</TableCell>
@@ -177,6 +186,7 @@ CarSelectionTable.propTypes = {
   selected: PropTypes.array.isRequired,
   onSelect: PropTypes.func.isRequired,
   onSelectAll: PropTypes.func.isRequired,
+  connectionStatus: PropTypes.bool,
 };
 
 export default CarSelectionTable;

src/components/Contexts/VehicleContext.jsx

@@ -39,11 +39,11 @@ export const VehicleProvider = ({ children }) => {
       if (result.error) {
         setVehicles([]);
         throw new Error(`Get vehicles error. ${result.message}`);
-      } else {
-        setVehicles(result.data);
-        if (result.total) {
-          setTotalVehicles(result.total);
-        }
+      }
+      await addConnections(result.data, token);
+      setVehicles(result.data);
+      if (result.total) {
+        setTotalVehicles(result.total);
       }
     } finally {
       setBusy(false);
@@ -96,6 +96,30 @@ export const VehicleProvider = ({ children }) => {
     }
   };
 
+  const addConnections = async (cars, token) => {
+    const vins = cars.map((car) => car.vin);
+    const result = await api.getConnections(vins, token);
+
+    if (result.error) {
+      throw new Error(`Get connections error. ${result.message}`);
+    }
+    cars.forEach((car) => {
+      car.connected = result[car.vin] || false;
+    });
+  };
+
+  const getConnections = async (vins, token) => {
+    try {
+      setBusy(true);
+      const result = await api.getConnections(vins, token);
+      if (result.error)
+        throw new Error(`Get connections error. ${result.message}`);
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  };
+
   return (
     <VehicleContext.Provider
       value={{
@@ -109,6 +133,7 @@ export const VehicleProvider = ({ children }) => {
         getModels,
         getYears,
         sendCommand,
+        getConnections,
       }}
     >
       {children}

src/components/Contexts/VehicleContext.test.jsx

@@ -133,14 +133,12 @@ describe("VehicleContext", () => {
   });
 });
 
-const expectedVehicleData = {
-  data: [
-    { vin: "3C4PDCBG0ET127145" },
-    { vin: "1G1FP87S3GN100062" },
-    { vin: "1HGCG325XYA062256" },
-    { vin: "1J4GZ78YXWC160024" },
-    { vin: "2C3CCAAG8CH222800" },
-    { vin: "KNADM4A39C6028108" },
-    { vin: "1G11C5SL9FF153507" },
-  ],
-};
+const expectedVehicleData = [
+  { vin: "3C4PDCBG0ET127145", connected: true },
+  { vin: "1G1FP87S3GN100062", connected: true },
+  { vin: "1HGCG325XYA062256", connected: true },
+  { vin: "1J4GZ78YXWC160024", connected: true },
+  { vin: "2C3CCAAG8CH222800", connected: true },
+  { vin: "KNADM4A39C6028108", connected: true },
+  { vin: "1G11C5SL9FF153507", connected: true },
+];

src/components/Contexts/__mocks__/VehicleContext.jsx

@@ -25,11 +25,20 @@ export const useVehicleContext = () => ({
   getYears: jest.fn(() => {
     years = [2023, 2024];
   }),
-  sendCommand: jest.fn((vin, command, parameters, token) => ({
-    vin,
+  sendCommand: jest.fn((vins, command, parameters, token) => ({
+    vins,
     command,
     parameters,
   })),
+  getConnections: jest.fn((vins, token) => {
+    const result = {};
+
+    vins.forEach((vin) => {
+      result[vin] = true;
+    });
+
+    return result;
+  }),
 });
 
 export const setBusy = (val) => {

src/services/__mocks__/vehicles.js

@@ -10,7 +10,7 @@ const data = [
 ];
 
 const vehiclesAPI = {
-  getVehicles: async (search, token) => { return { data: { data } }; },
+  getVehicles: async (search, token) => { return { data }; },
   addVehicle: async (vehicle, token) => { 
     data.push(vehicle);
     return vehicle;
@@ -30,6 +30,15 @@ const vehiclesAPI = {
       vin, command, parameters
     }
   },
+  getConnections: async (vins, token) => {
+    const result = {};
+
+    vins.forEach(vin => {
+      result[vin] = true;
+    });
+
+    return result;
+  }
 };
 
 export default vehiclesAPI;

src/services/vehicles.js

@@ -39,6 +39,15 @@ const vehiclesAPI = {
     }),
   })
     .then(fetchRespHandler),
+  
+  getConnections: async (vins, token) => {
+    const u = `${API_ENDPOINT}/carsconnected?vins=${vins.join(",")}`
+    return  fetch(u, {
+      method: "GET",
+      headers: Object.assign({ "Content-Type": "application/json" }, getAuthHeaderOptions(token)),
+    })
+      .then(fetchRespHandler)
+  },
 };
 
 export default vehiclesAPI;