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,
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) => {