refactor: create separate type for diagram node and edge and extract …

…util function in separate file
twentyhq · Aug 22, 2024 · e92a156 · e92a156
1 parent 5e4efb4
commit e92a156
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 48 deletions.
diff --git a/packages/twenty-front/src/modules/workflow/types/WorkflowDiagram.ts b/packages/twenty-front/src/modules/workflow/types/WorkflowDiagram.ts
@@ -1,8 +1,11 @@
 import { Edge, Node } from '@xyflow/react';
 
+export type WorkflowDiagramNode = Node<WorkflowDiagramNodeData>;
+export type WorkflowDiagramEdge = Edge;
+
 export type WorkflowDiagram = {
-  nodes: Array<Node<WorkflowDiagramNodeData>>;
-  edges: Array<Edge>;
+  nodes: Array<WorkflowDiagramNode>;
+  edges: Array<WorkflowDiagramEdge>;
 };
 
 export type WorkflowDiagramStepNodeData = {

diff --git a/packages/twenty-front/src/modules/workflow/utils/addCreateStepNodes.ts b/packages/twenty-front/src/modules/workflow/utils/addCreateStepNodes.ts
@@ -0,0 +1,41 @@
+import {
+  WorkflowDiagram,
+  WorkflowDiagramEdge,
+  WorkflowDiagramNode,
+} from '@/workflow/types/WorkflowDiagram';
+import { MarkerType } from '@xyflow/react';
+import { v4 } from 'uuid';
+
+export const addCreateStepNodes = ({ nodes, edges }: WorkflowDiagram) => {
+  const nodesWithoutTargets = nodes.filter((node) =>
+    edges.every((edge) => edge.source !== node.id),
+  );
+
+  const updatedNodes: Array<WorkflowDiagramNode> = nodes.slice();
+  const updatedEdges: Array<WorkflowDiagramEdge> = edges.slice();
+
+  for (const node of nodesWithoutTargets) {
+    const newCreateStepNode: WorkflowDiagramNode = {
+      id: v4(),
+      type: 'create-step',
+      data: {},
+      position: { x: 0, y: 0 },
+    };
+
+    updatedNodes.push(newCreateStepNode);
+
+    updatedEdges.push({
+      id: v4(),
+      source: node.id,
+      target: newCreateStepNode.id,
+      markerEnd: {
+        type: MarkerType.ArrowClosed,
+      },
+    });
+  }
+
+  return {
+    nodes: updatedNodes,
+    edges: updatedEdges,
+  };
+};
diff --git a/packages/twenty-front/src/pages/workflows/WorkflowShowPage.tsx b/packages/twenty-front/src/pages/workflows/WorkflowShowPage.tsx
@@ -7,15 +7,15 @@ import { PageTitle } from '@/ui/utilities/page-title/PageTitle';
 import { showPageWorkflowDiagramState } from '@/workflow/states/showPageWorkflowDiagramState';
 import {
   WorkflowDiagram,
-  WorkflowDiagramNodeData,
+  WorkflowDiagramEdge,
+  WorkflowDiagramNode,
 } from '@/workflow/types/WorkflowDiagram';
 import { getOrganizedDiagram } from '@/workflow/utils/getOrganizedDiagram';
 import {
   applyEdgeChanges,
   applyNodeChanges,
   Background,
   EdgeChange,
-  Node,
   NodeChange,
   ReactFlow,
 } from '@xyflow/react';
@@ -57,7 +57,7 @@ const LoadedWorkflow = ({ diagram }: { diagram: WorkflowDiagram }) => {
   );
 
   const handleNodesChange = (
-    nodeChanges: Array<NodeChange<Node<WorkflowDiagramNodeData>>>,
+    nodeChanges: Array<NodeChange<WorkflowDiagramNode>>,
   ) => {
     setShowPageWorkflowDiagram((diagram) => {
       if (isDefined(diagram) === false) {
@@ -73,7 +73,9 @@ const LoadedWorkflow = ({ diagram }: { diagram: WorkflowDiagram }) => {
     });
   };
 
-  const handleEdgesChange = (edgeChanges: Array<EdgeChange>) => {
+  const handleEdgesChange = (
+    edgeChanges: Array<EdgeChange<WorkflowDiagramEdge>>,
+  ) => {
     setShowPageWorkflowDiagram((diagram) => {
       if (isDefined(diagram) === false) {
         throw new Error(

diff --git a/packages/twenty-front/src/pages/workflows/WorkflowShowPageEffect.tsx b/packages/twenty-front/src/pages/workflows/WorkflowShowPageEffect.tsx
@@ -10,9 +10,11 @@ import {
 } from '@/workflow/types/Workflow';
 import {
   WorkflowDiagram,
-  WorkflowDiagramNodeData,
+  WorkflowDiagramEdge,
+  WorkflowDiagramNode,
 } from '@/workflow/types/WorkflowDiagram';
-import { Edge, MarkerType, Node } from '@xyflow/react';
+import { addCreateStepNodes } from '@/workflow/utils/addCreateStepNodes';
+import { MarkerType } from '@xyflow/react';
 import { useEffect, useMemo } from 'react';
 import { useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-ui';
@@ -28,8 +30,8 @@ const EMPTY_FLOW_DATA: WorkflowDiagram = {
 };
 
 const generateWorklowDiagram = (trigger: WorkflowTrigger): WorkflowDiagram => {
-  const nodes: Array<Node<WorkflowDiagramNodeData>> = [];
-  const edges: Array<Edge> = [];
+  const nodes: Array<WorkflowDiagramNode> = [];
+  const edges: Array<WorkflowDiagramEdge> = [];
 
   // Helper function to generate nodes and edges recursively
   const processNode = (
@@ -107,43 +109,6 @@ const getFlowLastVersion = (
   return generateWorklowDiagram(lastVersion.trigger);
 };
 
-const addCreateStepNodes = (
-  nodes: Array<Node<WorkflowDiagramNodeData>>,
-  edges: Array<Edge>,
-) => {
-  const nodesWithoutTargets = nodes.filter((node) =>
-    edges.every((edge) => edge.source !== node.id),
-  );
-
-  const updatedNodes: typeof nodes = nodes.slice();
-  const updatedEdges: typeof edges = edges.slice();
-
-  for (const node of nodesWithoutTargets) {
-    const newCreateStepNode: Node<WorkflowDiagramNodeData> = {
-      id: v4(),
-      type: 'create-step',
-      data: {},
-      position: { x: 0, y: 0 },
-    };
-
-    updatedNodes.push(newCreateStepNode);
-
-    updatedEdges.push({
-      id: v4(),
-      source: node.id,
-      target: newCreateStepNode.id,
-      markerEnd: {
-        type: MarkerType.ArrowClosed,
-      },
-    });
-  }
-
-  return {
-    nodes: updatedNodes,
-    edges: updatedEdges,
-  };
-};
-
 export const WorkflowShowPageEffect = ({
   workflowId,
 }: WorkflowShowPageEffectProps) => {
@@ -168,7 +133,7 @@ export const WorkflowShowPageEffect = ({
   );
 
   const flowWithCreateStepNodes = useMemo(
-    () => addCreateStepNodes(flowLastVersion.nodes, flowLastVersion.edges),
+    () => addCreateStepNodes(flowLastVersion),
     [flowLastVersion],
   );