regalijan/car-crushers-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Set message channel in a ref

Browse Source
This commit is contained in:
Regalijan 2023-10-29 03:38:07 -04:00
parent 925f3aeedf
commit 1bf09bcf51
Signed by: regalijan
GPG Key ID: 5D4196DA269EF520
1 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/routes/mod-queue.tsx
View File

@ -18,7 +18,13 @@ import {
useToast, useToast,
VStack, VStack,
} from "@chakra-ui/react"; } 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 AppealCard from "../../components/AppealCard.js";
import GameAppealCard from "../../components/GameAppealCard.js"; import GameAppealCard from "../../components/GameAppealCard.js";
import NewGameBan from "../../components/NewGameBan.js"; import NewGameBan from "../../components/NewGameBan.js";
@ -119,9 +125,7 @@ export default function () {
[] as { element: ReactNode; id: string }[], [] as { element: ReactNode; id: string }[],
); );
const [before, setBefore] = useState(Date.now()); const [before, setBefore] = useState(Date.now());
const [messageChannel, setMessageChannel] = useState( const messageChannel: MutableRefObject<MessageChannel | null> = useRef(null);
null as MessageChannel | null,
);
const toast = useToast(); const toast = useToast();
for (const type of pageProps.entry_types) for (const type of pageProps.entry_types)
@ -132,14 +136,14 @@ export default function () {
); );
useEffect(() => { useEffect(() => {
if (messageChannel) { if (messageChannel.current) {
messageChannel.port1.onmessage = function (ev) { messageChannel.current.port1.onmessage = function (ev) {
const { data }: { data: string } = ev; const { data }: { data: string } = ev;
setEntries([...entries].filter((entry) => entry.id !== data)); setEntries([...entries].filter((entry) => entry.id !== data));
}; };
} }
}, [entries, messageChannel]); }, [entries, messageChannel.current]);
async function updateQueue( async function updateQueue(
queue_type: string, queue_type: string,
@ -231,7 +235,7 @@ export default function () {
element: ( element: (
<AppealCard <AppealCard
{...(entry as AppealCardProps & { port?: MessagePort })} {...(entry as AppealCardProps & { port?: MessagePort })}
port={messageChannel?.port2} port={messageChannel.current?.port2}
/> />
), ),
id: `appeal_${entry.id}`, id: `appeal_${entry.id}`,
@ -244,7 +248,7 @@ export default function () {
element: ( element: (
<GameAppealCard <GameAppealCard
{...(entry as GameAppealProps & { port?: MessagePort })} {...(entry as GameAppealProps & { port?: MessagePort })}
port={messageChannel?.port2} port={messageChannel.current?.port2}
/> />
), ),
id: `gma_${entry.id}`, id: `gma_${entry.id}`,
@ -257,7 +261,7 @@ export default function () {
element: ( element: (
<InactivityNoticeCard <InactivityNoticeCard
{...(entry as InactivityNoticeProps & { port?: MessagePort })} {...(entry as InactivityNoticeProps & { port?: MessagePort })}
port={messageChannel?.port2} port={messageChannel.current?.port2}
/> />
), ),
id: `inactivity_${entry.id}`, id: `inactivity_${entry.id}`,
@ -270,7 +274,7 @@ export default function () {
element: ( element: (
<ReportCard <ReportCard
{...(entry as ReportCardProps & { port?: MessagePort })} {...(entry as ReportCardProps & { port?: MessagePort })}
port={messageChannel?.port2} port={messageChannel.current?.port2}
/> />
), ),
id: `report_${entry.id}`, id: `report_${entry.id}`,
@ -303,6 +307,8 @@ export default function () {
}; };
useEffect(() => { useEffect(() => {
messageChannel.current = new MessageChannel();
(async function () { (async function () {
await updateQueue(pageProps.entry_types[0].value, before, false, true); await updateQueue(pageProps.entry_types[0].value, before, false, true);
})(); })();
@ -315,10 +321,6 @@ export default function () {
itemModals[modal].onOpen(); itemModals[modal].onOpen();
}, []); }, []);
useEffect(() => {
setMessageChannel(new MessageChannel());
}, []);
const ItemDisplay = ( const ItemDisplay = (
<Select <Select
onChange={async (v) => { onChange={async (v) => {