From 2963bbdf538e4457eb0f4ebb5204394170f5c1df Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 19 Oct 2023 16:07:44 -0300
Subject: [PATCH] fix(typesContext.tsx): import createFlowComponent function
 from reactflowUtils to fix compilation error fix(typesContext.tsx): update
 assignment of custom_components in data object to use correct property name
 fix(typesContext.tsx): update assignment of custom_components in data object
 to use correct property value fix(typesContext.tsx): update assignment of
 components in savedComponentsJSON to use createFlowComponent function
 fix(typesContext.tsx): update setData function to use functional update to
 avoid stale state fix(entities/index.ts): update type of components property
 in localStorageUserType to use FlowType fix(flow/index.ts): update property
 name isNode to isComponent in FlowType fix(reactflowUtils.ts): update
 property name isNode to isComponent in createFlowComponent function

---
 src/frontend/src/contexts/typesContext.tsx | 7 +++++--
 src/frontend/src/types/entities/index.ts   | 4 ++--
 src/frontend/src/types/flow/index.ts       | 2 +-
 src/frontend/src/utils/reactflowUtils.ts   | 4 ++--
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/contexts/typesContext.tsx b/src/frontend/src/contexts/typesContext.tsx
index ab0b55c7a..e62f58344 100644
--- a/src/frontend/src/contexts/typesContext.tsx
+++ b/src/frontend/src/contexts/typesContext.tsx
@@ -12,6 +12,7 @@ import { APIClassType, APIKindType } from "../types/api";
 import { localStorageUserType } from "../types/entities";
 import { NodeDataType } from "../types/flow";
 import { typesContextType } from "../types/typesContext";
+import { createFlowComponent } from "../utils/reactflowUtils";
 import {
   checkLocalStorageKey,
   getSetFromObject,
@@ -79,7 +80,9 @@ export function TypesProvider({ children }: { children: ReactNode }) {
             savedComponents!
           );
           Object.keys(components).forEach((key) => {
-            data["custom_components"][key] = components[key].node!;
+            data["custom_components"][key] = (
+              components[key].data?.nodes[0].data! as NodeDataType
+            ).node!;
           });
         }
         setData(data);
@@ -181,7 +184,7 @@ export function TypesProvider({ children }: { children: ReactNode }) {
       }
     }
     component.node!.official = false;
-    components[key] = component;
+    components[key] = createFlowComponent(component);
     savedComponentsJSON.components = components;
     localStorage.setItem(id, JSON.stringify(savedComponentsJSON));
     setData((prev) => {
diff --git a/src/frontend/src/types/entities/index.ts b/src/frontend/src/types/entities/index.ts
index 5900f428a..179debc06 100644
--- a/src/frontend/src/types/entities/index.ts
+++ b/src/frontend/src/types/entities/index.ts
@@ -1,4 +1,4 @@
-import { NodeDataType } from "../flow";
+import { FlowType } from "../flow";
 
 export type sidebarNavigationItemType = {
   name: string;
@@ -8,5 +8,5 @@ export type sidebarNavigationItemType = {
 };
 
 export type localStorageUserType = {
-  components: { [key: string]: NodeDataType };
+  components: { [key: string]: FlowType };
 };
diff --git a/src/frontend/src/types/flow/index.ts b/src/frontend/src/types/flow/index.ts
index bca331c2f..1291b83ce 100644
--- a/src/frontend/src/types/flow/index.ts
+++ b/src/frontend/src/types/flow/index.ts
@@ -7,7 +7,7 @@ export type FlowType = {
   data: ReactFlowJsonObject | null;
   description: string;
   style?: FlowStyleType;
-  isNode?: boolean;
+  isComponent?: boolean;
 };
 export type NodeType = {
   id: string;
diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts
index 1bb6905fc..16ea322ba 100644
--- a/src/frontend/src/utils/reactflowUtils.ts
+++ b/src/frontend/src/utils/reactflowUtils.ts
@@ -1079,9 +1079,9 @@ export function createFlowComponent(nodeData: NodeDataType): FlowType {
       viewport: { x: 1, y: 1, zoom: 1 },
     },
     description: nodeData.node?.description || "",
-    name: nodeData.node?.display_name || "",
+    name: nodeData.node?.display_name || nodeData.type || "",
     id: nodeData.id || "",
-    isNode: true,
+    isComponent: true,
   };
   return flowNode;
 }