Skip to content

Commit 082e556

Browse files
jarekdanielakjarekdanielak
committed
chore: fix type errors
1 parent dafd931 commit 082e556

File tree

3 files changed

+106
-80
lines changed

3 files changed

+106
-80
lines changed

‎lib/components/Input/InputEditor.jsx‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,14 +57,25 @@ export default function InputEditor({
5757
value
5858
}));
5959

60-
return [ ...variablesForElementAutocompletions, ...outputVariablesAutocompletions ];
60+
/**
61+
* @type {import('@codemirror/autocomplete').Completion[]}
62+
*/
63+
const result = [ ...variablesForElementAutocompletions, ...outputVariablesAutocompletions ];
64+
65+
return result;
6166
}, [ allOutputs, variablesForElement ]);
6267

6368
const ref = useRef(null);
6469

65-
const [ editorView, setEditorView ] = useState(null);
70+
/**
71+
* @type {ReturnType<typeof useState<EditorView>>}
72+
*/
73+
const [ editorView, setEditorView ] = useState();
6674

67-
const [ error, setError ] = useState(null);
75+
/**
76+
* @type {ReturnType<typeof useState<string?>>}
77+
*/
78+
const [ error, setError ] = useState();
6879

6980
useEffect(() => {
7081
if (!ref.current) {

‎lib/components/TaskTesting/TaskTesting.js‎

Lines changed: 89 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useCallback, useEffect, useState } from 'react';
1+
import React, { useCallback, useEffect, useState, useRef } from 'react';
22

33
import { Button, InlineLoading, Tooltip } from '@carbon/react';
44

@@ -27,11 +27,9 @@ export const NO_ELEMENT_TEXT = 'Select a task to start testing';
2727
* @param {boolean} [props.canExecuteTask]
2828
* @param {string} [props.cannotExecuteTaskLabel='Cannot test task']
2929
* @param {string} [props.cannotExecuteTaskDescription='Configure your connection to test the task']
30-
* @param {Function} [props.cannotExecuteTaskCallback=() => {}]
30+
* @param {import('react').MouseEventHandler} [props.cannotExecuteTaskCallback=() => {}]
3131
* @param {import('../../types').Config|undefined} [props.config]
3232
* @param {Function} [props.onConfigChanged=() => {}]
33-
*
34-
* @returns {import('react').ReactElement}
3533
*/
3634
export default function TaskTesting({
3735
injector,
@@ -43,124 +41,139 @@ export default function TaskTesting({
4341
config,
4442
onConfigChanged: _onConfigChanged = () => {}
4543
}) {
46-
const [ isTaskExecuting, setIsTaskExecuting ] = useState(false);
47-
const [ taskExecutionStateDescription, setTaskExecutionStateDescription ] = useState('');
4844

49-
const element = useSelectedElement(injector);
45+
/**
46+
* @type {React.RefObject<ElementVariables?>}
47+
*/
48+
const elementVariablesRef = useRef(null);
5049

51-
const [ elementVariables, setElementVariables ] = useState(null);
50+
/**
51+
* @type {React.RefObject<ElementConfig?>}
52+
*/
53+
const elementConfigRef = useRef(null);
5254

5355
const [ variablesForElement, setVariablesForElement ] = useState([]);
5456

55-
const [ elementConfig, setElementConfig ] = useState(null);
57+
const [ isTaskExecuting, setIsTaskExecuting ] = useState(false);
58+
const [ taskExecutionStateDescription, setTaskExecutionStateDescription ] = useState('');
5659

5760
const [ input, setInput ] = useState('{}');
5861
const [ output, setOutput ] = useState(null);
5962
const [ allOutputs, setAllOutputs ] = useState({});
60-
6163
const [ inputError, setInputError ] = useState(null);
6264

63-
const [ taskExecution, setTaskExecution ] = useState(null);
65+
const element = useSelectedElement(injector);
66+
67+
68+
/**
69+
* @type {React.RefObject<TaskExecution?>}
70+
*/
71+
const taskExecutionRef = useRef(null);
6472

6573
useEffect(() => {
6674
const elementVariables = new ElementVariables(injector);
75+
elementVariablesRef.current = elementVariables;
6776

6877
const elementConfig = new ElementConfig(injector, elementVariables, config);
78+
elementConfigRef.current = elementConfig;
6979

7080
const taskExecution = new TaskExecution(injector, api);
71-
72-
setElementVariables(elementVariables);
73-
74-
setElementConfig(elementConfig);
75-
76-
setTaskExecution(taskExecution);
81+
taskExecutionRef.current = taskExecution;
7782
}, []);
7883

7984
useEffect(() => {
80-
if (!element || !elementVariables) {
85+
if (!element || !elementVariablesRef.current) {
8186
return;
8287
}
8388

84-
elementVariables.getVariablesForElement(element).then(variables => setVariablesForElement(variables));
85-
}, [ element, elementVariables ]);
89+
elementVariablesRef.current.getVariablesForElement(element).then(variables => setVariablesForElement(variables));
90+
}, [ element ]);
8691

8792
useEffect(() => {
88-
if (!elementVariables) {
93+
if (!elementVariablesRef.current) {
8994
return;
9095
}
9196

9297
const onVariablesChanged = async () => {
93-
if (!element) {
98+
if (!element || !elementVariablesRef.current) {
9499
return;
95100
}
96101

97-
const variables = await elementVariables.getVariablesForElement(element);
102+
const variables = await elementVariablesRef.current.getVariablesForElement(element);
98103

99104
setVariablesForElement(variables);
100105
};
101106

102-
elementVariables.on('variables.changed', onVariablesChanged);
107+
elementVariablesRef.current.on('variables.changed', onVariablesChanged);
103108

104109
return () => {
105-
elementVariables.off('variables.changed', onVariablesChanged);
110+
if (elementVariablesRef.current) {
111+
elementVariablesRef.current.off('variables.changed', onVariablesChanged);
112+
}
106113
};
107-
}, [ element, elementVariables ]);
114+
}, [ element ]);
108115

109116
useEffect(() => {
110-
if (!elementConfig) {
117+
if (!elementConfigRef.current) {
111118
return;
112119
}
113120

114121
const onConfigChanged = () => {
115-
_onConfigChanged(elementConfig.getConfig());
122+
if (!elementConfigRef.current) {
123+
return;
124+
}
125+
126+
_onConfigChanged(elementConfigRef.current.getConfig());
116127

117128
if (!element) {
118129
return;
119130
}
120131

121-
elementConfig.getInputConfigForElement(element).then(setInput);
122-
setOutput(elementConfig.getOutputConfigForElement(element));
123-
setAllOutputs(elementConfig.getConfig().output);
132+
elementConfigRef.current.getInputConfigForElement(element).then(setInput);
133+
setOutput(elementConfigRef.current.getOutputConfigForElement(element));
134+
setAllOutputs(elementConfigRef.current.getConfig().output);
124135
};
125136

126-
elementConfig.on('config.changed', onConfigChanged);
137+
elementConfigRef.current.on('config.changed', onConfigChanged);
127138

128139
return () => {
129-
elementConfig.off('config.changed', onConfigChanged);
140+
if (elementConfigRef.current) {
141+
elementConfigRef.current.off('config.changed', onConfigChanged);
142+
}
130143
};
131-
}, [ element, elementConfig, _onConfigChanged, setAllOutputs, setInput, setOutput ]);
144+
}, [ element, _onConfigChanged, setAllOutputs, setInput, setOutput ]);
132145

133146
useEffect(() => {
134-
if (!taskExecution) {
147+
if (!taskExecutionRef.current) {
135148
return;
136149
}
137150

138151
const onTaskExecutionStart = () => {
139152
setIsTaskExecuting(true);
140153

141-
if (!element || !elementConfig) {
154+
if (!element || !elementConfigRef.current) {
142155
return;
143156
}
144157

145-
elementConfig.setOutputConfigForElement(element, null);
158+
elementConfigRef.current.setOutputConfigForElement(element, null);
146159
};
147160

148-
taskExecution.on('taskExecution.start', onTaskExecutionStart);
161+
taskExecutionRef.current.on('taskExecution.start', onTaskExecutionStart);
149162

150163
const onTaskExecutionProgress = ({ description }) => {
151164
setTaskExecutionStateDescription(description);
152165
};
153166

154-
taskExecution.on('taskExecution.progress', onTaskExecutionProgress);
167+
taskExecutionRef.current.on('taskExecution.progress', onTaskExecutionProgress);
155168

156169
const onTaskExecutionError = ({ message, response }) => {
157170
setIsTaskExecuting(false);
158171

159-
if (!element || !elementConfig) {
172+
if (!element || !elementConfigRef.current) {
160173
return;
161174
}
162175

163-
elementConfig.setOutputConfigForElement(element, {
176+
elementConfigRef.current.setOutputConfigForElement(element, {
164177
success: false,
165178
error: {
166179
message,
@@ -169,13 +182,13 @@ export default function TaskTesting({
169182
});
170183
};
171184

172-
taskExecution.on('taskExecution.error', onTaskExecutionError);
185+
taskExecutionRef.current.on('taskExecution.error', onTaskExecutionError);
173186

174187
const onTaskExecutionCancelled = () => {
175188
setIsTaskExecuting(false);
176189
};
177190

178-
taskExecution.on('taskExecution.cancelled', onTaskExecutionCancelled);
191+
taskExecutionRef.current.on('taskExecution.cancelled', onTaskExecutionCancelled);
179192

180193
const onTaskExecutionEnd = ({
181194
incident,
@@ -184,76 +197,78 @@ export default function TaskTesting({
184197
}) => {
185198
setIsTaskExecuting(false);
186199

187-
if (!element || !elementConfig) {
200+
if (!element || !elementConfigRef.current) {
188201
return;
189202
}
190203

191-
elementConfig.setOutputConfigForElement(element, {
204+
elementConfigRef.current.setOutputConfigForElement(element, {
192205
success,
193206
incident,
194207
variables
195208
});
196209
};
197210

198-
taskExecution.on('taskExecution.end', onTaskExecutionEnd);
211+
taskExecutionRef.current.on('taskExecution.end', onTaskExecutionEnd);
199212

200213
return () => {
201-
taskExecution.off('taskExecution.start', onTaskExecutionStart);
202-
taskExecution.off('taskExecution.progress', onTaskExecutionProgress);
203-
taskExecution.off('taskExecution.error', onTaskExecutionError);
204-
taskExecution.off('taskExecution.cancelled', onTaskExecutionCancelled);
205-
taskExecution.off('taskExecution.end', onTaskExecutionEnd);
214+
if (taskExecutionRef.current) {
215+
taskExecutionRef.current.off('taskExecution.start', onTaskExecutionStart);
216+
taskExecutionRef.current.off('taskExecution.progress', onTaskExecutionProgress);
217+
taskExecutionRef.current.off('taskExecution.error', onTaskExecutionError);
218+
taskExecutionRef.current.off('taskExecution.cancelled', onTaskExecutionCancelled);
219+
taskExecutionRef.current.off('taskExecution.end', onTaskExecutionEnd);
220+
}
206221
};
207-
}, [ element, elementConfig, taskExecution ]);
222+
}, [ element ]);
208223

209224
useEffect(() => {
210-
if (config && elementConfig) {
211-
if (JSON.stringify(config) !== JSON.stringify(elementConfig.getConfig())) {
212-
elementConfig.setConfig(config);
225+
if (config && elementConfigRef.current) {
226+
if (JSON.stringify(config) !== JSON.stringify(elementConfigRef.current.getConfig())) {
227+
elementConfigRef.current.setConfig(config);
213228
}
214229
}
215-
}, [ config, elementConfig ]);
230+
}, [ config ]);
216231

217232
useEffect(() => {
218-
if (element && elementConfig) {
219-
elementConfig.getInputConfigForElement(element).then(setInput);
220-
setOutput(elementConfig.getOutputConfigForElement(element));
233+
if (element && elementConfigRef.current) {
234+
elementConfigRef.current.getInputConfigForElement(element).then(setInput);
235+
setOutput(elementConfigRef.current.getOutputConfigForElement(element));
221236
}
222-
}, [ element, elementConfig ]);
237+
}, [ element ]);
223238

224239
const onSetInput = useCallback((newInput) => {
225-
if (element && elementConfig) {
226-
elementConfig.setInputConfigForElement(element, newInput);
240+
if (element && elementConfigRef.current) {
241+
elementConfigRef.current.setInputConfigForElement(element, newInput);
227242
}
228-
}, [ element, elementConfig ]);
243+
}, [ element ]);
229244

230245
const onResetInput = useCallback(() => {
231-
if (element && elementConfig) {
232-
elementConfig.resetInputConfigForElement(element);
246+
if (element && elementConfigRef.current) {
247+
elementConfigRef.current.resetInputConfigForElement(element);
233248
}
234-
}, [ element, elementConfig ]);
249+
}, [ element ]);
235250

236251
const onExecuteTask = async () => {
237-
if (!element || !taskExecution) {
252+
if (!element || !taskExecutionRef.current || !elementConfigRef.current) {
238253
return;
239254
}
240255

241-
const inputConfig = await elementConfig.getInputConfigForElement(element);
256+
const inputConfig = await elementConfigRef.current.getInputConfigForElement(element);
242257

243-
taskExecution.executeTask(element.id, JSON.parse(inputConfig));
258+
taskExecutionRef.current.executeTask(element.id, JSON.parse(inputConfig));
244259
};
245260

246261
const onCancelTaskExecution = () => {
247-
if (taskExecution) {
248-
taskExecution.cancelTaskExecution();
262+
if (taskExecutionRef.current) {
263+
taskExecutionRef.current.cancelTaskExecution();
249264
}
250265
};
251266

252267
const onResetOutput = useCallback(() => {
253-
if (element && elementConfig) {
254-
elementConfig.resetOutputConfigForElement(element);
268+
if (element && elementConfigRef.current) {
269+
elementConfigRef.current.resetOutputConfigForElement(element);
255270
}
256-
}, [ element, elementConfig ]);
271+
}, [ element ]);
257272

258273
if (!config) {
259274
return (

‎lib/utils/autocompletion.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import { autocompletion, startCompletion } from '@codemirror/autocomplete';
33
import { syntaxTree } from '@codemirror/language';
44

55
/**
6-
* @typedef {import('../types').Variables} Variables
6+
* @typedef {import('@codemirror/autocomplete').Completion} Completion
77
* @typedef {import('@codemirror/autocomplete').CompletionContext} CompletionContext
88
* @typedef {import('@codemirror/autocomplete').CompletionResult} CompletionResult
99
*/
1010

1111
/**
12-
* @param {Variables} variables
12+
* @param {Completion[]} variables
1313
*/
1414
export function getAutocompletionExtensions(variables) {
1515
return [
@@ -19,7 +19,7 @@ export function getAutocompletionExtensions(variables) {
1919
}
2020

2121
/**
22-
* @param {Variables} variables
22+
* @param {Completion[]} variables
2323
*/
2424
function autoCompletionExtension(variables) {
2525
return autocompletion({

0 commit comments

Comments
 (0)