fix: Add promise cancellation check to ActionDetail.tsx
Prevent state updates on unmounted components in handleRemoveFromJail. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import { useCallback, useState } from "react";
|
import { useCallback, useEffect, useRef, useState } from "react";
|
||||||
import { Button, Field, Input, MessageBar, MessageBarBody } from "@fluentui/react-components";
|
import { Button, Field, Input, MessageBar, MessageBarBody } from "@fluentui/react-components";
|
||||||
import { Delete24Regular, LinkEdit24Regular } from "@fluentui/react-icons";
|
import { Delete24Regular, LinkEdit24Regular } from "@fluentui/react-icons";
|
||||||
import type { ActionConfig } from "../../types/config";
|
import type { ActionConfig } from "../../types/config";
|
||||||
@@ -18,22 +18,35 @@ export function ActionDetail({ action, onAssignClick, onRemovedFromJail }: Actio
|
|||||||
const [removingJail, setRemovingJail] = useState<string | null>(null);
|
const [removingJail, setRemovingJail] = useState<string | null>(null);
|
||||||
const [removeError, setRemoveError] = useState<string | null>(null);
|
const [removeError, setRemoveError] = useState<string | null>(null);
|
||||||
const { fetchRawContent, saveRawContent } = useActionRawFile(action.name);
|
const { fetchRawContent, saveRawContent } = useActionRawFile(action.name);
|
||||||
|
const removeControllerRef = useRef<AbortController | null>(null);
|
||||||
|
|
||||||
const handleRemoveFromJail = useCallback(
|
const handleRemoveFromJail = useCallback(
|
||||||
(jailName: string): void => {
|
(jailName: string): void => {
|
||||||
|
removeControllerRef.current?.abort();
|
||||||
|
const controller = new AbortController();
|
||||||
|
removeControllerRef.current = controller;
|
||||||
|
|
||||||
setRemovingJail(jailName);
|
setRemovingJail(jailName);
|
||||||
setRemoveError(null);
|
setRemoveError(null);
|
||||||
onRemovedFromJail(jailName)
|
onRemovedFromJail(jailName)
|
||||||
.catch((err: unknown) => {
|
.catch((err: unknown) => {
|
||||||
|
if (controller.signal.aborted) return;
|
||||||
setRemoveError(err instanceof Error ? err.message : "Failed to remove action from jail.");
|
setRemoveError(err instanceof Error ? err.message : "Failed to remove action from jail.");
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
|
if (controller.signal.aborted) return;
|
||||||
setRemovingJail(null);
|
setRemovingJail(null);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
[onRemovedFromJail],
|
[onRemovedFromJail],
|
||||||
);
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
return (): void => {
|
||||||
|
removeControllerRef.current?.abort();
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div className={styles.fieldRow} style={{ marginBottom: "var(--spacingVerticalS)" }}>
|
<div className={styles.fieldRow} style={{ marginBottom: "var(--spacingVerticalS)" }}>
|
||||||
|
|||||||
Reference in New Issue
Block a user