Only reload showplan once, don't add multiple listeners.

src/showplanner/ImporterModal.tsx

@@ -14,18 +14,19 @@ export function ImporterModal(props: ImporterProps) {
   // Add support for closing the modal when the importer wants to reload the show plan.
   // There is a similar listener in showplanner/index.tsx to actually reload the show plan.
   useEffect(() => {
-    window.addEventListener(
+    function reloadListener(event: MessageEvent) {
-      "message",
-      (event) => {
       if (!event.origin.includes("ury.org.uk")) {
         return;
       }
       if (event.data === "reload_showplan") {
         props.close();
       }
-      },
+    }
-      false
+
-    );
+    window.addEventListener("message", reloadListener);
+    return () => {
+      window.removeEventListener("message", reloadListener);
+    };
   });
   return (
     <Modal isOpen={props.isOpen} onRequestClose={props.close}>

src/showplanner/index.tsx

@@ -374,9 +374,7 @@ const Showplanner: React.FC<{ timeslotId: number }> = function({ timeslotId }) {
   // Add support for reloading the show plan from the iFrames.
   // There is a similar listener in showplanner/ImporterModal.tsx to handle closing the iframe.
   useEffect(() => {
-    window.addEventListener(
+    function reloadListener(event: MessageEvent) {
-      "message",
-      (event) => {
       if (!event.origin.includes("ury.org.uk")) {
         return;
       }
@@ -384,10 +382,14 @@ const Showplanner: React.FC<{ timeslotId: number }> = function({ timeslotId }) {
         session.currentTimeslot !== null &&
           dispatch(getShowplan(session.currentTimeslot.timeslot_id));
       }
-      },
+    }
-      false
+
-    );
+    window.addEventListener("message", reloadListener);
+    return () => {
+      window.removeEventListener("message", reloadListener);
+    };
   });
+
   if (showplan === null) {
     return (
       <LoadingDialogue