CEC-179 Car download progress (#32)

* Display download progress

* Change default

* Fix

* Fix

* Update readme

* Update readme and defaults
Fix Dockerfile

src/components/CarUpdates/Status/index.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useParams } from "react-router";
 import {
+  LinearProgress,
   Table,
   TableBody,
   TableCell,
@@ -25,16 +26,17 @@ import VehicleStatus from "../../Cars/StatusModal";
 const MainForm = () => {
   const { packageid } = useParams();
   const classes = useStyles();
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useState(25);
   const [pageIndex, setPageIndex] = useState(0);
   const [viewVIN, setViewVIN] = useState(null);
-
   const {
     getCarUpdates,
     carUpdates,
     totalCarUpdates,
     getPackages,
     packages,
+    startMonitor,
+    stopMonitor,
   } = useUpdatesContext();
   const { setMessage } = useStatusContext();
   const {
@@ -54,6 +56,7 @@ const MainForm = () => {
 
   useEffect(() => {
     try {
+      stopMonitor();
       getCarUpdates(
         {
           packageid,
@@ -68,6 +71,19 @@ const MainForm = () => {
     // eslint-disable-next-line
   }, [pageIndex, pageSize, token]);
 
+  useEffect(() => {
+    try {
+      if (carUpdates.length === 0) return;
+      startMonitor(token);
+    } catch (e) {
+      setMessage(e.message);
+    }
+    return () => {
+      stopMonitor();
+    };
+    // eslint-disable-next-line
+  }, [carUpdates]);
+
   const handleChangePageIndex = (event, newIndex) => {
     setPageIndex(newIndex);
   };
@@ -113,7 +129,15 @@ const MainForm = () => {
                     {row.vin}
                   </span>
                 </TableCell>
-                <TableCell align="center">{row.status}</TableCell>
+                <TableCell align="center">
+                  {row.status}
+                  {row.progress > 0 && (
+                    <LinearProgress
+                      variant="determinate"
+                      value={row.progress}
+                    />
+                  )}
+                </TableCell>
                 <TableCell align="center">
                   {LocalDateTimeString(row.created)}
                 </TableCell>