CEC-2211 Add CAN signals component to map (#182)

Fix timer memory leak

src/components/VehicleMap/popup.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import Dialog from "@material-ui/core/Dialog";
 import MuiDialogTitle from "@material-ui/core/DialogTitle";
 import IconButton from "@material-ui/core/IconButton";
@@ -7,31 +7,47 @@ import Typography from "@material-ui/core/Typography";
 
 import useStyles from "../useStyles";
 import DigitalTwin from "../DigitalTwin";
+import clsx from "clsx";
+import CANSignals from "../Cars/CANSignals";
 
 const VehiclePopUp = (props) => {
   const classes = useStyles();
-  const { vin, online, battery, doors, location, windows, onClose } = props;
+  const [viewCAN, setViewCAN] = useState(false);
+  const { vin, online, onClose } = props;
+
+  const toggleView = (e) => {
+    e.preventDefault();
+    setViewCAN(!viewCAN);
+  };
+
+  const close = (e) => {
+    setViewCAN(false);
+    onClose(e);
+  };
 
   return (
     <Dialog
       fullWidth
       classes={{ paper: classes.popUp }}
       open={true}
-      onClose={onClose}
+      onClose={close}
     >
       <DialogTitle align="center" onClose={onClose}>
         {vin}
+        {"  "}
+        <span
+          className={clsx(classes.pseudoLink, classes.breadcrumbs)}
+          onClick={toggleView}
+        >
+          {viewCAN ? "View Digital Twin" : "View CAN Signals"}
+        </span>
       </DialogTitle>
       <div align="center" className={classes.popUpContent}>
         <p>
           <b>Connected</b>: {online.toString()}
         </p>
-        {online && <DigitalTwin {...props} />}
-        {(!online ||
-          (battery == null &&
-            doors == null &&
-            location == null &&
-            windows == null)) && <p>No vehicle data to display.</p>}
+        {viewCAN && <CANSignals vin={vin} />}
+        {!viewCAN && <DigitalTwin {...props} />}
       </div>
     </Dialog>
   );