用服务器组件写了点/folders

src/app/api/folders/route.ts

@@ -3,7 +3,7 @@ import { NextRequest, NextResponse } from "next/server";
 import { authOptions } from "../auth/[...nextauth]/route";
 import { FolderController } from "@/lib/db";
 
-export async function GET(req: NextRequest) {
+export async function GET() {
   const session = await getServerSession(authOptions);
   if (session) {
     return new NextResponse(

src/app/folders/FoldersClient.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import DarkButton from "@/components/buttons/DarkButton";
+import LightButton from "@/components/buttons/LightButton";
+import ACard from "@/components/cards/ACard";
+import { Center } from "@/components/Center";
+import {
+  createFolder,
+  deleteFolderById,
+  getFoldersWithTextPairsCountByOwner,
+} from "@/lib/controllers/FolderController";
+import { useEffect, useState } from "react";
+import InFolder from "./InFolder";
+
+interface Folder {
+  id: number;
+  name: string;
+  text_pairs_count: number;
+}
+
+interface FolderProps {
+  folder: Folder;
+  deleteCallback: () => void;
+  openCallback: () => void;
+}
+
+const FolderCard = ({ folder, deleteCallback, openCallback }: FolderProps) => {
+  return (
+    <div className="flex flex-row items-center justify-center border">
+      <div className="flex-1">
+        <div>ID: {folder.id}</div>
+        <div>Name: {folder.name}</div>
+        <div>Text Pairs Count: {folder.text_pairs_count}</div>
+      </div>
+      <DarkButton className="w-fit h-fit m-2" onClick={openCallback}>
+        open
+      </DarkButton>
+      <DarkButton className="w-fit h-fit m-2" onClick={deleteCallback}>
+        delete
+      </DarkButton>
+    </div>
+  );
+};
+
+export default function FoldersClient({ username }: { username: string }) {
+  const [folders, setFolders] = useState<Folder[]>([]);
+  const [page, setPage] = useState<"folders" | "in folder">("folders");
+  const [folderId, setFolderId] = useState<number>(0);
+
+  useEffect(() => {
+    getFoldersWithTextPairsCountByOwner(username).then((folders) => {
+      setFolders(folders as Folder[]);
+    });
+  }, [username]);
+
+  const updateFolders = async () => {
+    const updatedFolders = await getFoldersWithTextPairsCountByOwner(username);
+    setFolders(updatedFolders as Folder[]);
+  };
+
+  if (page === "folders")
+    return (
+      <Center>
+        <ACard className="flex flex-col">
+          <h1 className="text-4xl font-extrabold text-center">Your Folders</h1>
+          <LightButton
+            className="w-fit"
+            onClick={async () => {
+              const folderName = prompt("Enter folder name:");
+              if (!folderName) return;
+              await createFolder(folderName, username);
+              await updateFolders();
+            }}
+          >
+            Create Folder
+          </LightButton>
+          <div className="overflow-y-auto">
+            {folders.map((folder) => (
+              <FolderCard
+                key={folder.id}
+                folder={folder}
+                deleteCallback={() => {
+                  const confirm = prompt(
+                    "Input folder's name to delete this folder.",
+                  );
+                  if (confirm === folder.name) {
+                    deleteFolderById(folder.id).then(updateFolders);
+                  }
+                }}
+                openCallback={() => {
+                  setFolderId(folder.id);
+                  setPage("in folder");
+                }}
+              />
+            ))}
+          </div>
+        </ACard>
+      </Center>
+    );
+  else if (page === "in folder") {
+    return <InFolder username={username} folderId={folderId} />;
+  }
+}

src/app/folders/InFolder.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { getTextPairsByFolderId } from "@/lib/controllers/TextPairController";
+import { useEffect, useState } from "react";
+
+interface Props {
+  username: string;
+  folderId: number;
+}
+
+interface TextPair {
+  id: number;
+  text1: string;
+  text2: string;
+  locale1: string;
+  locale2: string;
+}
+
+export default function InFolder({ folderId }: Props) {
+  const [textPairs, setTextPairs] = useState<TextPair[]>([]);
+
+  useEffect(() => {
+    getTextPairsByFolderId(folderId).then((textPairs) => {
+      setTextPairs(textPairs as TextPair[]);
+    });
+  }, [folderId, textPairs]);
+
+  const updateTextPairs = async () => {
+    const updatedTextPairs = await getTextPairsByFolderId(folderId);
+    setTextPairs(updatedTextPairs as TextPair[]);
+  };
+  
+  return (
+    <div>
+      <h1>In Folder</h1>
+    </div>
+  );
+}

src/app/folders/page.tsx

@@ -0,0 +1,10 @@
+import FoldersClient from "./FoldersClient";
+import { redirect } from "next/navigation";
+import { getServerSession } from "next-auth";
+export default async function FoldersPage() {
+  const session = await getServerSession();
+  if (!session?.user?.name) redirect(`/login`);
+  return (
+    <FoldersClient username={session.user.name} />
+  );
+}

src/app/profile/page.tsx

@@ -36,19 +36,7 @@ export default function MePage() {
         <p>{session.data?.user?.name}</p>
         <p>Email: {session.data?.user?.email}</p>
         <DarkButton onClick={signOut}>Logout</DarkButton>
-        <LightButton
-          onClick={() => {
-            fetch("/api/folders", {
-              method: "POST",
-              headers: {
-                "Content-Type": "application/json",
-              },
-              body: JSON.stringify({ name: "New Folder" }),
-            }).then(async (res) => console.log(await res.json()));
-          }}
-        >
-          POST
-        </LightButton>
+        
       </ACard>
     </Center>
   );