CEC-4594: add bulk actions to fleet (#368)

* CEC-4594: add bulk actions to fleet

* add reject case

src/components/BulkActions/index.jsx

@@ -0,0 +1,84 @@
+import { useEffect, useState } from "react";
+import TransformModal from "../TransformModal";
+import DropDownButton from "../Controls/DropDownButton";
+import { useUserContext } from "../Contexts/UserContext";
+import { useStatusContext } from "../Contexts/StatusContext";
+import useAddTags from "./useAddTags";
+import useUpdateConfig from "./useUpdateConfig";
+
+const transformArrayToCSV = (arr) => arr.join(", ");
+
+export default function BulkActions({
+  vins = [],
+}) {
+  const [vinCSV, setVinCSV] = useState(transformArrayToCSV(vins));
+  const [active, setActive] = useState(null);
+  const actions = [
+    {
+      name: "Update Configs",
+      disabled: vins.length === 0,
+      trigger: () => setActive("updateConfig"),
+    },
+    {
+      name: "Add Tags",
+      disabled: vins.length === 0,
+      trigger: () => setActive("addTags"),
+    },
+  ];
+
+  const updateConfig = useUpdateConfig();
+  const addTags = useAddTags();
+
+  const { setMessage } = useStatusContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+
+  const handleUpdateConfig = () => {
+    updateConfig.submit(vins, token)
+      .then(() => {
+        setMessage(`${vins.length} vehicles updated.`);
+      })
+      .catch((error) => {
+        setMessage(error.message);
+      });
+  }
+
+  const handleAddTags = () => {
+    addTags.submit(vins, token)
+      .then(() => setMessage(`Added ${addTags.data.tags.value.length} tags to ${vins.length} vehicles.`))
+      .catch((error) => setMessage(error.message));
+  }
+
+  const handleClose = () => setActive(null);
+
+  useEffect(() => {
+    setVinCSV(transformArrayToCSV(vins));
+  }, [vins]);
+
+  return (
+    <>
+      <DropDownButton actions={actions} payload={[vins]} />
+      <TransformModal
+        title="Update Config"
+        body={`You are updating the config for the following VINs: ${vinCSV}.`}
+        close={handleClose}
+        open={active === "updateConfig"}
+        data={updateConfig.data}
+        setData={updateConfig.setData}
+        submit={handleUpdateConfig}
+      />
+      <TransformModal
+        title="Add Tags"
+        body={`You are adding tags for the following VINs: ${vinCSV}.`}
+        close={handleClose}
+        open={active === "addTags"}
+        data={addTags.data}
+        setData={addTags.setData}
+        submit={handleAddTags}
+      />
+    </>
+  );
+}