CEC-222, CEC-214 Send car commands and log filtering (#41)

* Send car commands

* Log filter control

* Fix message format

* Move VehicleContext

src/components/Cars/SendCommand/index.jsx

@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { FormControl, IconButton, InputLabel, Select } from "@material-ui/core";
+import SendIcon from "@material-ui/icons/Send";
+
+import { useVehicleContext } from "../../Contexts/VehicleContext";
+import commands from "../../../services/commands";
+import useStyles from "../../useStyles";
+import { useUserContext } from "../../Contexts/UserContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+
+const SendCommand = ({ vin }) => {
+  const classes = useStyles();
+  const { sendCommand, busy } = useVehicleContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+  const { setMessage } = useStatusContext();
+  const [command, setCommand] = useState("");
+
+  const changeHandler = (e) => {
+    setCommand(e.target.value);
+  };
+
+  const clickHandler = async (e) => {
+    try {
+      await sendCommand(vin, command, token);
+      setMessage(`Sent command to ${vin}`);
+    } catch (e) {
+      setMessage(e.message);
+    }
+  };
+
+  useEffect(() => {
+    if (!commands || commands.length === 0) return;
+    setCommand(commands[0].value);
+  }, []);
+
+  return (
+    <div className={classes.form}>
+      <FormControl className={classes.formControlInline} variant="outlined">
+        <InputLabel htmlFor="send-command" style={{ backgroundColor: "White" }}>
+          Command
+        </InputLabel>
+        <Select
+          native
+          value={command}
+          variant="outlined"
+          inputProps={{
+            name: "send-command",
+            id: "send-command",
+          }}
+          onChange={changeHandler}
+        >
+          {commands.map((item) => (
+            <option key={item.value} value={item.value}>
+              {item.label}
+            </option>
+          ))}
+        </Select>
+      </FormControl>
+      <IconButton
+        color="primary"
+        aria-label="send command"
+        component="span"
+        onClick={clickHandler}
+        disabled={busy}
+      >
+        <SendIcon fontSize="large" />
+      </IconButton>
+    </div>
+  );
+};
+
+SendCommand.propTypes = {
+  vin: PropTypes.string.isRequired,
+};
+
+export default SendCommand;