Merge development (#86)

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>