Refactor: Change onConnection function to zustand store

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -78,6 +78,7 @@ export default function Page({
   const setLastCopiedSelection = useFlowStore(
     (state) => state.setLastCopiedSelection
   );
+  const onConnect = useFlowStore((state) => state.onConnect);
 
   const position = useRef({ x: 0, y: 0 });
   const [lastSelection, setLastSelection] =
@@ -215,43 +216,6 @@ export default function Page({
     }
   }, []);
 
-  const onConnect = useCallback(
-    (connection: Connection) => {
-      let newEdges:Edge[] = []
-      setEdges((oldEdges) => {
-        newEdges = addEdge(
-          {
-            ...connection,
-            data: {
-              targetHandle: scapeJSONParse(connection.targetHandle!),
-              sourceHandle: scapeJSONParse(connection.sourceHandle!),
-            },
-            style: { stroke: "#555" },
-            className:
-              ((scapeJSONParse(connection.targetHandle!) as targetHandleType)
-                .type === "Text"
-                ? "stroke-foreground "
-                : "stroke-foreground ") + " stroke-connection",
-            animated:
-              (scapeJSONParse(connection.targetHandle!) as targetHandleType)
-                .type === "Text",
-          },
-          oldEdges
-        );
-        return newEdges;
-
-      })
-      useFlowsManagerStore
-        .getState()
-        .autoSaveCurrentFlow(
-          nodes,
-          newEdges,
-          reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 }
-        );
-    },
-    [nodes, setEdges, reactFlowInstance, addEdge]
-  );
-
   const onDrop = useCallback(
     (event: React.DragEvent) => {
       event.preventDefault();

src/frontend/src/stores/flowStore.ts

@@ -263,7 +263,40 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
   setFilterEdge: (newState) => {
     set({ getFilterEdge: newState });
   },
-  getFilterEdge: []
+  getFilterEdge: [],
+  onConnect: (connection) => {
+    let newEdges: Edge[] = []
+    get().setEdges((oldEdges) => {
+      newEdges = addEdge(
+        {
+          ...connection,
+          data: {
+            targetHandle: scapeJSONParse(connection.targetHandle!),
+            sourceHandle: scapeJSONParse(connection.sourceHandle!),
+          },
+          style: { stroke: "#555" },
+          className:
+            ((scapeJSONParse(connection.targetHandle!) as targetHandleType)
+              .type === "Text"
+              ? "stroke-foreground "
+              : "stroke-foreground ") + " stroke-connection",
+          animated:
+            (scapeJSONParse(connection.targetHandle!) as targetHandleType)
+              .type === "Text",
+        },
+        oldEdges
+      );
+      return newEdges;
+
+    })
+    useFlowsManagerStore
+      .getState()
+      .autoSaveCurrentFlow(
+        get().nodes,
+        newEdges,
+        get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 }
+      );
+  },
 }));
 
 export default useFlowStore;

src/frontend/src/types/zustand/flow/index.ts

@@ -1,4 +1,5 @@
 import {
+  Connection,
   Edge,
   Node,
   OnEdgesChange,
@@ -52,4 +53,5 @@ export type FlowStoreType = {
   cleanFlow: () => void;
   setFilterEdge: (newState) => void;
   getFilterEdge: any[];
+  onConnect: (connection: Connection) => void;
 };