mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-06 17:08:10 +00:00
fix(stacks): close double-click race in create handler (F-2)
The setState-based busy guard could race a second click that landed before React committed the disabled state, so two POSTs got dispatched when a user double-clicked Create. The new useRef-based check is read and written synchronously inside the handler so a re-entrant invocation bails before issuing a second fetch. The accompanying E2E (`create dialog: double-clicking Create fires only one POST`) was also hanging to its 30s test timeout: the second click's locator resolution could outlive the dialog when the first POST resolved quickly, so Playwright waited for `[role="dialog"]` to reappear. Both clicks now fire in the same microtask via Promise.all with a 1s timeout on the second click so the locator-resolution path fails fast instead of hanging the test.
This commit is contained in:
@@ -37,6 +37,12 @@ export function CreateStackDialog({ open, onOpenChange, onStackCreated, onStacks
|
||||
const { activeNode } = useNodes();
|
||||
const [createMode, setCreateMode] = useState<CreateMode>('empty');
|
||||
const [newStackName, setNewStackName] = useState('');
|
||||
// Synchronous guard. The disabled-button + setState pair can race a rapid
|
||||
// second click that lands before React has committed the disabled state,
|
||||
// re-entering the handler with a stale closure value of creatingEmpty and
|
||||
// firing a second POST. The ref check is read/written synchronously inside
|
||||
// the handler so the second invocation bails before issuing another POST.
|
||||
const creatingEmptyRef = useRef(false);
|
||||
const [creatingEmpty, setCreatingEmpty] = useState(false);
|
||||
const [dockerRunInput, setDockerRunInput] = useState('');
|
||||
const [convertedYaml, setConvertedYaml] = useState<string | null>(null);
|
||||
@@ -72,10 +78,11 @@ export function CreateStackDialog({ open, onOpenChange, onStackCreated, onStacks
|
||||
};
|
||||
|
||||
const handleCreateStack = async () => {
|
||||
if (creatingEmpty) return;
|
||||
if (creatingEmptyRef.current) return;
|
||||
if (!newStackName.trim()) return;
|
||||
const stackName = newStackName.trim();
|
||||
const sourceNodeId = activeNode?.id;
|
||||
creatingEmptyRef.current = true;
|
||||
setCreatingEmpty(true);
|
||||
try {
|
||||
const response = await apiFetch('/stacks', {
|
||||
@@ -104,6 +111,7 @@ export function CreateStackDialog({ open, onOpenChange, onStackCreated, onStacks
|
||||
console.error('Failed to create stack:', error);
|
||||
toast.error((error as Error).message || 'Failed to create stack.');
|
||||
} finally {
|
||||
creatingEmptyRef.current = false;
|
||||
setCreatingEmpty(false);
|
||||
}
|
||||
};
|
||||
@@ -300,6 +308,7 @@ export function CreateStackDialog({ open, onOpenChange, onStackCreated, onStacks
|
||||
onOpenChange(o);
|
||||
if (!o) {
|
||||
setCreateMode('empty');
|
||||
creatingEmptyRef.current = false;
|
||||
setCreatingEmpty(false);
|
||||
resetCreateFromGitForm();
|
||||
resetCreateFromDockerRunForm();
|
||||
|
||||
Reference in New Issue
Block a user