CEC-4640: add bulk add to fleet (#384)

* refactor bulkactions component

* refactor bulk actions

* update dom tests

* add addToFleet hook

* make signal optional

* implement code splitting

* add deps

* remove test label

src/components/BulkActions/index.jsx

@@ -1,84 +1,86 @@
-import { useEffect, useState } from "react";
-import TransformModal from "../TransformModal";
+import { useEffect, useState, useRef, Suspense, lazy } from "react";
 import DropDownButton from "../Controls/DropDownButton";
-import { useUserContext } from "../Contexts/UserContext";
-import { useStatusContext } from "../Contexts/StatusContext";
-import useAddTags from "./useAddTags";
-import useUpdateConfig from "./useUpdateConfig";
+import { Modal } from "./Modal";
 
-const transformArrayToCSV = (arr) => arr.join(", ");
+// Code-splitting individual actions
+// https://react.dev/reference/react/lazy
+const AddTags = lazy(() => import("./actions/AddTags"));
+const AddToFleet = lazy(() => import("./actions/AddToFleet"));
+const DeleteVehicles = lazy(() => import("./actions/DeleteVehicles"));
+const UpdateConfig = lazy(() => import("./actions/UpdateConfig"));
 
 export default function BulkActions({
   vins = [],
+  actions = [],
 }) {
-  const [vinCSV, setVinCSV] = useState(transformArrayToCSV(vins));
+  const [title, setTitle] = useState("Action");
   const [active, setActive] = useState(null);
-  const actions = [
-    {
-      name: "Update Configs",
-      disabled: vins.length === 0,
-      trigger: () => setActive("updateConfig"),
-    },
+  const activeRef = useRef();
+
+  const filteredActions = [
     {
+      id: "addTags",
       name: "Add Tags",
-      disabled: vins.length === 0,
+      disabled: false,
       trigger: () => setActive("addTags"),
     },
-  ];
-
-  const updateConfig = useUpdateConfig();
-  const addTags = useAddTags();
-
-  const { setMessage } = useStatusContext();
-  const {
-    token: {
-      idToken: { jwtToken: token },
+    {
+      id: "addToFleet",
+      name: "Add To Fleet",
+      disabled: false,
+      trigger: () => setActive("addToFleet"),
     },
-  } = useUserContext();
+    {
+      id: "deleteVehicles",
+      name: "Delete",
+      disabled: false,
+      trigger: () => setActive("deleteVehicles"),
+    },
+    {
+      id: "updateConfig",
+      name: "Update Config",
+      disabled: false,
+      trigger: () => setActive("updateConfig"),
+    }
+  ].filter((action) => actions.includes(action.id));
 
-  const handleUpdateConfig = () => {
-    updateConfig.submit(vins, token)
-      .then(() => {
-        setMessage(`${vins.length} vehicles updated.`);
-      })
-      .catch((error) => {
-        setMessage(error.message);
-      });
+  const payload = {
+    vins,
+    vinCSV: vins.join(", "),
+    ref: activeRef
+  };
+
+  const handleClose = () => {
+    setActive(null);
   }
 
-  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 handleSubmit = () => {
+    activeRef.current.submit();
+    handleClose();
   }
 
-  const handleClose = () => setActive(null);
-
   useEffect(() => {
-    setVinCSV(transformArrayToCSV(vins));
-  }, [vins]);
+    setTitle(filteredActions.find((action) => active === action.id)?.name || "Action");
+  }, [active, filteredActions]);
 
   return (
     <>
-      <DropDownButton actions={actions} payload={[vins]} />
-      <TransformModal
-        title="Update Config"
-        body={`You are updating the config for the following VINs: ${vinCSV}.`}
+      <DropDownButton actions={filteredActions} />
+      <Modal
+        title={title}
+        open={!!active}
         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}
-      />
+        submit={handleSubmit}
+      >
+        <Suspense fallback={<div>Loading...</div>}>
+          <section>
+            {active === "addTags" && <AddTags {...payload} />}
+            {active === "addToFleet" && <AddToFleet {...payload} />}
+            {active === "deleteVehicles" && <DeleteVehicles {...payload} />}
+            {active === "updateConfig" && <UpdateConfig {...payload} />}
+          </section>
+        </Suspense>
+      </Modal>
     </>
-  );
+  )
 }