Use MessageChannels to self-delete queue items

Previous method would cause site to die
This commit is contained in:
2023-10-24 00:32:53 -04:00
parent 912cd0581a
commit 5d38bae59c
5 changed files with 75 additions and 36 deletions

View File

@ -18,7 +18,7 @@ import {
useToast,
VStack,
} from "@chakra-ui/react";
import { type ReactElement, useEffect, useState } from "react";
import { type ReactNode, useEffect, useState } from "react";
import AppealCard from "../../components/AppealCard.js";
import GameAppealCard from "../../components/GameAppealCard.js";
import NewGameBan from "../../components/NewGameBan.js";
@ -115,8 +115,11 @@ export default function () {
const pageProps = useLoaderData<typeof loader>();
const isDesktop = useBreakpointValue({ base: false, lg: true });
const entryTypes = [];
const [entries, setEntries] = useState([] as ReactElement[]);
const [entries, setEntries] = useState(
[] as { element: ReactNode; id: string }[],
);
const [before, setBefore] = useState(Date.now());
const [messageChannel] = useState(null as MessageChannel | null);
const toast = useToast();
for (const type of pageProps.entry_types)
@ -126,6 +129,16 @@ export default function () {
</option>,
);
useEffect(() => {
if (!messageChannel) return;
messageChannel.port1.onmessage = function (ev) {
const { data }: { data: string } = ev;
setEntries([...entries].filter((entry) => entry.id !== data));
};
}, [messageChannel]);
async function updateQueue(
queue_type: string,
before: number,
@ -212,24 +225,54 @@ export default function () {
switch (cardType) {
case "appeal":
newEntries.push(<AppealCard {...(entry as AppealCardProps)} />);
newEntries.push({
element: (
<AppealCard
{...(entry as AppealCardProps & { port?: MessagePort })}
port={messageChannel?.port2}
/>
),
id: `appeal_${entry.id}`,
});
break;
case "gma":
newEntries.push(<GameAppealCard {...(entry as GameAppealProps)} />);
newEntries.push({
element: (
<GameAppealCard
{...(entry as GameAppealProps & { port?: MessagePort })}
port={messageChannel?.port2}
/>
),
id: `gma_${entry.id}`,
});
break;
case "inactivity":
newEntries.push(
<InactivityNoticeCard {...(entry as InactivityNoticeProps)} />,
);
newEntries.push({
element: (
<InactivityNoticeCard
{...(entry as InactivityNoticeProps & { port?: MessagePort })}
port={messageChannel?.port2}
/>
),
id: `inactivity_${entry.id}`,
});
break;
case "report":
newEntries.push(<ReportCard {...(entry as ReportCardProps)} />);
newEntries.push({
element: (
<ReportCard
{...(entry as ReportCardProps & { port?: MessagePort })}
port={messageChannel?.port2}
/>
),
id: `report_${entry.id}`,
});
break;
}
@ -311,7 +354,7 @@ export default function () {
{ItemDisplay}
</Box>
{entries.length ? (
entries
entries.map((entry) => entry.element)
) : (
<Container
left="50%"