refactor node

src/components/nodes/FunctionNode.tsx

@@ -1,8 +1,12 @@
-import React, { memo, useCallback, useContext, useMemo, useRef } from 'react'
+import React, { useCallback, useMemo, useRef } from 'react'
 import CodeMirror from '@uiw/react-codemirror'
 import { javascript } from '@codemirror/lang-javascript'
-import FlowContext from '../../lib/flowContext'
-import { nodePropsAreEqual } from '../../lib/flowUtils'
+import {
+    AbstractNodeProps,
+    createAbstractNodeComponent,
+    useAbstractNode,
+    type FlowNode,
+} from '../../lib/abstractNode'
 import { useResizeHeight } from '../../hooks/useResizeHeight'
 import { useTheme } from '../../lib/themeContext'
 import {
@@ -19,45 +23,29 @@ import { MenubarItem, MenubarShortcut } from '../ui/menubar'
 import { Kbd } from '../ui/kbd'
 import { Code2, Variable } from 'lucide-react'
 
-type Props = {
-    id: string
-    data: { body?: string }
-    width?: number
-    height?: number
-}
+export type FunctionNodeData = { body?: string }
 
-export const FunctionNode = memo(function FunctionNode({ id, data, width, height }: Props) {
+type Props = AbstractNodeProps<FunctionNodeData>
+
+function FunctionNodeComponent({ id, data, width, height }: Props) {
     const bodyValue = data?.body ?? ''
     const { theme } = useTheme()
-    const ctx = useContext(FlowContext)
-    const setNodes = ctx?.setNodes
+    const { nodes, sourceIds, updateData } = useAbstractNode<FunctionNodeData>(id, data ?? {})
     const editorRef = useRef<unknown>(null)
 
-    const edges = ctx?.edges ?? []
-    const nodes = ctx?.nodes ?? []
-    const incomingEdges = useMemo(() => edges.filter((e: any) => e.target === id), [edges, id])
-    const incomingIds = useMemo(() => incomingEdges.map((e: any) => e.source).sort(), [incomingEdges])
     const connectedVariableNodes = useMemo(
-        () => (nodes as any[]).filter((n: any) => incomingIds.includes(n.id) && n.type === 'variable'),
-        [nodes, incomingIds]
+        () => (nodes as FlowNode[]).filter((n) => sourceIds.includes(n.id) && n.type === 'variable'),
+        [nodes, sourceIds]
     )
     const connectedFunctionNodes = useMemo(
-        () => (nodes as any[]).filter((n: any) => incomingIds.includes(n.id) && n.type === 'function'),
-        [nodes, incomingIds]
+        () => (nodes as FlowNode[]).filter((n) => sourceIds.includes(n.id) && n.type === 'function'),
+        [nodes, sourceIds]
     )
-    const hasConnectedVariables = connectedVariableNodes.length > 0
-    const hasConnectedFunctions = connectedFunctionNodes.length > 0
-    const hasConnectedInputs = hasConnectedVariables || hasConnectedFunctions
+    const hasConnectedInputs = connectedVariableNodes.length > 0 || connectedFunctionNodes.length > 0
 
     const onChange = useCallback(
-        (val: string) => {
-            if (setNodes) {
-                setNodes((nds: any[]) =>
-                    nds.map((n) => (n.id === id ? { ...n, data: { ...n.data, body: val } } : n))
-                )
-            }
-        },
-        [id, setNodes]
+        (val: string) => updateData({ body: val }),
+        [updateData]
     )
 
     const insertAt = useCallback(
@@ -165,8 +153,11 @@ export const FunctionNode = memo(function FunctionNode({ id, data, width, height
             </BaseNodeFooter>
         </BaseNode>
     )
-}, nodePropsAreEqual)
+}
 
-FunctionNode.displayName = 'FunctionNode'
+export const FunctionNode = createAbstractNodeComponent<FunctionNodeData>(
+    'FunctionNode',
+    FunctionNodeComponent
+)
 
 export default FunctionNode