CEC-381 Fix install progress (#77)

* Fix install progress

* Remove unused components and inline styles

* Update test

* errors are not the final update state

* Remove max width for main container

* Progress starts at 0

src/components/Cars/CarSelection/index.jsx

@@ -1,158 +0,0 @@
-import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
-import { FormControl, InputLabel, Select } from "@material-ui/core";
-
-import {
-  useVehicleContext,
-  VehicleProvider,
-} from "../../Contexts/VehicleContext";
-import { useUserContext } from "../../Contexts/UserContext";
-import useStyles from "../../useStyles";
-
-const Control = (props) => {
-  const classes = useStyles();
-  const { models, years, vehicles, getModels, getYears, getVehicles } =
-    useVehicleContext();
-  const {
-    token: {
-      idToken: { jwtToken: token },
-    },
-  } = useUserContext();
-  const [model, setModel] = useState("");
-  const [year, setYear] = useState(-1);
-  const [trim, setTrim] = useState("");
-
-  const handleChangeModel = (event) => {
-    setModel(event.target.value);
-  };
-  const handleChangeYear = (event) => {
-    setYear(event.target.value);
-  };
-  const handleChangeTrim = (event) => {
-    setTrim(event.target.value);
-  };
-
-  useEffect(() => {
-    if (!token) return;
-    (async () => {
-      try {
-        await getModels(token);
-        await getYears(token);
-      } catch (e) {}
-    })();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [token]);
-
-  useEffect(() => {
-    if (!models || models.length === 0) return;
-    setModel(models[0]);
-  }, [models]);
-
-  useEffect(() => {
-    if (!years || years.length === 0) return;
-    setYear(years[0]);
-  }, [years]);
-
-  useEffect(() => {
-    if (model === null || year === -1) return;
-    getVehicles({ model, year, trim }, token);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [model, year, trim]);
-
-  useEffect(() => {
-    if (!props.onSelection) return;
-    const vins = vehicles.map((item) => item.vin);
-    props.onSelection(vins);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [vehicles]);
-
-  return (
-    <div className={classes.paper}>
-      <div className={classes.form}>
-        <FormControl className={classes.formControlInline} variant="outlined">
-          <InputLabel htmlFor="car-model" style={{ backgroundColor: "White" }}>
-            Model
-          </InputLabel>
-          <Select
-            native
-            value={model}
-            onChange={handleChangeModel}
-            variant="outlined"
-            inputProps={{
-              name: "car-model",
-              id: "car-model",
-            }}
-          >
-            {models.map((item) => (
-              <option key={item} value={item}>
-                {item}
-              </option>
-            ))}
-          </Select>
-        </FormControl>
-        <FormControl className={classes.formControlInline} variant="outlined">
-          <InputLabel htmlFor="car-year" style={{ backgroundColor: "White" }}>
-            Year
-          </InputLabel>
-          <Select
-            native
-            value={year}
-            onChange={handleChangeYear}
-            variant="outlined"
-            inputProps={{
-              name: "car-year",
-              id: "car-year",
-            }}
-          >
-            {years.map((item) => (
-              <option key={item} value={item}>
-                {item}
-              </option>
-            ))}
-          </Select>
-        </FormControl>
-        <FormControl className={classes.formControlInline} variant="outlined">
-          <InputLabel htmlFor="car-trim" style={{ backgroundColor: "White" }}>
-            Trim
-          </InputLabel>
-          <Select
-            native
-            value={year}
-            onChange={handleChangeTrim}
-            variant="outlined"
-            inputProps={{
-              name: "car-trim",
-              id: "car-trim",
-            }}
-          >
-            {years.map((item) => (
-              <option key={item} value={item}>
-                {item}
-              </option>
-            ))}
-          </Select>
-        </FormControl>
-        <div className={classes.labelInline}>
-          {vehicles.length === 0
-            ? "No Cars Selected"
-            : vehicles.length === 1
-            ? "1 Car Selected"
-            : `${vehicles.length} Cars Selected`}
-        </div>
-      </div>
-      <div className={classes.form}></div>
-    </div>
-  );
-};
-
-const CarSelection = (props) => (
-  <VehicleProvider>
-    <Control {...props} />
-  </VehicleProvider>
-);
-
-CarSelection.propTypes = {
-  onSelection: PropTypes.func,
-};
-
-export default CarSelection;

src/components/Cars/CarSelectionTable/index.jsx

@@ -114,7 +114,7 @@ const CarSelectionTable = (props) => {
   }, [pageIndex, pageSize, orderBy, order, search, token]);
 
   return (
-    <div className={classes.paper} style={{ height: 700, width: "100%" }}>
+    <div className={`${classes.paper} ${classes.tableSize}`}>
       <Table>
         <TableHeaderSortable
           classes={classes}

src/components/Cars/SendCommand/index.jsx

@@ -81,7 +81,7 @@ const SendCommand = ({ vins }) => {
         variant="outlined"
         size="small"
       >
-        <InputLabel htmlFor="send-command" style={{ backgroundColor: "White" }}>
+        <InputLabel htmlFor="send-command" className={classes.whiteBackground}>
           Command
         </InputLabel>
         <Select
@@ -108,7 +108,7 @@ const SendCommand = ({ vins }) => {
       >
         <InputLabel
           htmlFor="send-parameter"
-          style={{ backgroundColor: "White" }}
+          className={classes.whiteBackground}
         >
           Parameter
         </InputLabel>

src/components/Cars/SendCommandBulk/index.jsx

@@ -54,9 +54,9 @@ const MainForm = () => {
   }, []);
 
   return (
-    <div className={classes.paper} style={{ height: 700, width: "100%" }}>
+    <div className={`${classes.paper} ${classes.tableSize}`}>
       <Grid container className={classes.root} spacing={2}>
-        <Grid item md={4} style={{ textAlign: "justify" }}>
+        <Grid item md={4} className={classes.textJustifyAlign}>
           <Link to="/vehicle-add">
             <AddCircleIcon fontSize="large" />
           </Link>
@@ -64,11 +64,11 @@ const MainForm = () => {
             className={classes.labelInline}
           >{`${selected.length} Selected`}</div>
         </Grid>
-        <Grid item md={4} style={{ textAlign: "center" }}>
+        <Grid item md={4} className={classes.textCenterAlign}>
           <SearchField classes={classes} onSearch={handleSearch} />
         </Grid>
-        <Grid item md={4} style={{ textAlign: "right" }}>
-          <SendCommand vins={selected} style={{ display: "flex" }} />
+        <Grid item md={4} className={classes.textRightAlign}>
+          <SendCommand vins={selected} />
         </Grid>
       </Grid>
       <CarSelectionTable