Set message channel in a ref

regalijan · Oct 29, 2023 · 1bf09bc · 1bf09bc
1 parent 925f3ae
commit 1bf09bc
Showing 1 changed file with 17 additions and 15 deletions.
diff --git a/app/routes/mod-queue.tsx b/app/routes/mod-queue.tsx
@@ -18,7 +18,13 @@ import {
   useToast,
   VStack,
 } from "@chakra-ui/react";
-import { type ReactNode, useEffect, useState } from "react";
+import {
+  type MutableRefObject,
+  type ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import AppealCard from "../../components/AppealCard.js";
 import GameAppealCard from "../../components/GameAppealCard.js";
 import NewGameBan from "../../components/NewGameBan.js";
@@ -119,9 +125,7 @@ export default function () {
     [] as { element: ReactNode; id: string }[],
   );
   const [before, setBefore] = useState(Date.now());
-  const [messageChannel, setMessageChannel] = useState(
-    null as MessageChannel | null,
-  );
+  const messageChannel: MutableRefObject<MessageChannel | null> = useRef(null);
   const toast = useToast();
 
   for (const type of pageProps.entry_types)
@@ -132,14 +136,14 @@ export default function () {
     );
 
   useEffect(() => {
-    if (messageChannel) {
-      messageChannel.port1.onmessage = function (ev) {
+    if (messageChannel.current) {
+      messageChannel.current.port1.onmessage = function (ev) {
         const { data }: { data: string } = ev;
 
         setEntries([...entries].filter((entry) => entry.id !== data));
       };
     }
-  }, [entries, messageChannel]);
+  }, [entries, messageChannel.current]);
 
   async function updateQueue(
     queue_type: string,
@@ -231,7 +235,7 @@ export default function () {
             element: (
               <AppealCard
                 {...(entry as AppealCardProps & { port?: MessagePort })}
-                port={messageChannel?.port2}
+                port={messageChannel.current?.port2}
               />
             ),
             id: `appeal_${entry.id}`,
@@ -244,7 +248,7 @@ export default function () {
             element: (
               <GameAppealCard
                 {...(entry as GameAppealProps & { port?: MessagePort })}
-                port={messageChannel?.port2}
+                port={messageChannel.current?.port2}
               />
             ),
             id: `gma_${entry.id}`,
@@ -257,7 +261,7 @@ export default function () {
             element: (
               <InactivityNoticeCard
                 {...(entry as InactivityNoticeProps & { port?: MessagePort })}
-                port={messageChannel?.port2}
+                port={messageChannel.current?.port2}
               />
             ),
             id: `inactivity_${entry.id}`,
@@ -270,7 +274,7 @@ export default function () {
             element: (
               <ReportCard
                 {...(entry as ReportCardProps & { port?: MessagePort })}
-                port={messageChannel?.port2}
+                port={messageChannel.current?.port2}
               />
             ),
             id: `report_${entry.id}`,
@@ -303,6 +307,8 @@ export default function () {
   };
 
   useEffect(() => {
+    messageChannel.current = new MessageChannel();
+
     (async function () {
       await updateQueue(pageProps.entry_types[0].value, before, false, true);
     })();
@@ -315,10 +321,6 @@ export default function () {
     itemModals[modal].onOpen();
   }, []);
 
-  useEffect(() => {
-    setMessageChannel(new MessageChannel());
-  }, []);
-
   const ItemDisplay = (
     <Select
       onChange={async (v) => {