From ab37cd598f2730e175fbe64beb2300eda36d45bb Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Fri, 25 Jun 2021 10:17:03 -0700
Subject: [PATCH] CEC-287 Add connection status to vehicles page (#63)

* Add connection status to vehicles page

* ConnectedIcon control

* Handle Style
---
 .../Cars/CarSelectionTable/index.jsx          | 14 +++++--------
 src/components/Cars/List/index.jsx            |  5 +++++
 .../Controls/ConnectedIcon/index.jsx          | 21 +++++++++++++++++++
 3 files changed, 31 insertions(+), 9 deletions(-)
 create mode 100644 src/components/Controls/ConnectedIcon/index.jsx

diff --git a/src/components/Cars/CarSelectionTable/index.jsx b/src/components/Cars/CarSelectionTable/index.jsx
index 2550b8e..b37d2ba 100644
--- a/src/components/Cars/CarSelectionTable/index.jsx
+++ b/src/components/Cars/CarSelectionTable/index.jsx
@@ -10,13 +10,13 @@ import {
   TablePagination,
   TableRow,
 } from "@material-ui/core";
-import CheckCircleIcon from "@material-ui/icons/CheckCircle";
 
 import { useVehicleContext } from "../../Contexts/VehicleContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import { LocalDateTimeString } from "../../../utils/dates";
 import TableHeaderSortable from "../../Table/HeaderSortable";
 import { logger } from "../../../services/monitoring";
+import ConnectedIcon from "../../Controls/ConnectedIcon";
 
 const tableColumns = [
   {
@@ -138,14 +138,10 @@ const CarSelectionTable = (props) => {
                   />
                 </TableCell>
                 <TableCell align="center">
-                  {row.connected && (
-                    <>
-                      <CheckCircleIcon
-                        style={{ color: "Green", fontSize: 12 }}
-                      />
-                      <span>&nbsp;</span>
-                    </>
-                  )}
+                  <ConnectedIcon
+                    connected={row.connected}
+                    style={{ marginRight: 5 }}
+                  />
                   <Link to={`/vehicle-status/${row.vin}`}>{row.vin}</Link>
                 </TableCell>
                 <TableCell align="center">{row.model}</TableCell>
diff --git a/src/components/Cars/List/index.jsx b/src/components/Cars/List/index.jsx
index 0eaec4e..957ebf7 100644
--- a/src/components/Cars/List/index.jsx
+++ b/src/components/Cars/List/index.jsx
@@ -21,6 +21,7 @@ import { LocalDateTimeString } from "../../../utils/dates";
 import TableHeaderSortable from "../../Table/HeaderSortable";
 import SearchField from "../../Controls/SearchField";
 import { logger } from "../../../services/monitoring";
+import ConnectedIcon from "../../Controls/ConnectedIcon";
 
 const tableColumns = [
   {
@@ -132,6 +133,10 @@ const MainForm = () => {
           {vehicles.map((row) => (
             <TableRow key={row.vin}>
               <TableCell align="center">
+                <ConnectedIcon
+                  connected={row.connected}
+                  style={{ marginRight: 5 }}
+                />
                 <Link to={`/vehicle-status/${row.vin}`}>{row.vin}</Link>
               </TableCell>
               <TableCell align="center">{row.model}</TableCell>
diff --git a/src/components/Controls/ConnectedIcon/index.jsx b/src/components/Controls/ConnectedIcon/index.jsx
new file mode 100644
index 0000000..475892d
--- /dev/null
+++ b/src/components/Controls/ConnectedIcon/index.jsx
@@ -0,0 +1,21 @@
+import React from "react";
+import PropTypes from "prop-types";
+import CheckCircleIcon from "@material-ui/icons/CheckCircle";
+
+const ConnectedIcon = (props) => {
+  if (props.connected) {
+    return (
+      <span style={props.style}>
+        <CheckCircleIcon style={{ color: "Green", fontSize: 12 }} />
+      </span>
+    );
+  }
+
+  return null;
+};
+
+ConnectedIcon.propTypes = {
+  connected: PropTypes.bool.isRequired,
+};
+
+export default ConnectedIcon;