Merge development (#86)

src/components/Controls/CarECUsTable/index.jsx

@@ -13,7 +13,6 @@ import { LocalDateTimeString } from "../../../utils/dates";
 import TableHeaderSortable from "../../Table/HeaderSortable";
 import { useVehicleContext } from "../../Contexts/VehicleContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
-import useStyles from "../../useStyles";
 import { logger } from "../../../services/monitoring";
 
 const tableColumns = [
@@ -59,10 +58,9 @@ const tableColumns = [
   },
 ];
 
-const CarECUsTable = ({ vin, token }) => {
+const CarECUsTable = ({ vin, token, classes }) => {
   const [ecus, setECUs] = useState([]);
   const [total, setTotal] = useState(0);
-  const classes = useStyles();
   const [pageSize, setPageSize] = useState(10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("ecu");

src/components/Controls/CarUpdateStatusProgress/index.jsx

@@ -1,14 +1,11 @@
 import React, { useState, useEffect } from "react";
-import Typography from "@material-ui/core/Typography";
 import { CheckCircle, RadioButtonUnchecked, Error } from "@material-ui/icons";
+import Typography from "@material-ui/core/Typography";
 import clsx from "clsx";
 
 import CircularProgress from "../CircularProgress";
-import useStyles from "../../useStyles";
-
-const Progress = ({ value }) => {
-  const classes = useStyles();
 
+const Progress = ({ value, classes }) => {
   if (value === 100)
     return (
       <CheckCircle
@@ -24,14 +21,13 @@ const Progress = ({ value }) => {
   return <RadioButtonUnchecked className={classes.progressIcon} />;
 };
 
-const CarUpdateStatus = ({ status }) => {
-  const classes = useStyles();
-  const [received, setReceived] = useState(-1);
+const CarUpdateStatus = ({ status, classes }) => {
   const [approval, setApproval] = useState(-1);
-  const [precondition, setPrecondition] = useState(-1);
+  const [cleanup, setCleanup] = useState(-1);
   const [download, setDownload] = useState(-1);
   const [install, setInstall] = useState(-1);
-  const [cleanup, setCleanup] = useState(-1);
+  const [precondition, setPrecondition] = useState(-1);
+  const [received, setReceived] = useState(-1);
   const [updated, setUpdated] = useState(-1);
 
   useEffect(() => {
@@ -39,10 +35,15 @@ const CarUpdateStatus = ({ status }) => {
     if (!status) return;
     // update previous steps
     switch (status.msg) {
-      case "cleanup_success":
+      case "manifest_succeeded":
         setUpdated(100);
+      case "cleanup_success":
+        setCleanup(100);
       case "package_install_complete":
         setInstall(100);
+      case "install_approval_received":
+        setApproval(100);
+      case "install_approval_await":
       case "install_start":
       case "installing":
       case "install_complete":
@@ -53,10 +54,10 @@ const CarUpdateStatus = ({ status }) => {
       case "downloading":
       case "download_complete":
       case "download_error":
-      case "install_approval_received":
-        setApproval(100);
+      case "package_download_start":
       case "requirements_succeeded":
         setPrecondition(100);
+      case "manifest_accepted":
       case "manifest_received":
         setReceived(100);
     }
@@ -90,35 +91,35 @@ const CarUpdateStatus = ({ status }) => {
       }}
     >
       <div className={classes.textCenterAlign}>
-        <Progress value={100} />
+        <Progress value={100} classes={classes} />
         <Typography>Pending</Typography>
       </div>
       <div className={classes.textCenterAlign}>
-        <Progress value={received} />
+        <Progress value={received} classes={classes} />
         <Typography>Recieved</Typography>
       </div>
       <div className={classes.textCenterAlign}>
-        <Progress value={approval} />
-        <Typography>Approved</Typography>
-      </div>
-      <div className={classes.textCenterAlign}>
-        <Progress value={precondition} />
+        <Progress value={precondition} classes={classes} />
         <Typography>Precondition</Typography>
       </div>
       <div className={classes.textCenterAlign}>
-        <Progress value={download} />
+        <Progress value={download} classes={classes} />
         <Typography>Download</Typography>
       </div>
       <div className={classes.textCenterAlign}>
-        <Progress value={install} />
+        <Progress value={approval} classes={classes} />
+        <Typography>Approved</Typography>
+      </div>
+      <div className={classes.textCenterAlign}>
+        <Progress value={install} classes={classes} />
         <Typography>Install</Typography>
       </div>
       <div className={classes.textCenterAlign}>
-        <Progress value={cleanup} />
+        <Progress value={cleanup} classes={classes} />
         <Typography>Clean up</Typography>
       </div>
       <div className={classes.textCenterAlign}>
-        <Progress value={updated} />
+        <Progress value={updated} classes={classes} />
         <Typography>Updated</Typography>
       </div>
     </div>

src/components/Controls/SendCommand/index.jsx

@@ -49,16 +49,16 @@ const SendCommand = ({ vins }) => {
       } else {
         setMessage(`Sent command to ${vins.length} cars`);
       }
-    } catch (e) {
-      setMessage(e.message);
-      logger.error(e.stack);
+    } catch (error) {
+      setMessage(error.message);
+      logger.error(error.stack);
     }
   };
 
-  const getParameters = (command) => {
+  const getParameters = (cmd) => {
     for (let i = 0, len = commands.length; i < len; i += 1) {
       const item = commands[i];
-      if (item.value === command) {
+      if (item.value === cmd) {
         if (!item.parameters) {
           break;
         }

src/components/Controls/SubListItem/index.jsx

@@ -1,8 +1,7 @@
-import React from "react";
+import React, { useState } from "react";
 import { TableCell, TableRow, TextField } from "@material-ui/core";
 import { Link } from "react-router-dom";
 import DeleteIcon from "@material-ui/icons/Delete";
-import { useState } from "react";
 
 const DataDisplay = ({ data, option, onDelete }) => {
   const [text, setText] = useState(data[option.field]);