'use client';
import { FC, useCallback } from 'react';

import {
  addEdge,
  ReactFlowProvider,
  useEdgesState,
  useNodesState,
} from '@xyflow/react';

import Flow from '@components/ReactFlow/Flow';

const initialNodes = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: 'Node1' } },
  { id: '2', position: { x: 0, y: 100 }, data: { label: 'Node2' } },
];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];

const FlowCreatePage: FC = () => {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

  const onConnect = useCallback(
    (params) => setEdges((eds) => addEdge(params, eds)),
    [setEdges]
  );

  return (
    <ReactFlowProvider initialNodes={nodes} initialEdges={edges}>
      <Flow nodes={nodes} edges={edges} />
    </ReactFlowProvider>
  );
};

export default FlowCreatePage;

'use client';

import { FC, useCallback, useState } from 'react';

import {
  addEdge,
  applyEdgeChanges,
  applyNodeChanges,
  Background,
  BackgroundVariant,
  Controls,
  Edge,
  MiniMap,
  Node,
  OnConnect,
  OnEdgesChange,
  OnNodesChange,
  ReactFlow,
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';

type FlowProps = {
  nodes: Node[];
  edges: Edge[];
};

const Flow: FC<FlowProps> = ({ nodes: initNodes, edges: initEdges }) => {
  const [nodes, setNodes] = useState<Node[]>(initNodes);
  const [edges, setEdges] = useState<Edge[]>(initEdges);

  const onNodesChange: OnNodesChange = useCallback(
    (chs) => {
      setNodes((nds) => applyNodeChanges(chs, nds));
    },
    [setNodes]
  );

  const onEdgesChange: OnEdgesChange = useCallback(
    (chs) => {
      setEdges((eds) => applyEdgeChanges(chs, eds));
    },
    [setEdges]
  );

  const onConnect: OnConnect = useCallback(
    (params) => setEdges((eds) => addEdge(params, eds)),
    [setEdges]
  );

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}>
        <Controls />
        <MiniMap />
        <Background variant={BackgroundVariant.Dots} gap={12} size={1} />
      </ReactFlow>
    </div>
  );
};

export default Flow;