-
-
Notifications
You must be signed in to change notification settings - Fork 9
/
ScenarioVisualizer.tsx
128 lines (116 loc) · 3.68 KB
/
ScenarioVisualizer.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck
import React, { useContext, useEffect, useState } from 'react';
import { ipcRenderer } from 'electron';
// eslint-disable-next-line import/no-cycle,import/no-duplicates
// eslint-disable-next-line import/no-cycle
import { WorkBenchContext } from '..';
import { ACTIONS_IDS } from '../../Editor/constants';
function ScenarioVisualizer({ EditorState, dispatch }): JSX.Element {
const [actionsRegister, updateRegister] = useState({
pendingAction: null,
doneActions: {},
});
// eslint-disable-next-line react/prop-types
function GenerateScenariosView({ scenarioObject }) {
// eslint-disable-next-line react/prop-types
if (!scenarioObject.scenarios) {
return <div />;
}
return (
<>
<h2>Scenarios</h2>
{/* eslint-disable-next-line react/prop-types */}
{Object.keys(scenarioObject.scenarios).map((scenarioName) => {
const name = scenarioName.match(new RegExp(/[^-]*$/, 'gm')); //NOSONAR
return (
<div key={scenarioName}>
<div
style={{
fontFamily:
'ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace',
fontSize: '1rem',
lineHeight: '1.5rem',
}}
>
{name[0]}
<div>
{/* eslint-disable-next-line react/button-has-type */}
<button
onClick={() => {
dispatch({
type: ACTIONS_IDS.simulateAction,
payload: {
actionName: scenarioName,
type: ACTIONS_IDS.simpleInvocation,
},
});
updateRegister({
...actionsRegister,
pendingAction: scenarioName,
});
}}
>
Simulate
</button>
</div>
</div>
</div>
);
})}
</>
);
}
// eslint-disable-next-line react/prop-types
function GenerateOperationsView({ operationsObj }) {
console.log(operationsObj);
return <p>Test</p>;
}
const [currentScenario, setScenario] = useState({});
// eslint-disable-next-line @typescript-eslint/no-redeclare
function setLocalState(scenario) {
console.log(scenario);
setScenario(scenario);
}
useEffect(() => {
console.log('visualizer');
if (actionsRegister.pendingAction) {
ipcRenderer
.invoke('editor/action', actionsRegister.pendingAction)
.then((r) =>
dispatch({
type: ACTIONS_IDS.visualizationChangeStatus,
})
)
.catch((err) => {});
}
if (EditorState.scenarioUpdated === true) {
console.log('GENERATING');
setLocalState(EditorState.currentValidScenario);
dispatch({
type: ACTIONS_IDS.visualizationChangeStatus,
});
// dispatch({ type: ACTIONS_IDS.visualizationGenerating });
}
// TODO add case for save scenario action
return function onUnmount() {
// dispatch({ type: ACTIONS_IDS.visualizationGenerating });
};
}, [EditorState, actionsRegister]);
return (
<div
style={{
width: '50%',
height: '100%',
padding: 5,
margin: '0px',
marginLeft: 7,
marginTop: 1,
backgroundColor: 'azure',
}}
>
<GenerateScenariosView scenarioObject={currentScenario} />
</div>
);
}
export default ScenarioVisualizer;