完成了对记忆功能的升级

src/app/(features)/memorize/FolderSelector.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import Container from "@/components/cards/Container";
+import { folder } from "../../../../generated/prisma/client";
+import { Folder } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { Center } from "@/components/Center";
+
+interface FolderSelectorProps {
+  folders: (folder & { total_pairs: number })[];
+}
+
+const FolderSelector: React.FC<FolderSelectorProps> = ({ folders }) => {
+  const router = useRouter();
+  return (
+    <Center>
+      <Container className="p-6 gap-4 flex flex-col">
+        {(folders.length === 0 && (
+          <h1 className="text-2xl text-gray-900 font-light">
+            No folders found.
+          </h1>
+        )) || (
+          <>
+            <h1 className="text-2xl text-gray-900 font-light">
+              Select a folder:
+            </h1>
+            <div className="text-gray-900 border border-gray-200 rounded-2xl max-h-96 overflow-y-auto">
+              {folders.map((folder) => (
+                <div
+                  key={folder.id}
+                  onClick={() =>
+                    router.push(`/memorize?folder_id=${folder.id}`)
+                  }
+                  className="flex flex-row justify-center items-center group p-2 gap-2 hover:cursor-pointer hover:bg-gray-50"
+                >
+                  <Folder />
+                  <div className="flex-1 flex gap-2">
+                    <span className="group-hover:text-blue-500">
+                      {folder.name}
+                    </span>
+                    <span>({folder.total_pairs})</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </>
+        )}
+      </Container>
+    </Center>
+  );
+};
+
+export default FolderSelector;

src/app/(features)/memorize/Memorize.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { Center } from "@/components/Center";
+import { text_pair } from "../../../../generated/prisma/browser";
+import Container from "@/components/cards/Container";
+import { useState } from "react";
+import LightButton from "@/components/buttons/LightButton";
+import { useAudioPlayer } from "@/hooks/useAudioPlayer";
+import { getTTSAudioUrl } from "@/lib/tts";
+import { VOICES } from "@/config/locales";
+
+interface MemorizeProps {
+  textPairs: text_pair[];
+}
+
+const Memorize: React.FC<MemorizeProps> = ({ textPairs }) => {
+  const [reverse, setReverse] = useState(false);
+  const [dictation, setDictation] = useState(false);
+  const [index, setIndex] = useState(0);
+  const [show, setShow] = useState<"question" | "answer">("question");
+  const { load, play } = useAudioPlayer();
+
+  return (
+    <Center>
+      <Container className="p-6 flex flex-col gap-8 h-96 justify-center items-center">
+        {(textPairs.length > 0 && (
+          <>
+            <div className="h-36 flex flex-col gap-2 justify-start items-center font-serif text-3xl">
+              <div className="text-sm text-gray-500">
+                {index + 1}/{textPairs.length}
+              </div>
+              {dictation ? (
+                show === "question" ? (
+                  ""
+                ) : (
+                  <>
+                    <div>
+                      {reverse
+                        ? textPairs[index].text2
+                        : textPairs[index].text1}
+                    </div>
+                    <div>
+                      {reverse
+                        ? textPairs[index].text1
+                        : textPairs[index].text2}
+                    </div>
+                  </>
+                )
+              ) : (
+                <>
+                  <div>
+                    {reverse ? textPairs[index].text2 : textPairs[index].text1}
+                  </div>
+                  <div>
+                    {show === "answer"
+                      ? reverse
+                        ? textPairs[index].text1
+                        : textPairs[index].text2
+                      : ""}
+                  </div>
+                </>
+              )}
+            </div>
+            <div className="flex flex-row gap-2 items-center justify-center">
+              <LightButton
+                className="w-32"
+                onClick={async () => {
+                  if (show === "answer") {
+                    const newIndex = (index + 1) % textPairs.length;
+                    setIndex(newIndex);
+                    if (dictation)
+                      getTTSAudioUrl(
+                        textPairs[newIndex][reverse ? "text2" : "text1"],
+                        VOICES.find(
+                          (v) =>
+                            v.locale ===
+                            textPairs[newIndex][
+                              reverse ? "locale2" : "locale1"
+                            ],
+                        )!.short_name,
+                      ).then((url) => {
+                        load(url);
+                        play();
+                      });
+                  }
+                  setShow(show === "question" ? "answer" : "question");
+                }}
+              >
+                {show === "question" ? "Show Answer" : "Next"}
+              </LightButton>
+              <LightButton
+                onClick={() => {
+                  setReverse(!reverse);
+                }}
+                selected={reverse}
+              >
+                Reverse
+              </LightButton>
+              <LightButton
+                onClick={() => {
+                  setDictation(!dictation);
+                }}
+                selected={dictation}
+              >
+                Dictation
+              </LightButton>
+            </div>
+          </>
+        )) || <p>No text pairs available</p>}
+      </Container>
+    </Center>
+  );
+};
+
+export default Memorize;

src/app/(features)/memorize/page.tsx

@@ -0,0 +1,45 @@
+"use server";
+
+import { redirect } from "next/navigation";
+import { getServerSession } from "next-auth";
+import {
+  getFoldersByOwner,
+  getFoldersWithTotalPairsByOwner,
+  getOwnerByFolderId,
+} from "@/lib/services/folderService";
+import { isNonNegativeInteger } from "@/lib/utils";
+import FolderSelector from "./FolderSelector";
+import Memorize from "./Memorize";
+import { getTextPairsByFolderId } from "@/lib/services/textPairService";
+
+export default async function MemorizePage({
+  searchParams,
+}: {
+  searchParams: Promise<{ folder_id?: string }>;
+}) {
+  const session = await getServerSession();
+  const username = session?.user?.name;
+
+  const t = (await searchParams).folder_id;
+  const folder_id = t ? (isNonNegativeInteger(t) ? parseInt(t) : null) : null;
+
+  if (!username)
+    redirect(
+      `/login?redirect=/memorize${folder_id ? `?folder_id=${folder_id}` : ""}`,
+    );
+
+  if (!folder_id) {
+    return (
+      <FolderSelector
+        folders={await getFoldersWithTotalPairsByOwner(username)}
+      />
+    );
+  }
+
+  const owner = await getOwnerByFolderId(folder_id);
+  if (owner !== username) {
+    return <p>无权访问该文件夹</p>;
+  }
+
+  return <Memorize textPairs={await getTextPairsByFolderId(folder_id)} />;
+}