- updated version;

src/components/FlowBuilder/components/NodeInitialForm/index.js

@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from 'react';
+import { Handle, Position } from '@xyflow/react';
+import { isEmpty, head } from 'ramda';
+
+// store
+import { storeGet, storeSet } from '../../../../store';
+
+const NodeInitialForm = ({ data: { id, label = '' } }) => {
+    const [options, setOptions] = useState([]);
+    const [value, setValue] = useState('');
+
+    const onChangeFn = (e) => {
+        const { value } = e.target;
+        const data = {
+            formId: String(id),
+            chosenField: value,
+            chosenValue: ''
+        }
+        setValue(value);
+        storeSet.main.addFlowData(data);
+    }
+
+    useEffect(() => {
+        const forms = storeGet.main.flowForms();
+        const form = head(forms.filter(o => String(o.id) === String(id)))
+        const relevantFields = form
+            ? form.content
+                .filter(o => ['radio', 'select'].includes(o.name))
+                .map(o => ({ name: o.id, label: o.label }))
+            : [];
+        setOptions(relevantFields);
+    }, [id]);
+
+    return (
+        <div className="nodeInitialForm">
+            <label>
+                {label}
+            </label>
+            {options && !isEmpty(options)
+                ? <select onChange={onChangeFn} value={value}>
+                    <option value="">Choose form</option>
+                    {options.map(o => <option key={o.name} value={o.name}>
+                        {o.label}
+                    </option>)}
+                </select> : null}
+            <Handle
+                type="source"
+                position={Position.Bottom}
+                isConnectable={true}
+            />
+        </div>
+    );
+}
+
+export default NodeInitialForm;

src/components/FlowBuilder/components/NodeIntermediateForm/index.js

@@ -0,0 +1,71 @@
+import React, { useEffect, useState } from 'react';
+import { Handle, Position } from '@xyflow/react';
+import { head, isEmpty } from 'ramda';
+
+import { useStore, storeSet, storeGet } from '../../../../store';
+
+const NodeIntermediateForm = ({ data: { id, label = '' } }) => {
+    const flowEdges = useStore().main.flowEdges();
+    const flowData = useStore().main.flowData();
+    const [options, setOptions] = useState([]);
+    const [value, setValue] = useState('');
+
+    const onChangeFn = (e) => {
+        const { value } = e.target;
+        const data = {
+            formId: String(id),
+            chosenField: '',
+            chosenValue: value
+        }
+        setValue(value);
+        storeSet.main.addFlowData(data);
+    }
+
+    useEffect(() => {
+        const edge = head(flowEdges.filter(o => o.target === String(id)));
+        if (edge) {
+            const sourceForm = edge.source;
+            const sourceFormData = head(flowData.filter(o => o.formId === sourceForm));
+            const flowForms = storeGet.main.flowForms();
+            const form = head(flowForms.filter(o => String(o.id) === String(sourceForm)));
+            if (form && sourceFormData) {
+                const { chosenField } = sourceFormData;
+                const field = head(form.content.filter(o => o.id === chosenField));
+                if (field) {
+                    const options = head(field.settings.filter(o => o.name === 'options'));
+                    if (options) {
+                        setOptions(options.value);
+                    }
+                }
+            }
+
+        }
+    }, [flowEdges, flowData]);
+
+    return (
+        <div className="nodeInitialForm">
+            <Handle
+                type="target"
+                position={Position.Top}
+                isConnectable={true}
+            />
+            <label>
+                {label}
+            </label>
+            {options && !isEmpty(options)
+                ? <select onChange={onChangeFn} value={value}>
+                    <option value="">Choose form</option>
+                    {options.map(o => <option key={o.name} value={o.name}>
+                        {o.label}
+                    </option>)}
+                </select> : null}
+            <Handle
+                type="source"
+                position={Position.Bottom}
+                isConnectable={true}
+            />
+        </div>
+    );
+}
+
+export default NodeIntermediateForm;

src/components/FlowBuilder/index.js

@@ -1,19 +1,26 @@
 import React, { useEffect, useState } from 'react';
 import {
     ReactFlow,
-    Background,
-    useNodesState,
-    useEdgesState,
-    addEdge,
-    getIncomers,
-    getOutgoers,
-    getConnectedEdges,
+    Background
 } from '@xyflow/react';
 import { isEmpty } from 'ramda';
 
 import '@xyflow/react/dist/style.css';
 
-const FlowBuilder = ({ initialForm = 0, finalForm = 0, forms = [], updateFn }) => {
+// store
+import { useStore, storeSet } from '../../store';
+
+// nodes
+import NodeInitialForm from './components/NodeInitialForm';
+import NodeIntermediateForm from './components/NodeIntermediateForm';
+
+const nodeTypes = {
+    initialForm: NodeInitialForm,
+    intermediateForm: NodeIntermediateForm
+};
+
+const FlowBuilder = ({ initialForm = 0, finalForm = 0 }) => {
+    const forms = useStore().main.flowForms();
     const [nodes, setNodes] = useState([]);
     const [edges, setEdges] = useState([]);
 
@@ -35,22 +42,23 @@ const FlowBuilder = ({ initialForm = 0, finalForm = 0, forms = [], updateFn }) =
                 if (o.id === initialForm) {
                     obj = {
                         id: String(o.id),
-                        type: 'input',
-                        data: { label: o.label },
+                        type: 'initialForm',
+                        data: { label: o.label, id: o.id },
                         position: { x: 0, y: 0 },
                     }
                 } else if (o.id === finalForm) {
                     obj = {
                         id: String(o.id),
                         type: 'output',
-                        data: { label: o.label },
+                        data: { label: o.label, id: o.id },
                         position: { x: 0, y: 300 },
                     }
                 } else {
                     const x = coordinates.splice(0, 1);
                     obj = {
                         id: String(o.id),
-                        data: { label: o.label },
+                        type: 'intermediateForm',
+                        data: { label: o.label, id: o.id },
                         position: { x, y: 150 },
                     }
                 }
@@ -60,14 +68,14 @@ const FlowBuilder = ({ initialForm = 0, finalForm = 0, forms = [], updateFn }) =
             let edges = [];
             forms.map(o => {
                 if (o.id !== initialForm && o.id !== finalForm) {
-                    edges.push({ id: `${initialForm}->${o.id}`, source: String(initialForm), target: String(o.id) });
-                    edges.push({ id: `${o.id}->${finalForm}`, source: String(o.id), target: String(finalForm) });
+                    edges.push({ id: `${initialForm}->${o.id}`, source: String(initialForm), target: String(o.id), type: 'smoothstep' });
+                    edges.push({ id: `${o.id}->${finalForm}`, source: String(o.id), target: String(finalForm), type: 'smoothstep' });
                 }
             });
 
             setNodes(initialNodes);
             setEdges(edges);
-            updateFn(edges);
+            storeSet.main.flowEdges(edges);
         } else {
             setNodes([]);
             setEdges([]);
@@ -76,13 +84,14 @@ const FlowBuilder = ({ initialForm = 0, finalForm = 0, forms = [], updateFn }) =
 
     return (
         !isEmpty(nodes) && !isEmpty(edges)
-            ? <div className="reactFlow__wrapper">
+            ? <div className="flowBuilder__wrapper">
                 <ReactFlow
                     nodes={nodes}
                     edges={edges}
                     nodesDraggable={false}
                     nodesConnectable={false}
                     fitView
+                    nodeTypes={nodeTypes}
                     attributionPosition="top-right"
                 >
                     <Background variant="dots" gap={12} size={1}/>