diff --git a/src/panel/components/Layout.spec.tsx b/src/panel/components/Layout.spec.tsx index 30dc563..1d724c5 100644 --- a/src/panel/components/Layout.spec.tsx +++ b/src/panel/components/Layout.spec.tsx @@ -15,7 +15,7 @@ function MockEvaluationsPanel(): React.ReactElement { return (
{ - savePreserveLogs(e.target.value); + savePreserveLogs((e.target as any).value); }} id="EvaluationsPanel" > @@ -137,7 +137,7 @@ describe("Layout", () => { }); it.each([ - [undefined, 1], + [true, 1], [false, 0], ])("locationChange should work", async (value, length) => { storageGetItem.mockReturnValue("Evaluations"); @@ -157,7 +157,7 @@ describe("Layout", () => { }); wrapper.find("#EvaluationsPanel").first().invoke("onChange")({ target: { value }, - }); + } as any); await act(async () => { window.postMessage( { diff --git a/src/panel/components/Layout.tsx b/src/panel/components/Layout.tsx index c8ec498..75a47b0 100644 --- a/src/panel/components/Layout.tsx +++ b/src/panel/components/Layout.tsx @@ -21,7 +21,7 @@ export function Layout(): React.ReactElement { Storage.getItem("selectedPanel") ?? "Bricks" ); const [evaluations, setEvaluations] = React.useState([]); - const [preserveLogs, savePreserveLogs] = React.useState(true); + const [preserveLogs, savePreserveLogs] = React.useState(false); const [transformations, setTransformations] = React.useState< Transformation[] >([]); @@ -34,17 +34,11 @@ export function Layout(): React.ReactElement { ((data = event.data.payload), data?.type === "evaluation") ) { setEvaluations((prev) => prev.concat(hydrate(data.payload, data.repo))); - } else if ( - event.data?.source === MESSAGE_SOURCE_HOOK && - ((data = event.data.payload), data?.type === "locationChange") && - !(preserveLogs ?? true) - ) { - setEvaluations([]); } } window.addEventListener("message", onMessage); return (): void => window.removeEventListener("message", onMessage); - }, [preserveLogs]); + }, []); React.useEffect(() => { function onMessage(event: MessageEvent): void { @@ -56,11 +50,20 @@ export function Layout(): React.ReactElement { setTransformations((prev) => prev.concat(hydrate(data.payload, data.repo)) ); - } else if ( + } + } + window.addEventListener("message", onMessage); + return (): void => window.removeEventListener("message", onMessage); + }, []); + + React.useEffect(() => { + function onMessage(event: MessageEvent): void { + if ( + !preserveLogs && event.data?.source === MESSAGE_SOURCE_HOOK && - ((data = event.data.payload), data?.type === "locationChange") && - !(preserveLogs ?? true) + event.data.payload?.type === "locationChange" ) { + setEvaluations([]); setTransformations([]); } }