feat: type-safe SSE rewrite
This commit is contained in:
@@ -7,6 +7,7 @@ import SearchBox, { type Filters, type ParsedQuery } from "@/components/search";
|
||||
import { SimpleTooltip } from "@/components/tooltip";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import type { auditLog } from "@/lib/db/schema";
|
||||
import { sse } from "@/lib/db/sse-endpoints";
|
||||
|
||||
type AuditLog = typeof auditLog.$inferSelect;
|
||||
|
||||
@@ -22,10 +23,9 @@ export default function AuditLogViewer({
|
||||
const entryRefs = useRef(new Map<string, HTMLDivElement>());
|
||||
|
||||
useEffect(() => {
|
||||
const es = new EventSource("/api/ev/log");
|
||||
es.onmessage = (res) =>
|
||||
updateLogs((x) => [...x.slice(-999), JSON.parse(res.data)]);
|
||||
return () => es.close();
|
||||
return sse.log.sub("update", (res) =>
|
||||
updateLogs((x) => [...x.slice(-999), res]),
|
||||
).clean;
|
||||
}, []);
|
||||
|
||||
const filters: Filters = {
|
||||
|
||||
@@ -5,6 +5,7 @@ import { Lock, Unlock } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import {
|
||||
@@ -22,7 +23,6 @@ import {
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { toast } from "sonner";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
SidebarMenu,
|
||||
@@ -37,6 +37,7 @@ import {
|
||||
} from "@/components/ui/tooltip";
|
||||
import { setLimit, toggleCheck, toggleLock } from "@/lib/api";
|
||||
import { shared } from "@/lib/comms";
|
||||
import { sse } from "@/lib/db/sse-endpoints";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function SidebarLink({
|
||||
@@ -219,8 +220,7 @@ export function Watcher() {
|
||||
shared.signal("sync", () => router.refresh());
|
||||
|
||||
useEffect(() => {
|
||||
const es = new EventSource(`/api/artifact/ev`);
|
||||
es.addEventListener("update", () => router.refresh());
|
||||
const { clean } = sse.artifact.sub("update", () => router.refresh());
|
||||
const interval = setInterval(() => {
|
||||
fetch("/api/artifact/count")
|
||||
.then((r) => r.json())
|
||||
@@ -232,7 +232,7 @@ export function Watcher() {
|
||||
.catch((e) => console.error("Fetching artifact count failed", e));
|
||||
}, 120000);
|
||||
return () => {
|
||||
es.close();
|
||||
clean();
|
||||
clearInterval(interval);
|
||||
};
|
||||
}, [router]);
|
||||
|
||||
@@ -5,6 +5,7 @@ import { Lock, Logs, Unlock } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import {
|
||||
@@ -22,7 +23,6 @@ import {
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { toast } from "sonner";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
SidebarMenu,
|
||||
@@ -38,6 +38,7 @@ import {
|
||||
import { shared } from "@/lib/comms";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { setFree, setLimit, toggleCheck, toggleLock } from "../api";
|
||||
import { sse } from "@/lib/db/sse-endpoints";
|
||||
|
||||
export function SidebarLink({
|
||||
submission,
|
||||
@@ -287,8 +288,7 @@ export function Watcher() {
|
||||
shared.signal("sync", () => router.refresh());
|
||||
|
||||
useEffect(() => {
|
||||
const es = new EventSource(`/api/rubgram/ev`);
|
||||
es.addEventListener("update", () => router.refresh());
|
||||
const { clean } = sse.rubgram.sub("update", () => router.refresh());
|
||||
const interval = setInterval(() => {
|
||||
fetch("/api/rubgram/count")
|
||||
.then((r) => r.json())
|
||||
@@ -300,7 +300,7 @@ export function Watcher() {
|
||||
.catch((e) => console.error("Fetching rubgram count failed", e));
|
||||
}, 60000);
|
||||
return () => {
|
||||
es.close();
|
||||
clean();
|
||||
clearInterval(interval);
|
||||
};
|
||||
}, [router]);
|
||||
|
||||
+10
-16
@@ -8,7 +8,6 @@ import { redirect } from "next/navigation";
|
||||
import { actionLog } from "@/lib/api";
|
||||
import { adminCheck } from "@/lib/auth";
|
||||
import { db } from "@/lib/db";
|
||||
import { ps } from "@/lib/db/redis";
|
||||
import {
|
||||
endgameArchive,
|
||||
endgameDiscord,
|
||||
@@ -19,6 +18,7 @@ import {
|
||||
endgameTypes,
|
||||
settings,
|
||||
} from "@/lib/db/schema";
|
||||
import { sse } from "@/lib/db/sse-endpoints";
|
||||
import type { TypedFormData } from "./type";
|
||||
|
||||
const {
|
||||
@@ -51,7 +51,7 @@ export async function wipe() {
|
||||
revalidatePath("/rubgram/admin");
|
||||
revalidatePath("/rubgram");
|
||||
|
||||
ps.publish({ type: "wipe" }, { topic: "rubgram", event: "update" });
|
||||
sse.rubgram.pub("update", { type: "wipe" });
|
||||
|
||||
await actionLog(`Deleted rubgram submissions`);
|
||||
redirect("/rubgram/admin");
|
||||
@@ -80,7 +80,7 @@ export async function toggleCheck(submissionId: string) {
|
||||
revalidatePath("/rubgram/admin");
|
||||
revalidatePath("/rubgram");
|
||||
|
||||
ps.publish({ type: "toggleCheck" }, { topic: "rubgram", event: "update" });
|
||||
sse.rubgram.pub("update", { type: "toggleCheck" });
|
||||
|
||||
await actionLog(`Toggled an rubgram submission check mark`);
|
||||
}
|
||||
@@ -98,7 +98,7 @@ export async function toggleLock() {
|
||||
revalidatePath("/rubgram/admin");
|
||||
revalidatePath("/rubgram");
|
||||
|
||||
ps.publish({ type: "toggleLock" }, { topic: "rubgram", event: "update" });
|
||||
sse.rubgram.pub("update", { type: "toggleLock" });
|
||||
|
||||
await actionLog(
|
||||
`${(existing.length ? existing[0].locked : true) ? "Locked" : "Unlocked"} rubgram submission`,
|
||||
@@ -122,7 +122,7 @@ export async function setLimit(limit: number) {
|
||||
revalidatePath("/rubgram/admin");
|
||||
revalidatePath("/rubgram");
|
||||
|
||||
ps.publish({ type: "setLimit" }, { topic: "rubgram", event: "update" });
|
||||
sse.rubgram.pub("update", { type: "setLimit" });
|
||||
|
||||
await actionLog(
|
||||
`Set rubgram submit limit to ${limit < 0 ? "unlimited" : limit}`,
|
||||
@@ -146,7 +146,7 @@ export async function setFree(free: number) {
|
||||
revalidatePath("/rubgram/admin");
|
||||
revalidatePath("/rubgram");
|
||||
|
||||
ps.publish({ type: "setFree" }, { topic: "rubgram", event: "update" });
|
||||
sse.rubgram.pub("update", { type: "setFree" });
|
||||
|
||||
await actionLog(`Set rubgram submit limit to ${free}`);
|
||||
}
|
||||
@@ -226,10 +226,7 @@ export async function submitEndgame(formData: EndgameFormData) {
|
||||
})
|
||||
.returning({ queue: endgameSubmissions.queue, id: endgameSubmissions.id });
|
||||
revalidatePath("/rubgram/admin");
|
||||
ps.publish(
|
||||
{ type: "submit", sub: queue.id },
|
||||
{ topic: "rubgram", event: "update" },
|
||||
);
|
||||
sse.rubgram.pub("update", { type: "submit", sub: queue.id });
|
||||
return queue;
|
||||
}
|
||||
|
||||
@@ -300,10 +297,7 @@ export async function submitEndgamePayment(formData: EndgamePaymentFormData) {
|
||||
});
|
||||
revalidatePath("/rubgram/admin");
|
||||
if (Array.isArray(queue))
|
||||
ps.publish(
|
||||
{ type: "paid", sub: queue[0].id },
|
||||
{ topic: "rubgram", event: "update" },
|
||||
);
|
||||
sse.rubgram.pub("update", { type: "paid", sub: queue[0].id });
|
||||
return Array.isArray(queue) ? queue[0] : queue;
|
||||
}
|
||||
|
||||
@@ -418,7 +412,7 @@ export async function cancel(sid: string) {
|
||||
|
||||
await removeExpiredSubmissions();
|
||||
|
||||
ps.publish({ type: "cancel" }, { topic: "rubgram", event: "update" });
|
||||
sse.rubgram.pub("update", { type: "cancel" });
|
||||
|
||||
revalidatePath("/rubgram");
|
||||
}
|
||||
@@ -467,7 +461,7 @@ export async function debugUploadSlip(sid: string, image: File) {
|
||||
.where(eq(endgameSubmissions.id, sid));
|
||||
});
|
||||
|
||||
ps.publish({ type: "uploadSlip" }, { topic: "rubgram", event: "update" });
|
||||
sse.rubgram.pub("update", { type: "uploadSlip" });
|
||||
|
||||
revalidatePath("/rubgram/admin");
|
||||
}
|
||||
|
||||
@@ -23,7 +23,7 @@ import {
|
||||
calcPrice,
|
||||
cancel,
|
||||
type getDiscordSession,
|
||||
getEndgameConfig,
|
||||
type getEndgameConfig,
|
||||
loginDiscord,
|
||||
} from "./api";
|
||||
import { RulesDialog } from "./rules";
|
||||
@@ -105,8 +105,7 @@ export function ServiceSelector({
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{t.price} {" "}
|
||||
<span className="opacity-50">บาท</span>
|
||||
{t.price} <span className="opacity-50">บาท</span>
|
||||
</>
|
||||
)}
|
||||
</Kbd>
|
||||
|
||||
@@ -79,6 +79,7 @@ import { cn } from "@/lib/utils";
|
||||
import { TierListCell } from "./cell";
|
||||
import { Draggable } from "./character";
|
||||
import { TierListContext } from "./context";
|
||||
import { tlSse } from "@/lib/db/sse-endpoints";
|
||||
|
||||
function Untiered({
|
||||
children,
|
||||
@@ -179,14 +180,16 @@ export function TierList({
|
||||
|
||||
useEffect(() => {
|
||||
setEvStatus((x) => ({ ...x, ev: "connecting" }));
|
||||
const es = new EventSource(`/api/tl/${version.id}/ev`);
|
||||
es.onopen = () => setEvStatus((x) => ({ ...x, ev: "ready" }));
|
||||
es.addEventListener("update_states", (d) => setStates(JSON.parse(d.data)));
|
||||
es.addEventListener("update_placements", (d) =>
|
||||
setPlacements(JSON.parse(d.data)),
|
||||
);
|
||||
es.onerror = () => setEvStatus((x) => ({ ...x, ev: "unknown" }));
|
||||
return () => es.close();
|
||||
return tlSse(version.id).subMany(
|
||||
{
|
||||
update_states: setStates,
|
||||
update_placements: setPlacements,
|
||||
},
|
||||
{
|
||||
onopen: () => setEvStatus((x) => ({ ...x, ev: "ready" })),
|
||||
onerror: () => setEvStatus((x) => ({ ...x, ev: "unknown" })),
|
||||
},
|
||||
).clean;
|
||||
}, [version.id]);
|
||||
//#endregion
|
||||
|
||||
|
||||
Reference in New Issue
Block a user