Simplify action register hooks

Author: Shellishack

npm-packages/react-api/src/hooks/editor/use-register-action.ts

@@ -5,7 +5,7 @@ import {
   ReceiverHandler,
   TypedVariable,
 } from "@pulse-editor/shared-utils";
-import { useEffect, useRef, useState } from "react";
+import { DependencyList, useEffect, useRef, useState } from "react";
 import useIMC from "../../lib/use-imc";
 
 /**
@@ -17,7 +17,8 @@ import useIMC from "../../lib/use-imc";
  * @param parameters Parameters of the command.
  * @param returns Return values of the command.
  * @param callbackHandler Callback handler function to handle the command.
- * @param isExtReady Whether the extension is ready to receive commands. 
+ * @param deps Dependency list to re-register the action when changed.
+ * @param isExtReady Whether the extension is ready to receive commands.
  * Useful for actions that need to wait for some certain app state to be ready.
  *
  */
@@ -28,7 +29,8 @@ export default function useRegisterAction(
     parameters?: Record<string, TypedVariable>;
     returns?: Record<string, TypedVariable>;
   },
-  callbackHandler?: (args: any) => Promise<string | void>,
+  callbackHandler: (args: any) => Promise<string | void>,
+  deps: DependencyList,
   isExtReady: boolean = true
 ) {
   const { isReady, imc } = useIMC(getReceiverHandlerMap());
@@ -85,8 +87,9 @@ export default function useRegisterAction(
       description: actionInfo.description,
       parameters: actionInfo.parameters ?? {},
       returns: actionInfo.returns ?? {},
+      handler: callbackHandler,
     }));
-  }, [callbackHandler]);
+  }, [...deps]);
 
   async function executeAction(args: any) {
     if (!action.handler) return;

web/components/interface/navigation/menu-dropdown/file-menu.tsx

@@ -1,35 +1,51 @@
 import { useMenuActions } from "@/lib/hooks/use-menu-actions";
-import NavMenuDropdown from "../nav-menu-dropdown";
-import { MenuAction } from "@/lib/types";
-import { useEffect } from "react";
+import { useRegisterMenuAction } from "@/lib/hooks/use-register-menu-action";
 import { useTabViewManager } from "@/lib/hooks/use-tab-view-manager";
 import { ViewModeEnum } from "@pulse-editor/shared-utils";
+import { useEffect, useState } from "react";
 import { v4 } from "uuid";
+import NavMenuDropdown from "../nav-menu-dropdown";
 
 export default function FileMenuDropDown() {
-  const { menuActions, registerMenuAction } = useMenuActions("file");
-  const { createTabView } = useTabViewManager();
+  const { menuActions } = useMenuActions("file");
+  const { createTabView, activeTabView, closeTabView } = useTabViewManager();
 
-  const defaultMenuActions: MenuAction[] = [
+  useRegisterMenuAction(
     {
       name: "New Workflow",
-      actionFunc: async () => {
-        // Trigger new Workflow creation logic
-        await createTabView(ViewModeEnum.Canvas, { viewId: v4() });
-      },
       menuCategory: "file",
       shortcut: "Ctrl+N",
       icon: "add",
       description: "Create a new Workflow",
     },
-  ];
+    async () => {
+      // Trigger new Workflow creation logic
+      await createTabView(ViewModeEnum.Canvas, { viewId: v4() });
+    },
+    [],
+  );
+
+  const [isCloseWorkflowEnabled, setIsCloseWorkflowEnabled] = useState(false);
+  useRegisterMenuAction(
+    {
+      name: "Close Workflow",
+      menuCategory: "file",
+      shortcut: "Ctrl+C",
+      icon: "close",
+      description: "Close the current workflow",
+    },
+    async () => {
+      if (activeTabView) {
+        closeTabView(activeTabView);
+      }
+    },
+    [activeTabView],
+    isCloseWorkflowEnabled,
+  );
 
-  // Register default menu actions if not already registered
   useEffect(() => {
-    defaultMenuActions.forEach((action) => {
-      registerMenuAction(action);
-    });
-  }, []);
+    setIsCloseWorkflowEnabled(activeTabView !== undefined);
+  }, [activeTabView]);
 
   return <NavMenuDropdown category="File" menuActions={menuActions} />;
 }

