Judgement infinite scroll

packages/viewer/src/app/judgement/JudgementCount.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import useSWR from "swr";
+import fetcher from "@/lib/fetcher";
+import Placeholder from "@/components/Placeholder";
+
+export default function JudgementCount() {
+  const { data, isLoading } = useSWR<{
+    judgements: number;
+  }>(`/judgement/statistics`, fetcher);
+  return isLoading ? <Placeholder /> : data?.judgements;
+}

packages/viewer/src/app/judgement/Ostraca.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import useSWRInfinite from "swr/infinite";
+import type { User } from "@prisma/client";
+import InfiniteScroll from "react-infinite-scroll-component";
+import fetcher from "@/lib/fetcher";
+import Spinner from "@/components/Spinner";
+import Ostracon from "@/components/Ostracon";
+
+interface PageData {
+  data: { user: User; time: string; content: string }[];
+  nextCursor: string;
+}
+
+export default function Ostraca() {
+  const { data, size, setSize, isValidating } = useSWRInfinite<PageData>(
+    (pageIndex: number, previousPageData: PageData) =>
+      previousPageData && !previousPageData.data.length
+        ? null
+        : `/judgement/data${
+            pageIndex ? `?cursor=${previousPageData.nextCursor}` : ""
+          }`,
+    fetcher,
+  );
+  return (
+    <>
+      <InfiniteScroll
+        dataLength={data?.reduce((c, a) => c + a.data.length, 0) ?? 0}
+        next={() => setSize(size + 1)}
+        hasMore={Boolean(data?.[data.length - 1].data.length)}
+        loader
+        style={{ overflow: "inherit" }}
+        scrollThreshold="1024px"
+        endMessage={
+          isValidating || (
+            <p className="mt-4x text-center text-body-tertiary">没有更多了哦</p>
+          )
+        }
+      >
+        {data?.map(({ data: ostraca }) =>
+          ostraca.map((ostracon) => (
+            <Ostracon
+              ostracon={{ ...ostracon, time: new Date(ostracon.time) }}
+              key={`${ostracon.time}${ostracon.user.id}`}
+            />
+          )),
+        )}
+      </InfiniteScroll>
+      {isValidating && <Spinner />}
+    </>
+  );
+}

packages/viewer/src/app/judgement/data/route.ts

@@ -0,0 +1,19 @@
+import { NextResponse, type NextRequest } from "next/server";
+import prisma from "@/lib/prisma";
+
+const OSTRACA_PER_PAGE = parseInt(process.env.OSTRACA_PER_PAGE ?? "10", 10);
+
+export async function GET(request: NextRequest) {
+  const cursor = request.nextUrl.searchParams.get("cursor");
+  const judgements = await prisma.judgement.findMany({
+    select: { user: true, time: true, content: true },
+    // TODO: Unique filter (userId & time)
+    where: { time: { lt: cursor ? new Date(cursor) : undefined } },
+    take: OSTRACA_PER_PAGE,
+    orderBy: { time: "desc" },
+  });
+  return NextResponse.json({
+    data: judgements,
+    nextCursor: judgements[judgements.length - 1]?.time ?? null,
+  });
+}

packages/viewer/src/app/judgement/layout.tsx

@@ -1,7 +1,6 @@
-import React from "react";
-import UpdateButton from "@/components/UpdateButton";
-import prisma from "@/lib/prisma";
 import { judgementUrl } from "@/lib/luogu";
+import UpdateButton from "@/components/UpdateButton";
+import JudgementCount from "./JudgementCount";
 
 export const dynamic = "force-dynamic";
 
@@ -16,7 +15,9 @@ export default function Page({ children }: React.PropsWithChildren) {
           <ul className="list-group">
             <li className="d-flex justify-content-between lh-lg">
               <span className="fw-semibold">放逐令数量</span>
-              <span className="text-muted">{prisma.judgement.count()}</span>
+              <span className="text-muted">
+                <JudgementCount />
+              </span>
             </li>
           </ul>
           <div className="mt-2 mb-1">

packages/viewer/src/app/judgement/page.tsx

@@ -1,5 +1,5 @@
-import { redirect } from "next/navigation";
+import Ostraca from "./Ostraca";
 
 export default function Page() {
-  redirect(`/judgement/1`);
+  return <Ostraca />;
 }

packages/viewer/src/app/judgement/statistics/route.ts

@@ -0,0 +1,8 @@
+import { NextResponse, type NextRequest } from "next/server";
+import prisma from "@/lib/prisma";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(request: NextRequest) {
+  return NextResponse.json({ judgements: await prisma.judgement.count() });
+}

packages/viewer/src/app/user/[uid]/UserStatistics.tsx

@@ -2,10 +2,7 @@
 
 import useSWR from "swr";
 import fetcher from "@/lib/fetcher";
-
-function Placeholder() {
-  return <span className="placeholder" style={{ width: "1.5em" }} />;
-}
+import Placeholder from "@/components/Placeholder";
 
 export default function UserStatistics({ uid }: { uid: number }) {
   const { data, isLoading } = useSWR<{

packages/viewer/src/components/Placeholder.tsx

@@ -0,0 +1,3 @@
+export default function Placeholder() {
+  return <span className="placeholder" style={{ width: "1.5em" }} />;
+}