用服务器组件写了点/folders

2025-11-11 22:01:32 +08:00
parent d4f786c990
commit 94d570557b
13 changed files with 291 additions and 167 deletions
--- a/src/app/folders/FoldersClient.tsx
+++ b/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} />;
+  }
+}