CEC-231 Bulk car selection control (#38)

* Bulk car selection control

* Tweak control alignment

src/components/CarUpdates/Deploy/index.jsx

@@ -1,36 +1,20 @@
 import React, { useEffect, useState } from "react";
 import { useParams, Redirect } from "react-router";
-import {
-  Button,
-  Chip,
-  FormControl,
-  Input,
-  InputLabel,
-  MenuItem,
-  Select,
-  TextField,
-  Typography,
-  useTheme,
-} from "@material-ui/core";
+import { Button, TextField, Typography } from "@material-ui/core";
 
 import {
   UpdatesProvider,
   useUpdatesContext,
 } from "../../Contexts/UpdatesContext";
-import {
-  useVehicleContext,
-  VehicleProvider,
-} from "../../Contexts/VehicleContext";
 import { useUserContext } from "../../Contexts/UserContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
+import CarSelection from "../../Cars/CarSelection";
 import useStyles from "../../useStyles";
 import { tsLocalDateTimeString } from "../../../utils/dates";
-import menuItemStyle from "../../menuItemStyle";
 
 const MainForm = () => {
   const { packageid } = useParams();
   const { getPackages, createCarUpdates, packages, busy } = useUpdatesContext();
-  const { getVehicles, vehicles } = useVehicleContext();
   const {
     token: {
       idToken: { jwtToken: token },
@@ -46,10 +30,7 @@ const MainForm = () => {
   const [selectedVehicles, setSelectedVehicles] = useState([]);
   const [redirect, setRedirect] = useState("");
   const classes = useStyles();
-  const theme = useTheme();
-  const handleVehiclesChange = (event) => {
-    setSelectedVehicles(event.target.value);
-  };
+
   const onSubmit = async (event) => {
     try {
       event.preventDefault();
@@ -73,17 +54,12 @@ const MainForm = () => {
       setMessage(e.message);
     }
   };
-  const handleCarOpen = async () => {
-    try {
-      await getVehicles(null, token);
-    } catch (e) {
-      setMessage(e.message);
-    }
-  };
+
   useEffect(() => {
     getData();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [token]);
+
   useEffect(() => {
     if (!packages || packages.length === 0) return;
     var data = packages[0];
@@ -160,43 +136,7 @@ const MainForm = () => {
           fullWidth
           placeholder="Release Notes URL"
         />
-        <FormControl
-          className={classes.formControl}
-          variant="outlined"
-          fullWidth
-        >
-          <InputLabel htmlFor="vehicles">Vehicles</InputLabel>
-          <Select
-            label="Vehicles"
-            placeholder="Select vehicles"
-            id="vehicles"
-            name="vehicles"
-            multiple
-            className={classes.menuProps}
-            variant="outlined"
-            onOpen={handleCarOpen}
-            onChange={handleVehiclesChange}
-            value={selectedVehicles}
-            input={<Input id="select-multiple-chip" />}
-            renderValue={(selected) => (
-              <div className={classes.chips}>
-                {selected.map((value) => (
-                  <Chip key={value} label={value} className={classes.chip} />
-                ))}
-              </div>
-            )}
-          >
-            {vehicles.map((vehicle) => (
-              <MenuItem
-                key={vehicle.vin}
-                value={vehicle.vin}
-                style={menuItemStyle(vehicle, selectedVehicles, theme)}
-              >
-                {vehicle.vin}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
+        <CarSelection onSelection={setSelectedVehicles} />
         <Button
           type="submit"
           disabled={busy}
@@ -214,11 +154,9 @@ const MainForm = () => {
 };
 
 const UpdatePackageDeployForm = () => (
-  <VehicleProvider>
-    <UpdatesProvider>
-      <MainForm />
-    </UpdatesProvider>
-  </VehicleProvider>
+  <UpdatesProvider>
+    <MainForm />
+  </UpdatesProvider>
 );
 
 export default UpdatePackageDeployForm;