Flow page refactored

space_flow/src/pages/FlowPage/index.tsx

@@ -2,7 +2,6 @@ import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import ReactFlow, {
   Background,
   Controls,
-  Edge,
   addEdge,
   useEdgesState,
   useNodesState,
@@ -12,72 +11,79 @@ import ExtraSidebar from "./components/extraSidebarComponent";
 import Chat from "../../components/chatComponent";
 import GenericNode from "../../CustomNodes/GenericNode";
 import connection from "./components/connection";
-import { getConnectedNodes } from "../../utils";
 import ChatInputNode from "../../CustomNodes/ChatInputNode";
 import ChatOutputNode from "../../CustomNodes/ChatOutputNode";
 import InputNode from "../../CustomNodes/InputNode";
 import BooleanNode from "../../CustomNodes/BooleanNode";
 import { alertContext } from "../../contexts/alertContext";
+
 const nodeTypes = {
-  genericNode:GenericNode,
+  genericNode: GenericNode,
   inputNode: InputNode,
-  chatInputNode:ChatInputNode,
-  chatOutputNode:ChatOutputNode,
+  chatInputNode: ChatInputNode,
+  chatOutputNode: ChatOutputNode,
   booleanNode: BooleanNode,
 };
 
-export default function FlowPage() {
-  
+var _ = require("lodash");
 
+export default function FlowPage() {
   const reactFlowWrapper = useRef(null);
 
-  let id = 0;
-  
-  const getId = () => `dndnode_${id++}`;
+  const getId = () => `dndnode_${_.uniqueId()}`;
 
   const { setExtraComponent, setExtraNavigation } = useContext(locationContext);
-  const {setErrorData} = useContext(alertContext);
-
-  useEffect(() => {
-    setExtraComponent(<ExtraSidebar />);
-    setExtraNavigation({title: "Nodes"})
-  }, [setExtraComponent, setExtraNavigation]);
+  const { setErrorData } = useContext(alertContext);
 
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-  const onEdgesChangeMod = useCallback((s) => {
-    onEdgesChange(s);
-    setNodes((x) => {
-      let newX = _.cloneDeep(x);
-      return newX;
-    })
-  }, [_, onEdgesChange, setNodes])
   const [reactFlowInstance, setReactFlowInstance] = useState(null);
-  var _ = require('lodash');
-  const onConnect = useCallback(
-    (params) => {
-      /* console.log(params)
-      console.log(reactFlowInstance.getNodes())
-      console.log(getConnectedNodes(params,reactFlowInstance.getNodes())) */
-      setEdges((eds) => addEdge({...params,className:"animate-pulse"}, eds))
+
+  useEffect(() => {
+    setExtraComponent(<ExtraSidebar />);
+    setExtraNavigation({ title: "Nodes" });
+  }, [setExtraComponent, setExtraNavigation]);
+
+  const onEdgesChangeMod = useCallback(
+    (s) => {
+      onEdgesChange(s);
       setNodes((x) => {
         let newX = _.cloneDeep(x);
         return newX;
-      })
+      });
     },
-    [reactFlowInstance]
+    [onEdgesChange, setNodes]
   );
+
+  const onConnect = useCallback(
+    (params) => {
+      setEdges((eds) =>
+        addEdge({ ...params, className: "animate-pulse" }, eds)
+      );
+      setNodes((x) => {
+        let newX = _.cloneDeep(x);
+        return newX;
+      });
+    },
+    [setEdges, setNodes]
+  );
+
   const onDragOver = useCallback((event) => {
     event.preventDefault();
     event.dataTransfer.dropEffect = "move";
   }, []);
+
   const onDrop = useCallback(
     (event) => {
       event.preventDefault();
-      
+
       const reactflowBounds = reactFlowWrapper.current.getBoundingClientRect();
       let data = JSON.parse(event.dataTransfer.getData("json"));
-      if(data.name !== 'chatInput' || (data.name === 'chatInput' && !reactFlowInstance.getNodes().some((n) => (n.type === 'chatInputNode')))){
+      if (
+        data.name !== "chatInput" ||
+        (data.name === "chatInput" &&
+          !reactFlowInstance.getNodes().some((n) => n.type === "chatInputNode"))
+      ) {
         const position = reactFlowInstance.project({
           x: event.clientX - reactflowBounds.left,
           y: event.clientY - reactflowBounds.top,
@@ -85,18 +91,39 @@ export default function FlowPage() {
         let newId = getId();
         const newNode = {
           id: newId,
-          type: data.name === 'str' ? 'inputNode' : (data.name === 'chatInput' ? 'chatInputNode' : (data.name === 'chatOutput' ? 'chatOutputNode' : (data.name === 'bool' ? 'booleanNode' : 'genericNode'))),
+          type:
+            data.name === "str"
+              ? "inputNode"
+              : data.name === "chatInput"
+              ? "chatInputNode"
+              : data.name === "chatOutput"
+              ? "chatOutputNode"
+              : data.name === "bool"
+              ? "booleanNode"
+              : "genericNode",
           position,
-          data: { ...data, id: newId, input: '', enabled: false, reactFlowInstance, onDelete: () => {setNodes(reactFlowInstance.getNodes().filter((n)=>n.id !== newId))} },
+          data: {
+            ...data,
+            id: newId,
+            input: "",
+            enabled: false,
+            reactFlowInstance,
+            onDelete: () => {
+              setNodes(
+                reactFlowInstance.getNodes().filter((n) => n.id !== newId)
+              );
+            },
+          },
         };
         setNodes((nds) => nds.concat(newNode));
       } else {
-        setErrorData({title: 'Error creating node', list:["There can't be more than one chat input."]})
+        setErrorData({
+          title: "Error creating node",
+          list: ["There can't be more than one chat input."],
+        });
       }
-      
-      
     },
-    [reactFlowInstance]
+    [reactFlowInstance, setErrorData, setNodes]
   );
 
   return (
@@ -116,7 +143,7 @@ export default function FlowPage() {
         <Background />
         <Controls></Controls>
       </ReactFlow>
-      <Chat reactFlowInstance={reactFlowInstance}/>
+      <Chat reactFlowInstance={reactFlowInstance} />
     </div>
   );
 }