Use MessageChannels to self-delete queue items
Previous method would cause site to die
This commit is contained in:
@ -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%"
|
||||
|
Reference in New Issue
Block a user