Merge pull request #245 from code0-tech/feat/#244

SubFlowValue from NodeFunction doesn't save

Author: nicosammito

src/packages/ce/src/datatype/components/inputs/sub-flow/DataTypeSubFlowInputComponent.tsx

@@ -6,7 +6,7 @@ import lodash from "lodash"
 import {useFunctionSuggestions} from "@edition/function/hooks/Function.suggestion.hook";
 import {DataTypeInputValueComponent} from "@edition/datatype/components/inputs/DataTypeInputValueComponent";
 import {SuggestionDialogComponent} from "@edition/function/components/suggestion/SuggestionDialogComponent";
-import {Flow, LiteralValue, NodeFunction, ReferenceValue, SubFlowValue} from "@code0-tech/sagittarius-graphql-types";
+import {Flow, LiteralValue, ReferenceValue, SubFlowValue} from "@code0-tech/sagittarius-graphql-types";
 import {FlowService} from "@edition/flow/services/Flow.service";
 import {useParams} from "next/navigation";
 
@@ -31,11 +31,11 @@ export const DataTypeSubFlowInputComponent: React.FC<DataTypeSubFlowInputCompone
     const [suggestionDialogOpen, setSuggestionDialogOpen] = React.useState(false)
     const result = useFunctionSuggestions()
 
-    const onChangeDebounced = useDebouncedCallback((value: LiteralValue | SubFlowValue | ReferenceValue | NodeFunction | null) => {
+    const onChangeDebounced = useDebouncedCallback((value: LiteralValue | SubFlowValue | ReferenceValue | null) => {
         onChange?.(value ?? null)
     }, 200)
 
-    return React.useMemo(() => <>
+    return <>
         <SuggestionDialogComponent suggestions={[...suggestions!, ...result]}
                                    open={suggestionDialogOpen}
                                    onSuggestionSelect={value => {
@@ -47,7 +47,7 @@ export const DataTypeSubFlowInputComponent: React.FC<DataTypeSubFlowInputCompone
                                            }
                                        }
                                        formValidation?.setValue?.(value ?? null)
-                                       onChangeDebounced(value as NodeFunction)
+                                       onChangeDebounced(value as SubFlowValue)
                                    }}
                                    onOpenChange={setSuggestionDialogOpen}/>
         <InputLabel>{title}</InputLabel>
@@ -69,11 +69,11 @@ export const DataTypeSubFlowInputComponent: React.FC<DataTypeSubFlowInputCompone
                                              }
                                          }
                                          formValidation?.setValue?.(value ?? null)
-                                         onChangeDebounced(value ?? null)
+                                         onChangeDebounced(value as SubFlowValue)
                                      }}
                                      suggestions={suggestions}
                                      formValidation={formValidation}>
             <Text>Select next node</Text>
         </DataTypeInputValueComponent>
-    </>, [formValidation, defaultValue, suggestionDialogOpen])
+    </>
 }

src/packages/ce/src/function/components/files/FunctionFileDefaultComponent.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import {Alert, Spacing, Text, useForm, useService} from "@code0-tech/pictor";
+import {Alert, Spacing, Text, useForm, useService, useStore} from "@code0-tech/pictor";
 import {
     Flow,
     LiteralValue,
@@ -10,6 +10,7 @@ import {
 } from "@code0-tech/sagittarius-graphql-types";
 import {useFlowValidation} from "@edition/flow/hooks/Flow.validation.hook";
 import {FlowService} from "@edition/flow/services/Flow.service";
+import {FunctionService} from "@edition/function/services/Function.service";
 import {DataTypeInputComponent} from "@edition/datatype/components/inputs/DataTypeInputComponent";
 import {
     FALLBACK_FUNCTION_DESCRIPTION,
@@ -21,21 +22,29 @@ import {useNodes} from "@xyflow/react";
 import {NodeSchema} from "@code0-tech/triangulum";
 
 export interface FunctionFileDefaultComponentProps {
-    node: NodeFunction
+    nodeId: NodeFunction['id']
     flowId: Flow['id']
 }
 
 export const FunctionFileDefaultComponent: React.FC<FunctionFileDefaultComponentProps> = (props) => {
 
-    const {node, flowId} = props
+    const {nodeId, flowId} = props
 
     const flowService = useService(FlowService)
+    const flowStore = useStore(FlowService)
+    const functionService = useService(FunctionService)
+    const functionStore = useStore(FunctionService)
     const validation = useFlowValidation(flowId)
     const changedParameter = React.useRef<Set<string>>(new Set())
 
+    const node = React.useMemo(
+        () => flowService.getNodeById(flowId, nodeId)!,
+        [flowService, flowStore, flowId, nodeId]
+    )
+
     const definition = React.useMemo(
-        () => node.functionDefinition!,
-        [node.functionDefinition]
+        () => functionService.getById(node?.functionDefinition?.id!)!,
+        [functionService, functionStore, node?.functionDefinition?.id]
     )
 
     const initialValues = React.useMemo(() => {

src/packages/ce/src/function/components/files/FunctionFilesComponent.tsx

@@ -184,7 +184,7 @@ export const FunctionFilesComponent: React.FC<FunctionFilesComponentProps> = (pr
                                                     h={"100%"}
                                                     value={node?.id!}
                                                     key={node?.id!}>
-                                <FunctionFileDefaultComponent node={node!} flowId={flowId}/>
+                                <FunctionFileDefaultComponent nodeId={node?.id!} flowId={flowId}/>
                             </FileTabsContent>
                         })
                     }