Merge CEC-394 Car update log (#82)

src/components/Cars/List/index.jsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from "react";
+import { Grid } from "@material-ui/core";
+import AddCircleIcon from "@material-ui/icons/AddCircle";
+import { Link } from "react-router-dom";
+import clsx from "clsx";
+
+import { VehicleProvider } from "../../Contexts/VehicleContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import useStyles from "../../useStyles";
+import SendCommand from "../../Controls/SendCommand";
+import SearchField from "../../Controls/SearchField";
+import CarSelectionTable from "../../Controls/CarSelectionTable";
+import { logger } from "../../../services/monitoring";
+
+const MainForm = () => {
+  const classes = useStyles();
+  const [selected, setSelected] = useState([]);
+  const [search, setSearch] = useState("");
+  const { setTitle, setSitePath } = useStatusContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+
+  const handleSearch = (search) => {
+    setSelected([]);
+    setSearch(search);
+  };
+
+  const handleSelectAll = (cars) => {
+    setSelected(cars);
+  };
+
+  const handleSelect = (event, key) => {
+    try {
+      let newSelected;
+      if (event.target.checked) {
+        newSelected = [...selected];
+        newSelected.push(key);
+      } else {
+        newSelected = selected.filter((vin) => vin !== key);
+      }
+      setSelected(newSelected);
+    } catch (e) {
+      logger.warn(e.stack);
+    }
+  };
+
+  useEffect(() => {
+    setTitle("Vehicles");
+    setSitePath([]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Grid container className={classes.root} spacing={2}>
+        <Grid item md={4} className={classes.textJustifyAlign}>
+          <Link to="/vehicle-add">
+            <AddCircleIcon fontSize="large" />
+          </Link>
+          <div
+            className={classes.labelInline}
+          >{`${selected.length} Selected`}</div>
+        </Grid>
+        <Grid item md={4} className={classes.textCenterAlign}>
+          <SearchField classes={classes} onSearch={handleSearch} />
+        </Grid>
+        <Grid item md={4} className={classes.textRightAlign}>
+          <SendCommand vins={selected} />
+        </Grid>
+      </Grid>
+      <CarSelectionTable
+        classes={classes}
+        token={token}
+        search={{ search }}
+        selected={selected}
+        onSelect={handleSelect}
+        onSelectAll={handleSelectAll}
+      />
+    </div>
+  );
+};
+
+const VehiclesList = () => (
+  <VehicleProvider>
+    <MainForm />
+  </VehicleProvider>
+);
+
+export default VehiclesList;