output and delay node use canvas store to push updates

Author: jsajal

src/components/molecules/flow/graph/Graph.js

@@ -1,5 +1,6 @@
 // assumption is that apis are giving json as output
 
+import useCanvasStore from 'stores/CanvasStore';
 import useCollectionStore from 'stores/CollectionStore';
 import { useTabStore } from 'stores/TabStore';
 import { computeAuthNode } from './compute/authnode';
@@ -69,7 +70,7 @@ class Graph {
 
       if (node.type === 'outputNode') {
         this.logs.push(`Output: ${JSON.stringify(prevNodeOutputData)}`);
-        node.data.setOutput(prevNodeOutputData);
+        useCanvasStore.getState().setOutputNode(node.id, prevNodeOutputData);
         result = ['Success', node, prevNodeOutput];
       }
 
@@ -94,7 +95,7 @@ class Graph {
       }
 
       if (node.type === 'authNode') {
-        this.auth = computeAuthNode(node.data.auth, this.env);
+        this.auth = node.data.type ? computeAuthNode(node.data, this.env) : undefined;
         result = ['Success', node, prevNodeOutput];
       }
 
@@ -134,7 +135,7 @@ class Graph {
     // reset every output node for a fresh run
     this.nodes.forEach((node) => {
       if (node.type === 'outputNode') {
-        node.data.setOutput(undefined);
+        useCanvasStore.getState().unSetOutputNode(node.id);
       }
     });
     this.graphRunNodeOutput = {};

src/components/molecules/flow/graph/compute/requestnode.js

@@ -38,7 +38,7 @@ const formulateRequest = (node, finalUrl, variablesDict, auth, logs) => {
     data: requestData,
   };
 
-  if (auth.type === 'basic-auth') {
+  if (auth && auth.type === 'basic-auth') {
     options.auth = {};
     options.auth.username = auth.username;
     options.auth.password = auth.password;

src/components/molecules/flow/nodes/DelayNode.js

@@ -1,21 +1,17 @@
 import * as React from 'react';
 import { PropTypes } from 'prop-types';
 import FlowNode from 'components/atoms/flow/FlowNode';
+import useCanvasStore from 'stores/CanvasStore';
 
-/**
- * I have commented the code which is not required but do check it once
- */
-const DelayNode = ({ data }) => {
-  const [value, setValue] = React.useState(data.delay ? data.delay : 0);
-  data.delay = value;
+const DelayNode = ({ id, data }) => {
+  const setDelayNodeValue = useCanvasStore((state) => state.setDelayNodeValue);
 
   /**
    * ToDo: Implement Debouncing for this function
    */
   const handleDelayInMsInputChange = (event) => {
     event.preventDefault();
-    const delayInMs = event.target.value;
-    setValue(delayInMs);
+    setDelayNodeValue(id, event.target.value);
   };
 
   return (

src/components/molecules/flow/nodes/OutputNode.js

@@ -2,11 +2,7 @@ import * as React from 'react';
 import { PropTypes } from 'prop-types';
 import FlowNode from 'components/atoms/flow/FlowNode';
 
-const OutputNode = ({ data }) => {
-  const [output, setOutput] = React.useState(undefined);
-
-  data.setOutput = setOutput;
-
+const OutputNode = ({ id, data }) => {
   return (
     <FlowNode
       title='Output'
@@ -18,7 +14,7 @@ const OutputNode = ({ data }) => {
       <div>
         <textarea
           name='output-text'
-          value={output ? JSON.stringify(output, undefined, 4) : 'Run flow to see data'}
+          value={data.output ? JSON.stringify(data.output, undefined, 4) : 'Run flow to see data'}
           placeholder='Run flow to see data'
           className='nodrag nowheel min-h-80 w-full min-w-60 rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-xs text-gray-900 outline-blue-300 focus:border-blue-100 focus:ring-blue-100'
         />

src/stores/CanvasStore.js

@@ -217,6 +217,46 @@ const useCanvasStore = create((set, get) => ({
           };
         }
 
+        return node;
+      }),
+    });
+  },
+  setDelayNodeValue: (nodeId, value) => {
+    set({
+      nodes: get().nodes.map((node) => {
+        if (node.id === nodeId) {
+          // it's important to create a new object here, to inform React Flow about the cahnges
+          node.data = {
+            delay: value,
+          };
+        }
+
+        return node;
+      }),
+    });
+  },
+  setOutputNode: (nodeId, output) => {
+    set({
+      nodes: get().nodes.map((node) => {
+        if (node.id === nodeId) {
+          // it's important to create a new object here, to inform React Flow about the cahnges
+          node.data = {
+            output,
+          };
+        }
+
+        return node;
+      }),
+    });
+  },
+  unSetOutputNode: (nodeId) => {
+    set({
+      nodes: get().nodes.map((node) => {
+        if (node.id === nodeId) {
+          // it's important to create a new object here, to inform React Flow about the cahnges
+          node.data = {};
+        }
+
         return node;
       }),
     });