From 326653e25ace05c82f019a0629121efe9260b56e Mon Sep 17 00:00:00 2001
From: Koen Vlaswinkel <koesie10@github.com>
Date: Tue, 11 Oct 2022 17:01:01 +0200
Subject: [PATCH] Fix missing dependencies and cleanup of addEventListener

This will implement https://github.com/github/vscode-codeql/commit/ebba9949a8150a771bf726fb3af5d9b74ef0a0bf
and https://github.com/github/vscode-codeql/commit/d18e3dd40e57fdb233382cc40058848bd0347753
for the `Compare` and `RemoteQueries` views. These should not be
impacted in the same way as the `VariantAnalysis` view, but this will
make them consistent and more resilient to future changes.
---
 extensions/ql-vscode/src/view/compare/Compare.tsx     | 11 ++++++++---
 .../src/view/remote-queries/RemoteQueries.tsx         | 11 ++++++++---
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/extensions/ql-vscode/src/view/compare/Compare.tsx b/extensions/ql-vscode/src/view/compare/Compare.tsx
index 0b4812246..48c077c7b 100644
--- a/extensions/ql-vscode/src/view/compare/Compare.tsx
+++ b/extensions/ql-vscode/src/view/compare/Compare.tsx
@@ -31,7 +31,7 @@ export function Compare(_: Record<string, never>): JSX.Element {
   const hasRows = comparison.rows && (comparison.rows.to.length || comparison.rows.from.length);
 
   useEffect(() => {
-    window.addEventListener('message', (evt: MessageEvent) => {
+    const listener = (evt: MessageEvent) => {
       if (evt.origin === window.origin) {
         const msg: ToCompareViewMessage = evt.data;
         switch (msg.t) {
@@ -43,8 +43,13 @@ export function Compare(_: Record<string, never>): JSX.Element {
         const origin = evt.origin.replace(/\n|\r/g, '');
         console.error(`Invalid event origin ${origin}`);
       }
-    });
-  });
+    };
+    window.addEventListener('message', listener);
+
+    return () => {
+      window.removeEventListener('message', listener);
+    };
+  }, []);
   if (!comparison) {
     return <div>Waiting for results to load.</div>;
   }
diff --git a/extensions/ql-vscode/src/view/remote-queries/RemoteQueries.tsx b/extensions/ql-vscode/src/view/remote-queries/RemoteQueries.tsx
index b05d7f4a3..085830711 100644
--- a/extensions/ql-vscode/src/view/remote-queries/RemoteQueries.tsx
+++ b/extensions/ql-vscode/src/view/remote-queries/RemoteQueries.tsx
@@ -395,7 +395,7 @@ export function RemoteQueries(): JSX.Element {
   const [sort, setSort] = useState<Sort>('name');
 
   useEffect(() => {
-    window.addEventListener('message', (evt: MessageEvent) => {
+    const listener = (evt: MessageEvent) => {
       if (evt.origin === window.origin) {
         const msg: ToRemoteQueriesMessage = evt.data;
         if (msg.t === 'setRemoteQueryResult') {
@@ -408,8 +408,13 @@ export function RemoteQueries(): JSX.Element {
         const origin = evt.origin.replace(/\n|\r/g, '');
         console.error(`Invalid event origin ${origin}`);
       }
-    });
-  });
+    };
+    window.addEventListener('message', listener);
+
+    return () => {
+      window.removeEventListener('message', listener);
+    };
+  }, []);
 
   if (!queryResult) {
     return <div>Waiting for results to load.</div>;