Files
AutoMetabuilder/frontend/autometabuilder/hooks/useWorkflowGraph.ts
copilot-swe-agent[bot] 6e9ff896e7 Phase 9: Implement atomic hooks-based workflow canvas components
- Created custom hooks: useWorkflowGraph, useWorkflowPlugins, usePluginSearch, useTabNavigation
- Decomposed canvas logic into: useCanvasNodes, useCanvasEdges, useCanvasDragDrop
- Built atomic node components: NodeHeader, NodeBody, NodePorts
- Created canvas UI components: CanvasInfoPanel, CanvasHintPanel
- Split builder into: LoadingState, ErrorState, WorkflowBuilderHeader, WorkflowBuilderTabs, WorkflowBuilderContent
- Added React Flow for n8n-style visual canvas with drag-and-drop
- All components now under 100 LOC following PROMPT.md guidelines

Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>
2026-01-10 12:25:36 +00:00

39 lines
834 B
TypeScript

import { useEffect, useState } from "react";
import { fetchWorkflowGraph } from "../lib/api";
import { WorkflowGraph } from "../lib/types";
export function useWorkflowGraph() {
const [graph, setGraph] = useState<WorkflowGraph | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string>("");
useEffect(() => {
let alive = true;
setLoading(true);
fetchWorkflowGraph()
.then((data) => {
if (alive) {
setGraph(data);
setError("");
}
})
.catch((err) => {
if (alive) {
setError(String(err));
}
})
.finally(() => {
if (alive) {
setLoading(false);
}
});
return () => {
alive = false;
};
}, []);
return { graph, loading, error };
}