fix(viewer): judgements

refactor(viewer): svg -> react-icons fix(viewer): using gfm markdown render plugin (to be fixed) NOTICE THAT ESLint NOT PASSED
piterator-org · Oct 1, 2023 · 0db0a0b · 0db0a0b
1 parent d7861b9
commit 0db0a0b
Show file tree

Hide file tree

Showing 24 changed files with 342 additions and 323 deletions.
diff --git a/packages/viewer/package.json b/packages/viewer/package.json
@@ -19,9 +19,11 @@
     "puppeteer": "^21.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.11.0",
     "react-infinite-scroll-component": "^6.1.0",
     "react-markdown": "^9.0.0",
     "rehype-katex": "^7.0.0",
+    "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
     "socket.io-client": "^4.7.2",
     "swr": "^2.2.2"

diff --git a/packages/viewer/src/app/(indices)/DiscussionIndex.tsx b/packages/viewer/src/app/(indices)/DiscussionIndex.tsx
@@ -1,36 +1,26 @@
 import stringifyTime from "@/lib/time";
 import type { PostWithLatestSnapshotMeta } from "@/lib/post";
 import DiscussionEntry from "@/components/DiscussionEntry";
+import { BsChatDots } from "react-icons/bs";
 
-export default function DiscussionIndex({
-  discussions,
+export default function PostIndex({
+  posts,
 }: {
-  discussions: PostWithLatestSnapshotMeta[];
+  posts: PostWithLatestSnapshotMeta[];
 }) {
   return (
     <>
-      {discussions.map((discussion) => (
+      {posts.map((post) => (
         <DiscussionEntry
-          discussion={discussion}
-          key={discussion.id}
+          discussion={post}
+          key={post.id}
           decoratorBreakpoint="md"
           metaBottom={
             <>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="1em"
-                height="1em"
-                fill="currentColor"
-                className="bi bi-chat-dots"
-                viewBox="0 0 16 16"
-                style={{ position: "relative", top: "-.1125em" }}
-              >
-                <path d="M5 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
-                <path d="m2.165 15.803.02-.004c1.83-.363 2.948-.842 3.468-1.105A9.06 9.06 0 0 0 8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6a10.437 10.437 0 0 1-.524 2.318l-.003.011a10.722 10.722 0 0 1-.244.637c-.079.186.074.394.273.362a21.673 21.673 0 0 0 .693-.125zm.8-3.108a1 1 0 0 0-.287-.801C1.618 10.83 1 9.468 1 8c0-3.192 3.004-6 7-6s7 2.808 7 6c0 3.193-3.004 6-7 6a8.06 8.06 0 0 1-2.088-.272 1 1 0 0 0-.711.074c-.387.196-1.24.57-2.634.893a10.97 10.97 0 0 0 .398-2z" />
-              </svg>{" "}
-              {discussion.replyCount}
+              <BsChatDots style={{ position: "relative", top: "-.1125em" }} />{" "}
+              {post.replyCount}
               <span className="float-end">
-                {stringifyTime(discussion.time)}
+                {stringifyTime(post.time)}
               </span>
             </>
           }

diff --git a/packages/viewer/src/app/(indices)/index/[page]/layout.tsx b/packages/viewer/src/app/(indices)/index/[page]/layout.tsx
@@ -9,7 +9,7 @@ export default async function Layout({
 }: React.PropsWithChildren<{ params: { page: string } }>) {
   const page = parseInt(params.page, 10);
   const numPages = Math.ceil(
-    (await prisma.discussion.count({ where: { takedown: { is: null } } })) /
+    (await prisma.post.count({ where: { takedown: { is: null } } })) /
       NUM_DISCUSSIONS_INDEX,
   );
   const { pagesLocalAttachedFront, pagesLocalAttachedBack, pagesLocal } =

diff --git a/packages/viewer/src/app/(indices)/index/[page]/page.tsx b/packages/viewer/src/app/(indices)/index/[page]/page.tsx
@@ -1,19 +1,19 @@
 import prisma from "@/lib/prisma";
 import { getPost } from "@/lib/post";
 import { NUM_DISCUSSIONS_INDEX } from "../../constants";
-import DiscussionIndex from "../../DiscussionIndex";
+import PostIndex from "../../DiscussionIndex";
 
 export const metadata = { title: "索引 - 洛谷帖子保存站" };
 
 export default async function Page({ params }: { params: { page: string } }) {
   const page = parseInt(params.page, 10);
-  const discussions = await prisma.post.findMany({
+  const posts = await prisma.post.findMany({
     select: getPost.latestNoContent,
     where: { takedown: { is: null } },
     orderBy: { id: "desc" },
     skip: (page - 1) * NUM_DISCUSSIONS_INDEX,
     take: NUM_DISCUSSIONS_INDEX,
   });
 
-  return <DiscussionIndex discussions={discussions} />;
+  return <PostIndex posts={posts} />;
 }
diff --git a/packages/viewer/src/app/(indices)/popular/page.tsx b/packages/viewer/src/app/(indices)/popular/page.tsx
@@ -1,7 +1,7 @@
 import prisma from "@/lib/prisma";
 import { getPost } from "@/lib/post";
 import { NUM_DISCUSSIONS_INDEX } from "../constants";
-import DiscussionIndex from "../DiscussionIndex";
+import PostIndex from "../DiscussionIndex";
 
 export const metadata = { title: "热门 - 洛谷帖子保存站" };
 
@@ -11,8 +11,8 @@ export default async function MostReplied() {
   return (
     <>
       <h3 className="pb-1 text-center mb-4s">最多回复</h3>
-      <DiscussionIndex
-        discussions={await prisma.post.findMany({
+      <PostIndex
+        posts={await prisma.post.findMany({
           where: { takedown: { is: null } },
           orderBy: { replyCount: "desc" },
           take: NUM_DISCUSSIONS_INDEX,

diff --git a/packages/viewer/src/app/Footer.tsx b/packages/viewer/src/app/Footer.tsx
@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { BsGithub } from "react-icons/bs";
 
 declare global {
   const VERSION: string;
@@ -8,7 +9,7 @@ declare global {
 }
 
 function ExternalLink(
-  params: Omit<JSX.IntrinsicElements["a"], "className" | "target" | "rel">,
+  params: Omit<JSX.IntrinsicElements["a"], "className" | "target" | "rel">
 ) {
   return (
     <a // eslint-disable-line jsx-a11y/anchor-has-content
@@ -69,18 +70,7 @@ export default function Footer() {
               </Link>{" "}
               &middot;{" "}
               <ExternalLink href="https://github.com/piterator-org/luogu-discussion-archive">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="1em"
-                  height="1em"
-                  fill="currentColor"
-                  className="bi bi-github position-relative"
-                  viewBox="0 0 16 16"
-                  style={{ top: "-.1em" }}
-                >
-                  <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
-                </svg>{" "}
-                GitHub
+                <BsGithub className="position-relative" /> GitHub
               </ExternalLink>
             </div>
             <div className="mt-2">

diff --git a/packages/viewer/src/app/about/get-counter-data.ts b/packages/viewer/src/app/about/get-counter-data.ts
@@ -2,8 +2,8 @@ import prisma from "@/lib/prisma";
 
 export default async function getCounterData() {
   return {
-    discussions: await prisma.discussion.count(),
-    snapshots: await prisma.snapshot.count(),
+    discussions: await prisma.post.count(),
+    snapshots: await prisma.postSnapshot.count(),
     replies: await prisma.reply.count(),
     judgements: await prisma.judgement.count(),
   };

diff --git a/packages/viewer/src/app/explore/Discussions.tsx b/packages/viewer/src/app/explore/Discussions.tsx
@@ -2,14 +2,15 @@ import prisma from "@/lib/prisma";
 import stringifyTime from "@/lib/time";
 import { getPost } from "@/lib/post";
 import DiscussionEntry from "@/components/DiscussionEntry";
+import { BsCalendar4Week, BsChatDots } from "react-icons/bs";
 
 const NUM_DISCUSSIONS_HOME_PAGE = parseInt(
   process.env.NUM_DISCUSSIONS_HOME_PAGE ?? "50",
-  10,
+  10
 );
 const LIMIT_MILLISECONDS_HOT_DISCUSSION = parseInt(
   process.env.NUM_DISCUSSIONS_HOME_PAGE ?? "604800000",
-  10,
+  10
 );
 
 export default async function Discussions() {
@@ -31,7 +32,7 @@ export default async function Discussions() {
         select: getPost.latestNoContent,
         where: { id: { in: discussionReplyCount.map((r) => r.postId) } },
       })
-    ).map((d) => [d.id, d]),
+    ).map((d) => [d.id, d])
   );
   discussionReplyCount.map((r) => ({
     ...discussions[r.postId],
@@ -51,31 +52,18 @@ export default async function Discussions() {
           ellipsis
           metaBottom={
             <>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
+              <BsChatDots
+                style={{ position: "relative", top: "-.1125em" }}
                 width="1em"
                 height="1em"
-                fill="currentColor"
-                className="bi bi-chat-dots"
-                viewBox="0 0 16 16"
-                style={{ position: "relative", top: "-.1125em" }}
-              >
-                <path d="M5 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
-                <path d="m2.165 15.803.02-.004c1.83-.363 2.948-.842 3.468-1.105A9.06 9.06 0 0 0 8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6a10.437 10.437 0 0 1-.524 2.318l-.003.011a10.722 10.722 0 0 1-.244.637c-.079.186.074.394.273.362a21.673 21.673 0 0 0 .693-.125zm.8-3.108a1 1 0 0 0-.287-.801C1.618 10.83 1 9.468 1 8c0-3.192 3.004-6 7-6s7 2.808 7 6c0 3.193-3.004 6-7 6a8.06 8.06 0 0 1-2.088-.272 1 1 0 0 0-.711.074c-.387.196-1.24.57-2.634.893a10.97 10.97 0 0 0 .398-2z" />
-              </svg>{" "}
+              />{" "}
               {discussion.replyCount}
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
+              <BsCalendar4Week
+                style={{ position: "relative", top: "-.1125em" }}
+                className="ms-2"
                 width="1em"
                 height="1em"
-                fill="currentColor"
-                className="bi bi-calendar4-week ms-2"
-                viewBox="0 0 16 16"
-                style={{ position: "relative", top: "-.1125em" }}
-              >
-                <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM2 2a1 1 0 0 0-1 1v1h14V3a1 1 0 0 0-1-1H2zm13 3H1v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V5z" />
-                <path d="M11 7.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-2 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z" />
-              </svg>{" "}
+              />{" "}
               {discussion.recentReplyCount}
               <span className="float-end">
                 {stringifyTime(discussion.time)}

diff --git a/packages/viewer/src/app/explore/Users.tsx b/packages/viewer/src/app/explore/Users.tsx
@@ -1,33 +1,37 @@
 import prisma from "@/lib/prisma";
 import UserInfo from "@/components/UserInfo";
+import { selectUser } from "@/lib/user";
 
 const NUM_WATER_TANKS_HOME_PAGE = parseInt(
   process.env.NUM_DISCUSSIONS_HOME_PAGE ?? "100",
-  10,
+  10
 );
 const RANGE_MILLISECONDS_WATER_TANK = parseInt(
   process.env.RANGE_MILLISECONDS_WATER_TANK ?? "604800000",
-  10,
+  10
 );
 
 export default async function Users() {
-  const userReplyCount = await prisma.reply.groupBy({
+  const userReplyCount = await prisma.replySnapshot.groupBy({
     by: ["authorId"],
     where: {
-      time: {
-        gte: new Date(new Date().getTime() - RANGE_MILLISECONDS_WATER_TANK),
+      reply: {
+        time: {
+          gte: new Date(new Date().getTime() - RANGE_MILLISECONDS_WATER_TANK),
+        }
       },
     },
     _count: true,
-    orderBy: { _count: { id: "desc" } },
+    orderBy: { _count: { time: "desc" } },
     take: NUM_WATER_TANKS_HOME_PAGE,
   });
   const users = Object.fromEntries(
     (
       await prisma.user.findMany({
         where: { id: { in: userReplyCount.map((r) => r.authorId) } },
+        select: selectUser.withLatest,
       })
-    ).map((u) => [u.id, u]),
+    ).map((u) => [u.id, u])
   );
   return (
     <ul className="list-group">

diff --git a/packages/viewer/src/app/judgement/Ostraca.tsx b/packages/viewer/src/app/judgement/Ostraca.tsx
@@ -1,14 +1,14 @@
 "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";
+import { LatestUser } from "@/lib/user";
 
 interface PageData {
-  data: { user: User; time: string; content: string }[];
+  data: { user: LatestUser; time: string; content: string }[];
   nextCursor: string;
 }
 

diff --git a/packages/viewer/src/app/judgement/[page]/page.tsx b/packages/viewer/src/app/judgement/[page]/page.tsx
@@ -3,21 +3,26 @@ import prisma from "@/lib/prisma";
 import paginate from "@/lib/pagination";
 import PageButtons from "@/components/replies/PageButtons";
 import Ostracon from "@/components/Ostracon";
+import { selectUser } from "@/lib/user";
 
 const OSTRACA_PER_PAGE = parseInt(process.env.OSTRACA_PER_PAGE ?? "10", 10);
 
 export default async function Page({ params }: { params: { page: string } }) {
   const page = parseInt(params.page, 10);
   const ostraca =
     (await prisma.judgement.findMany({
-      select: { time: true, user: true, content: true },
+      select: {
+        time: true,
+        user: { select: selectUser.withLatest },
+        content: true,
+      },
       orderBy: { time: "desc" },
       skip: (page - 1) * OSTRACA_PER_PAGE,
       take: OSTRACA_PER_PAGE,
     })) ?? notFound();
 
   const numPages = Math.ceil(
-    (await prisma.judgement.count()) / OSTRACA_PER_PAGE,
+    (await prisma.judgement.count()) / OSTRACA_PER_PAGE
   );
 
   const { pagesLocalAttachedFront, pagesLocalAttachedBack, pagesLocal } =

diff --git a/packages/viewer/src/app/judgement/data/route.ts b/packages/viewer/src/app/judgement/data/route.ts
@@ -1,12 +1,17 @@
 import { NextResponse, type NextRequest } from "next/server";
 import prisma from "@/lib/prisma";
+import { selectUser } from "@/lib/user";
 
 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 },
+    select: {
+      user: { select: selectUser.withLatest },
+      time: true,
+      content: true,
+    },
     // TODO: Unique filter (userId & time)
     where: { time: { lt: cursor ? new Date(cursor) : undefined } },
     take: OSTRACA_PER_PAGE,

diff --git a/packages/viewer/src/app/not-found.tsx b/packages/viewer/src/app/not-found.tsx
@@ -2,6 +2,7 @@
 
 import { useParams, usePathname } from "next/navigation";
 import UpdateButton from "@/components/UpdateButton";
+import { BsDatabaseX, BsJournalCode, BsThreeDots } from "react-icons/bs";
 
 export default function Page() {
   const pathname = usePathname();
@@ -14,49 +15,22 @@ export default function Page() {
         <div className="fs-3 text-body-tertiary mt-2">
           {Number.isNaN(parseInt(pathname.slice(1), 10)) ? (
             <>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="1em"
-                height="1em"
-                fill="currentColor"
-                className="bi bi-database-x me-1"
-                viewBox="0 0 16 16"
+              <BsDatabaseX
+                className="me-1"
                 style={{ position: "relative", top: "-.1375em" }}
-              >
-                <path d="M12.096 6.223A4.92 4.92 0 0 0 13 5.698V7c0 .289-.213.654-.753 1.007a4.493 4.493 0 0 1 1.753.25V4c0-1.007-.875-1.755-1.904-2.223C11.022 1.289 9.573 1 8 1s-3.022.289-4.096.777C2.875 2.245 2 2.993 2 4v9c0 1.007.875 1.755 1.904 2.223C4.978 15.71 6.427 16 8 16c.536 0 1.058-.034 1.555-.097a4.525 4.525 0 0 1-.813-.927C8.5 14.992 8.252 15 8 15c-1.464 0-2.766-.27-3.682-.687C3.356 13.875 3 13.373 3 13v-1.302c.271.202.58.378.904.525C4.978 12.71 6.427 13 8 13h.027a4.552 4.552 0 0 1 0-1H8c-1.464 0-2.766-.27-3.682-.687C3.356 10.875 3 10.373 3 10V8.698c.271.202.58.378.904.525C4.978 9.71 6.427 10 8 10c.262 0 .52-.008.774-.024a4.525 4.525 0 0 1 1.102-1.132C9.298 8.944 8.666 9 8 9c-1.464 0-2.766-.27-3.682-.687C3.356 7.875 3 7.373 3 7V5.698c.271.202.58.378.904.525C4.978 6.711 6.427 7 8 7s3.022-.289 4.096-.777ZM3 4c0-.374.356-.875 1.318-1.313C5.234 2.271 6.536 2 8 2s2.766.27 3.682.687C12.644 3.125 13 3.627 13 4c0 .374-.356.875-1.318 1.313C10.766 5.729 9.464 6 8 6s-2.766-.27-3.682-.687C3.356 4.875 3 4.373 3 4Z" />
-                <path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm-.646-4.854.646.647.646-.647a.5.5 0 0 1 .708.708l-.647.646.647.646a.5.5 0 0 1-.708.708l-.646-.647-.646.647a.5.5 0 0 1-.708-.708l.647-.646-.647-.646a.5.5 0 0 1 .708-.708Z" />{" "}
-              </svg>
+              />
               数据被 fx 酱啃食了
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="1em"
-                height="1em"
-                fill="currentColor"
-                className="bi bi-three-dots ms-1"
-                viewBox="0 0 16 16"
+              <BsThreeDots
+                className="ms-1"
                 style={{ position: "relative", top: "-.09em" }}
-              >
-                <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z" />
-              </svg>
+              />
             </>
           ) : (
             <>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="1em"
-                height="1em"
-                fill="currentColor"
-                className="bi bi-journal-code me-1"
-                viewBox="0 0 16 16"
+              <BsJournalCode
+                className="me-1"
                 style={{ position: "relative", top: "-.11em" }}
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z"
-                />
-                <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z" />
-                <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z" />{" "}
-              </svg>
+              />
               帖子还没有保存哦
             </>
           )}