mirror of
https://github.com/johndoe6345789/AutoMetabuilder.git
synced 2026-04-24 13:54:59 +00:00
- 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>
39 lines
834 B
TypeScript
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 };
|
|
}
|