CEC-231 Bulk car selection control (#38)

* Bulk car selection control

* Tweak control alignment

src/components/Cars/CarSelection/index.jsx

@@ -0,0 +1,136 @@
+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 handleChangeModel = (event) => {
+    setModel(event.target.value);
+  };
+  const handleChangeYear = (event) => {
+    setYear(event.target.value);
+  };
+
+  useEffect(() => {
+    if (!token) return;
+    (async () => {
+      try {
+        await getModels(token);
+        await getYears(token);
+      } catch (e) {}
+    })();
+    // eslint-disable-next-line
+  }, [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 }, token);
+    // eslint-disable-next-line
+  }, [model, year]);
+
+  useEffect(() => {
+    if (!props.onSelection) return;
+    const vins = vehicles.map((item) => item.vin);
+    props.onSelection(vins);
+    // eslint-disable-next-line
+  }, [vehicles]);
+
+  return (
+    <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>
+      <div className={classes.labelInline}>
+        {vehicles.length === 0
+          ? "No Cars Selected"
+          : vehicles.length === 1
+          ? "1 Car Selected"
+          : `${vehicles.length} Cars Selected`}
+      </div>
+    </div>
+  );
+};
+
+const CarSelection = (props) => (
+  <VehicleProvider>
+    <Control {...props} />
+  </VehicleProvider>
+);
+
+CarSelection.propTypes = {
+  onSelection: PropTypes.func,
+};
+
+export default CarSelection;