Merge fed5da5 into 2b74337

easyops-cn · Jun 2, 2020 · d4cd82f · d4cd82f
2 parents 2b74337 + fed5da5
commit d4cd82f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 14 deletions.
diff --git a/src/panel/components/Layout.spec.tsx b/src/panel/components/Layout.spec.tsx
@@ -15,7 +15,7 @@ function MockEvaluationsPanel(): React.ReactElement {
   return (
     <div
       onChange={(e) => {
-        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
@@ -21,7 +21,7 @@ export function Layout(): React.ReactElement {
     Storage.getItem("selectedPanel") ?? "Bricks"
   );
   const [evaluations, setEvaluations] = React.useState<Evaluation[]>([]);
-  const [preserveLogs, savePreserveLogs] = React.useState<boolean>(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([]);
       }
     }