feat: get and set data use context

web/app/components/workflow/nodes/if-else/node.tsx

@@ -2,14 +2,15 @@ import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { NodeProps } from 'reactflow'
 import { NodeSourceHandle } from '../_base/components/node-handle'
-import { mockData } from './mock'
 import { isComparisonOperatorNeedTranslate, isEmptyRelatedOperator } from './utils'
+import type { IfElseNodeType } from './types'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 const i18nPrefix = 'workflow.nodes.ifElse'
 
-const IfElseNode: FC<Pick<NodeProps, 'id' | 'data'>> = (props) => {
+const IfElseNode: FC<NodeProps<IfElseNodeType>> = (props) => {
+  const { id, data } = props
   const { t } = useTranslation()
-  const { conditions, logical_operator } = mockData
+  const { conditions, logical_operator } = data
 
   return (
     <div className='px-3'>

web/app/components/workflow/nodes/if-else/panel.tsx

@@ -3,12 +3,16 @@ import { useTranslation } from 'react-i18next'
 import Split from '../_base/components/split'
 import AddButton from '../_base/components/add-button'
 import useConfig from './use-config'
-import { mockData } from './mock'
 import ConditionList from './components/condition-list'
+import type { IfElseNodeType } from './types'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
+import type { NodeProps } from '@/app/components/workflow/types'
 const i18nPrefix = 'workflow.nodes.ifElse'
 
-const Panel: FC = () => {
+const Panel: FC<NodeProps<IfElseNodeType>> = ({
+  id,
+  data,
+}) => {
   const { t } = useTranslation()
   const readOnly = false
 
@@ -17,7 +21,7 @@ const Panel: FC = () => {
     handleConditionsChange,
     handleAddCondition,
     handleLogicalOperatorToggle,
-  } = useConfig(mockData)
+  } = useConfig(id, data)
   return (
     <div className='mt-2'>
       <div className='px-4 pb-4 space-y-4'>

web/app/components/workflow/nodes/if-else/use-config.ts

@@ -1,18 +1,17 @@
-import { useCallback, useState } from 'react'
+import { useCallback } from 'react'
 import produce from 'immer'
 import { ComparisonOperator, LogicalOperator } from './types'
 import type { Condition, IfElseNodeType } from './types'
+import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 
-const useConfig = (initInputs: IfElseNodeType) => {
-  const [inputs, setInputs] = useState<IfElseNodeType>(initInputs)
+const useConfig = (id: string, payload: IfElseNodeType) => {
+  const { inputs, setInputs } = useNodeCrud<IfElseNodeType>(id, payload)
 
   const handleConditionsChange = useCallback((newConditions: Condition[]) => {
-    setInputs((prev) => {
-      return {
-        ...prev,
-        conditions: newConditions,
-      }
+    const newInputs = produce(inputs, (draft) => {
+      draft.conditions = newConditions
     })
+    setInputs(newInputs)
   }, [])
 
   const handleAddCondition = useCallback(() => {