Skip to content

Commit 09678a5

Browse files
jsajaljsajal
committed
make evaluate node use canvas store to push changes
1 parent 5dc516b commit 09678a5

File tree

4 files changed

+104
-130
lines changed

4 files changed

+104
-130
lines changed

‎src/components/molecules/flow/index.js‎

Lines changed: 0 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -112,36 +112,6 @@ const Flow = ({ collectionId }) => {
112112
const { nodes, edges, onNodesChange, onEdgesChange, onConnect, setNodes, setEdges } = useCanvasStore(selector);
113113
//console.log(nodes);
114114

115-
// useEffect(() => {
116-
// // Action to perform on tab change
117-
// console.log(`Tab changed to: ${tabId}`);
118-
// console.log(flowData);
119-
// // perform actions based on the new tabId
120-
// const result = init(cloneDeep(flowData));
121-
// setNodes(result.nodes);
122-
// setEdges(result.edges);
123-
// }, [tabId]);
124-
125-
// const setCanvasDirty = () => {
126-
// console.debug('set canvas dirty');
127-
// const tab = useTabStore.getState().tabs.find((t) => t.id === tabId);
128-
// if (tab) {
129-
// tab.isDirty = true;
130-
// tab.flowData = {
131-
// nodes: nodes.map((node) => {
132-
// const _node = JSON.parse(JSON.stringify(node));
133-
// return { ..._node };
134-
// }),
135-
// edges: edges.map((edge) => {
136-
// return {
137-
// ...edge,
138-
// animated: false,
139-
// };
140-
// }),
141-
// };
142-
// }
143-
// };
144-
145115
// notification
146116
// eslint-disable-next-line no-unused-vars
147117
const { enqueueSnackbar, closeSnackbar } = useSnackbar();
@@ -167,21 +137,6 @@ const Flow = ({ collectionId }) => {
167137
[],
168138
);
169139

170-
// const [nodes, setNodes, onNodesChange] = useNodesState([]);
171-
// const [edges, setEdges, onEdgesChange] = useEdgesState([]);
172-
173-
// useEffect(() => {
174-
// // skip inital render
175-
// if (flowData === undefined || (isEqual(nodes, []) && isEqual(edges, []))) {
176-
// return;
177-
// }
178-
// if (flowData && isEqual(JSON.parse(JSON.stringify(nodes)), flowData.nodes) && isEqual(edges, flowData.edges)) {
179-
// console.debug('canvas is unchanged');
180-
// return;
181-
// }
182-
// setCanvasDirty();
183-
// }, [nodes, edges]);
184-
185140
const runnableEdges = (runnable) => {
186141
const updatedEdges = reactFlowInstance.getEdges().map((edge) => {
187142
return {
@@ -336,9 +291,7 @@ const Flow = ({ collectionId }) => {
336291
};
337292

338293
Flow.propTypes = {
339-
tabId: PropTypes.string.isRequired,
340294
collectionId: PropTypes.string.isRequired,
341-
flowData: PropTypes.object.isRequired,
342295
};
343296

344297
export default Flow;

‎src/components/molecules/flow/nodes/EvaluateNode.js‎

Lines changed: 67 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,26 @@ import Operators from '../constants/operators';
55
import FlowNode from 'components/atoms/flow/FlowNode';
66
import { getInputType } from 'utils/common';
77
import { CHOOSE_OPERATOR_DEFAULT_VALUE_OBJ } from 'constants/Common';
8+
import useCanvasStore from 'stores/CanvasStore';
9+
10+
const operatorMenu = (id, data) => {
11+
const setEvaluateNodeOperator = useCanvasStore((state) => state.setEvaluateNodeOperator);
812

9-
const operatorMenu = (data) => {
10-
const [selectedOperatorValue, setSelectedOperatorValue] = useState(
11-
data.operator ? data.operator : CHOOSE_OPERATOR_DEFAULT_VALUE_OBJ.value,
12-
);
1313
const handleOperatorSelection = (event) => {
1414
const selectedValue = event.target?.value;
1515
// ToDO: verify the behavior when use selects the default item
1616
if (selectedValue !== CHOOSE_OPERATOR_DEFAULT_VALUE_OBJ.value) {
17-
data.operator = selectedValue;
18-
setSelectedOperatorValue(selectedValue);
17+
setEvaluateNodeOperator(id, selectedValue);
1918
}
2019
};
2120

2221
return (
2322
<div className='mb-4'>
2423
<select
2524
onChange={handleOperatorSelection}
26-
name='auth-type'
27-
value={selectedOperatorValue}
28-
className='w-full h-12 px-1 py-2 border rounded-md border-neutral-500 text-neutral-500 outline-0 focus:ring-0'
25+
name='operator-type'
26+
value={data.operator ? data.operator : CHOOSE_OPERATOR_DEFAULT_VALUE_OBJ.value}
27+
className='h-12 w-full rounded-md border border-neutral-500 px-1 py-2 text-neutral-500 outline-0 focus:ring-0'
2928
>
3029
<option value={CHOOSE_OPERATOR_DEFAULT_VALUE_OBJ.value}>
3130
{CHOOSE_OPERATOR_DEFAULT_VALUE_OBJ.displayValue}
@@ -40,103 +39,95 @@ const operatorMenu = (data) => {
4039
};
4140

4241
// ToDo: refactor component parameters, make it more readable. vname and data are not suited
43-
const variableElem = (data, varName) => {
44-
// default values
45-
if (!data.variables[varName]) {
46-
data.variables[varName] = {};
47-
data.variables[varName].type = 'String';
48-
data.variables[varName].value = '';
49-
}
50-
const dataVariables = data.variables;
51-
const [varType, setVarType] = useState(dataVariables[varName].type);
52-
const [inputType, setInputType] = useState(getInputType(dataVariables[varName].type));
53-
const [variableValue, setVariableValue] = useState(dataVariables[varName].value);
42+
const variableElem = (id, data, varName) => {
43+
const setEvaluateNodeVariable = useCanvasStore((state) => state.setEvaluateNodeVariable);
5444

5545
const handleInputTypeSelection = (event) => {
56-
if (!data.variables[varName]) {
57-
data.variables[varName] = {};
58-
}
5946
const selectedValue = event.target?.value;
60-
data.variables[varName].type = selectedValue;
6147
switch (selectedValue) {
6248
case 'String':
63-
data.variables[varName].value = '';
64-
setVariableValue('');
49+
setEvaluateNodeVariable(id, varName, selectedValue, '');
6550
break;
6651
case 'Select':
67-
data.variables[varName].value = '';
68-
setVariableValue('');
52+
setEvaluateNodeVariable(id, varName, selectedValue, '');
6953
break;
7054
case 'Number':
71-
data.variables[varName].value = 0;
72-
setVariableValue(0);
55+
setEvaluateNodeVariable(id, varName, selectedValue, 0);
7356
break;
7457
case 'Boolean':
75-
data.variables[varName].value = false;
76-
setVariableValue(false);
58+
setEvaluateNodeVariable(id, varName, selectedValue, false);
7759
break;
7860
}
79-
setVarType(selectedValue);
80-
setInputType(getInputType(selectedValue));
8161
};
8262

8363
const handleBooleanValueSelection = (event) => {
84-
if (!data.variables[varName]) {
85-
data.variables[varName] = {};
86-
}
87-
const selectedValue = event.target?.value;
88-
data.variables[varName].value = selectedValue;
89-
setVariableValue(selectedValue);
64+
setEvaluateNodeVariable(id, varName, 'Boolean', event.target?.value);
9065
};
9166

9267
return (
93-
<div className='flex items-center justify-center mb-4 text-sm border rounded-md border-neutral-500 text-neutral-500 outline-0 focus:ring-0'>
94-
{varType === 'Boolean' ? (
95-
<select
96-
onChange={handleBooleanValueSelection}
97-
name='boolean-val'
98-
className='nodrag h-12 w-full rounded-br-md rounded-tr-md p-2.5 px-1 '
99-
value={variableValue}
100-
>
101-
<option value='true'>True</option>
102-
<option value='false'>False</option>
103-
</select>
68+
<div className='mb-4 flex items-center justify-center rounded-md border border-neutral-500 text-sm text-neutral-500 outline-0 focus:ring-0'>
69+
{data.variables && data.variables[varName] ? (
70+
data.variables[varName].type === 'Boolean' ? (
71+
<select
72+
onChange={handleBooleanValueSelection}
73+
name='boolean-val'
74+
className='nodrag h-12 w-full rounded-br-md rounded-tr-md p-2.5 px-1 '
75+
value={data.variables[varName].value}
76+
>
77+
<option value='true'>True</option>
78+
<option value='false'>False</option>
79+
</select>
80+
) : (
81+
<input
82+
id='outlined-adornment-weight'
83+
type={getInputType(data.variables[varName].type)}
84+
className='nodrag nowheel block h-12 w-full rounded-bl-md rounded-tl-md p-2.5'
85+
name='variable-value'
86+
placeholder={varName}
87+
value={data.variables[varName].value}
88+
onChange={(event) => {
89+
const updatedValue = event.target.value;
90+
switch (data.variables[varName].type) {
91+
case 'String':
92+
// data.variables[varName].value = updatedValue.toString();
93+
// setVariableValue(updatedValue.toString());
94+
setEvaluateNodeVariable(id, varName, 'String', updatedValue.toString());
95+
break;
96+
case 'Select':
97+
// data.variables[varName].value = updatedValue.toString();
98+
// setVariableValue(updatedValue.toString());
99+
setEvaluateNodeVariable(id, varName, 'Select', updatedValue.toString());
100+
break;
101+
case 'Number':
102+
// data.variables[varName].value = parseInt(updatedValue);
103+
// setVariableValue(parseInt(updatedValue));
104+
setEvaluateNodeVariable(id, varName, 'Number', parseInt(updatedValue));
105+
break;
106+
}
107+
}}
108+
/>
109+
)
104110
) : (
105111
<input
106112
id='outlined-adornment-weight'
107-
type={inputType}
113+
type='text'
108114
className='nodrag nowheel block h-12 w-full rounded-bl-md rounded-tl-md p-2.5'
109115
name='variable-value'
110116
placeholder={varName}
111-
value={variableValue}
117+
value=''
112118
onChange={(event) => {
119+
// default type is string, as soon as we select another type, it goes to above flow
113120
const updatedValue = event.target.value;
114-
if (!data.variables[varName]) {
115-
data.variables[varName] = {};
116-
}
117-
switch (varType) {
118-
case 'String':
119-
data.variables[varName].value = updatedValue.toString();
120-
setVariableValue(updatedValue.toString());
121-
break;
122-
case 'Select':
123-
data.variables[varName].value = updatedValue.toString();
124-
setVariableValue(updatedValue.toString());
125-
break;
126-
case 'Number':
127-
data.variables[varName].value = parseInt(updatedValue);
128-
setVariableValue(parseInt(updatedValue));
129-
break;
130-
}
121+
setEvaluateNodeVariable(id, varName, 'String', updatedValue.toString());
131122
}}
132123
/>
133124
)}
134125

135126
<select
136127
onChange={handleInputTypeSelection}
137128
name='var-input-type'
138-
className='w-full h-8 p-0 px-1 border-l nodrag rounded-br-md rounded-tr-md border-l-neutral-500'
139-
value={varType}
129+
className='nodrag h-8 w-full rounded-br-md rounded-tr-md border-l border-l-neutral-500 p-0 px-1'
130+
value={data.variables && data.variables[varName] ? data.variables[varName].type : 'String'}
140131
>
141132
<option value='Select'>Select</option>
142133
<option value='String'>String</option>
@@ -147,11 +138,7 @@ const variableElem = (data, varName) => {
147138
);
148139
};
149140

150-
const EvaluateNode = ({ data }) => {
151-
if (data.variables == undefined) {
152-
data.variables = {};
153-
}
154-
141+
const EvaluateNode = ({ id, data }) => {
155142
return (
156143
<FlowNode
157144
title='Evaluate'
@@ -162,9 +149,9 @@ const EvaluateNode = ({ data }) => {
162149
>
163150
<div className='pb-2'>
164151
<div>
165-
<div>{variableElem(data, 'var1')}</div>
166-
<div>{operatorMenu(data)}</div>
167-
<div>{variableElem(data, 'var2')}</div>
152+
<div>{variableElem(id, data, 'var1')}</div>
153+
<div>{operatorMenu(id, data)}</div>
154+
<div>{variableElem(id, data, 'var2')}</div>
168155
</div>
169156
<div className='text-right'>
170157
<div className='pb-4'>True</div>

‎src/components/molecules/workspace/WorkspaceContent.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ import WorkspaceContentHeader from 'components/molecules/headers/WorkspaceConten
44
import { useTabStore } from 'stores/TabStore';
55
import useCanvasStore from 'stores/CanvasStore';
66

7-
import { cloneDeep, isEqual } from 'lodash';
8-
97
const WorkspaceContent = () => {
108
const setNodes = useCanvasStore((state) => state.setNodes);
119
const setEdges = useCanvasStore((state) => state.setEdges);
@@ -27,7 +25,7 @@ const WorkspaceContent = () => {
2725
<div className='flex h-full flex-col'>
2826
<WorkspaceContentHeader />
2927
{/* {console.log(focusTab)} */}
30-
{focusTab && <Flow tabId={focusTab.id} collectionId={focusTab.collectionId} flowData={focusTab.flowData} />}
28+
{focusTab && <Flow collectionId={focusTab.collectionId} />}
3129
{/* <div className='rachit-test'>{focusTabId}</div> */}
3230
</div>
3331
);

‎src/stores/CanvasStore.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,42 @@ const useCanvasStore = create((set, get) => ({
181181
}
182182
}
183183

184+
return node;
185+
}),
186+
});
187+
},
188+
setEvaluateNodeVariable: (nodeId, name, type, value) => {
189+
set({
190+
nodes: get().nodes.map((node) => {
191+
if (node.id === nodeId) {
192+
// it's important to create a new object here, to inform React Flow about the cahnges
193+
node.data = {
194+
...node.data,
195+
variables: {
196+
...node.data.variables,
197+
[name]: {
198+
type,
199+
value,
200+
},
201+
},
202+
};
203+
}
204+
205+
return node;
206+
}),
207+
});
208+
},
209+
setEvaluateNodeOperator: (nodeId, operator) => {
210+
set({
211+
nodes: get().nodes.map((node) => {
212+
if (node.id === nodeId) {
213+
// it's important to create a new object here, to inform React Flow about the cahnges
214+
node.data = {
215+
...node.data,
216+
operator,
217+
};
218+
}
219+
184220
return node;
185221
}),
186222
});

0 commit comments

Comments
 (0)