web/components/interface/navigation/menu-dropdown/view-menu.tsx

@@ -1,63 +1,57 @@
+import { EditorContext } from "@/components/providers/editor-context-provider";
 import { useMenuActions } from "@/lib/hooks/use-menu-actions";
+import { useRegisterMenuAction } from "@/lib/hooks/use-register-menu-action";
+import { useContext, useEffect, useState } from "react";
 import NavMenuDropdown from "../nav-menu-dropdown";
-import { MenuAction } from "@/lib/types";
-import { useContext, useEffect } from "react";
-import { EditorContext } from "@/components/providers/editor-context-provider";
 
 export default function ViewMenuDropDown() {
   const editorContext = useContext(EditorContext);
-  const { menuActions, registerMenuAction, unregisterMenuAction } =
-    useMenuActions("view");
+  const { menuActions } = useMenuActions("view");
 
-  const defaultMenuActions: MenuAction[] = [];
-
-  // Register default menu actions if not already registered
-  useEffect(() => {
-    console.log("Registering default menu actions");
-    defaultMenuActions.forEach((action) => {
-      registerMenuAction(action); 
-    });
-  }, []);
+  const [isCommandViewerOpen, setIsCommandViewerOpen] = useState(false);
 
-  useEffect(() => {
-    const closeAction: MenuAction = {
+  useRegisterMenuAction(
+    {
       name: "Close Command Viewer",
-      actionFunc: async () => {
-        console.log("Closing command viewer");
-        editorContext?.setEditorStates((prev) => ({
-          ...prev,
-          isCommandViewerOpen: false,
-        }));
-      },
       menuCategory: "view",
       shortcut: "F1",
       icon: "terminal",
       description: "Close the command viewer",
-    };
+    },
+    async () => {
+      console.log("Closing command viewer");
+      editorContext?.setEditorStates((prev) => ({
+        ...prev,
+        isCommandViewerOpen: false,
+      }));
+    },
+    [],
+    isCommandViewerOpen,
+  );
 
-    const openAction: MenuAction = {
+  useRegisterMenuAction(
+    {
       name: "View Command Viewer",
-      actionFunc: async () => {
-        console.log("Opening command viewer");
-        editorContext?.setEditorStates((prev) => ({
-          ...prev,
-          isCommandViewerOpen: true,
-        }));
-      },
       menuCategory: "view",
       shortcut: "F1",
       icon: "terminal",
       description: "View all commands and shortcuts",
-    };
-    if (editorContext?.editorStates.isCommandViewerOpen) {
-      // Register the close action and unregister the open action
-      unregisterMenuAction(openAction);
-      registerMenuAction(closeAction);
-    } else {
-      // Register the open action and unregister the close action
-      unregisterMenuAction(closeAction);
-      registerMenuAction(openAction);
-    }
+    },
+    async () => {
+      console.log("Opening command viewer");
+      editorContext?.setEditorStates((prev) => ({
+        ...prev,
+        isCommandViewerOpen: true,
+      }));
+    },
+    [],
+    !isCommandViewerOpen,
+  );
+
+  useEffect(() => {
+    setIsCommandViewerOpen(
+      editorContext?.editorStates.isCommandViewerOpen ?? false,
+    );
   }, [editorContext?.editorStates.isCommandViewerOpen]);
 
   return <NavMenuDropdown category="View" menuActions={menuActions} />;

web/components/views/canvas/canvas-view.tsx

@@ -1,5 +1,5 @@
 import { useAppInfo } from "@/lib/hooks/use-app-info";
-import { useMenuActions } from "@/lib/hooks/use-menu-actions";
+import { useRegisterMenuAction } from "@/lib/hooks/use-register-menu-action";
 import useWorkflow from "@/lib/hooks/use-workflow";
 import {
   AppInfoModalContent,
@@ -53,7 +53,6 @@ Pulse Editor is a modular, cross-platform, AI-powered creativity platform with f
 
 export default function CanvasView({ config }: { config?: CanvasViewConfig }) {
   const { openAppInfoModal } = useAppInfo();
-  const { registerMenuAction, unregisterMenuAction } = useMenuActions();
 
   const [workflow, setWorkflow] = useState<Workflow | undefined>(undefined);
   const [entryPoint, setEntryPoint] = useState<
@@ -123,79 +122,68 @@ export default function CanvasView({ config }: { config?: CanvasViewConfig }) {
   }, []);
 
   // Register menu actions
-  useEffect(() => {
-    console.log("CanvasView rendered: registering menu actions");
-
-    const menuActions: MenuAction[] = [
-      {
-        name: "Export Workflow",
-        menuCategory: "file",
-        description: "Export the current workflow as a JSON file",
-        shortcut: "Ctrl+Alt+E",
-        actionFunc: async () => {
-          await exportWorkflow();
-        },
-        icon: "download",
-      },
-      {
-        name: "Import Workflow",
-        menuCategory: "file",
-        description: "Import a workflow from a JSON file",
-        shortcut: "Ctrl+Alt+I",
-        actionFunc: async () => {
-          const input = document.createElement("input");
-          input.type = "file";
-          input.accept = "application/json";
-          input.onchange = (e: any) => {
-            const file = e.target.files[0];
-            const reader = new FileReader();
-            reader.onload = (event) => {
-              try {
-                const workflow = JSON.parse(event.target?.result as string);
-                if (workflow) {
-                  setWorkflow(workflow);
-                } else {
-                  alert("Invalid workflow file");
-                }
-              } catch (err) {
-                alert("Error reading workflow file");
-              }
-            };
-            reader.readAsText(file);
-          };
-          input.click();
-        },
-        icon: "upload",
-      },
-    ];
-
-    menuActions.forEach((action) => {
-      registerMenuAction(action);
-    });
+  useRegisterMenuAction(
+    {
+      name: "Export Workflow",
+      menuCategory: "file",
+      description: "Export the current workflow as a JSON file",
+      shortcut: "Ctrl+Alt+E",
 
-    return () => {
-      // Unregister menu actions on unmount
-      menuActions.forEach((action) => {
-        unregisterMenuAction(action);
-      });
-    };
-  }, []);
+      icon: "download",
+    },
 
-  useEffect(() => {
-    const action: MenuAction = {
+    async () => {
+      await exportWorkflow();
+    },
+    [workflow],
+  );
+  useRegisterMenuAction(
+    {
+      name: "Import Workflow",
+      menuCategory: "file",
+      description: "Import a workflow from a JSON file",
+      shortcut: "Ctrl+Alt+I",
+      icon: "upload",
+    },
+    async () => {
+      const input = document.createElement("input");
+      input.type = "file";
+      input.accept = "application/json";
+      input.onchange = (e: any) => {
+        const file = e.target.files[0];
+        const reader = new FileReader();
+        reader.onload = (event) => {
+          try {
+            const workflow = JSON.parse(event.target?.result as string);
+            if (workflow) {
+              setWorkflow(workflow);
+            } else {
+              alert("Invalid workflow file");
+            }
+          } catch (err) {
+            alert("Error reading workflow file");
+          }
+        };
+        reader.readAsText(file);
+      };
+      input.click();
+    },
+    [],
+  );
+  useRegisterMenuAction(
+    {
       name: "Run Workflow",
       menuCategory: "view",
       description:
         "Run the current workflow from the selected or default entry point",
       shortcut: "Ctrl+Alt+R",
-      actionFunc: async () => {
-        await startWorkflow();
-      },
       icon: "play_arrow",
-    };
-
-    registerMenuAction(action, true);
-  }, [entryPoint]);
+    },
+    async () => {
+      await startWorkflow();
+    },
+    [entryPoint],
+  );
 
   // Add or remove nodes when config changes
   useEffect(() => {

web/components/views/canvas/nodes/backend-node/backend-node.tsx

@@ -12,7 +12,7 @@ import CanvasNodeViewLayout from "../app-node/layout";
 const BackendNode = memo((props: any) => {
   const nodeProps = props as Node<AppNodeData>;
 
-  const { config, selectedAction, setSelectedAction }: AppNodeData =
+  const { config, selectedAction, setSelectedAction, isRunning }: AppNodeData =
     nodeProps.data;
   const viewId = config.viewId;
 
@@ -40,6 +40,7 @@ const BackendNode = memo((props: any) => {
           deleteAppViewInCanvasView(viewId);
         },
       }}
+      isRunning={isRunning}
     >
       <BaseAppView viewId={viewId} config={config} />
     </CanvasNodeViewLayout>