From fb52f1368ebbc50fee31b496caaea060050e7039 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 4 Jan 2024 15:22:53 -0300
Subject: [PATCH] feat(flowManagerStore.ts): add flowManagerStore to manage
 nodes and edges in reactflow

The flowManagerStore.ts file is added to the src/frontend/src/stores directory. This file contains the implementation of a custom store called RFState, which manages the state of nodes and edges in a reactflow component. The store provides various functions and callbacks to manipulate and update the nodes and edges.

The RFState interface defines the structure of the store, including the nodes and edges arrays, as well as callbacks for handling changes to nodes and edges.

The useStore hook is created using the create function from the zustand library. It initializes the store with an empty nodes and edges array, and defines callbacks for handling changes to nodes, edges, and connections.

The setEdges and setNodes functions are used to update the nodes and edges arrays in the store.

The deleteNode function removes a node from the nodes array and any associated edges from the edges array.

The deleteEdge function removes an edge from the edges array.

This store can be used in components to access and manipulate the nodes and edges in a reactflow component.
---
 src/frontend/src/stores/flowManagerStore.ts | 62 +++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 src/frontend/src/stores/flowManagerStore.ts

diff --git a/src/frontend/src/stores/flowManagerStore.ts b/src/frontend/src/stores/flowManagerStore.ts
new file mode 100644
index 000000000..e6fd566fc
--- /dev/null
+++ b/src/frontend/src/stores/flowManagerStore.ts
@@ -0,0 +1,62 @@
+import {
+  Connection,
+  Edge,
+  EdgeChange,
+  Node,
+  NodeChange,
+  OnConnect,
+  OnEdgesChange,
+  OnNodesChange,
+  addEdge,
+  applyEdgeChanges,
+  applyNodeChanges,
+} from "reactflow";
+import { create } from "zustand";
+
+type RFState = {
+  nodes: Node[];
+  edges: Edge[];
+  onNodesChange: OnNodesChange;
+  onEdgesChange: OnEdgesChange;
+  onConnect: OnConnect;
+  setEdges: (edges: Edge[]) => void;
+  setNodes: (nodes: Node[]) => void;
+  deleteNode: (nodeId: string) => void;
+  deleteEdge: (edgeId: string) => void;
+};
+
+// this is our useStore hook that we can use in our components to get parts of the store and call actions
+const useStore = create<RFState>((set, get) => ({
+  nodes: [],
+  edges: [],
+  onNodesChange: (changes: NodeChange[]) => {
+    set({
+      nodes: applyNodeChanges(changes, get().nodes),
+    });
+  },
+  onEdgesChange: (changes: EdgeChange[]) => {
+    set({
+      edges: applyEdgeChanges(changes, get().edges),
+    });
+  },
+  onConnect: (connection: Connection) => {
+    set({
+      edges: addEdge(connection, get().edges),
+    });
+  },
+  setEdges: (edges) => set({ edges }),
+  setNodes: (nodes) => set({ nodes }),
+  deleteNode: (nodeId) => {
+    set({
+      nodes: get().nodes.filter((node) => node.id !== nodeId),
+      edges: get().edges.filter((edge) => edge.source !== nodeId),
+    });
+  },
+  deleteEdge: (edgeId) => {
+    set({
+      edges: get().edges.filter((edge) => edge.id !== edgeId),
+    });
+  },
+}));
+
+export default useStore;