hoàn thành bước3.2. PDF Gallery (Dashboard)

2026-08-05 17:33:11 +07:00 · 2026-03-31 14:26:48 +07:00
parent ebfa869a26
commit 9450cd3ed4
18 changed files with 766 additions and 1 deletions
@@ -0,0 +1,104 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { api } from "@/lib/api";
+import type { PDFItem, User } from "@/types";
+import UploadZone from "@/components/UploadZone";
+import PDFCard from "@/components/PDFCard";
+
+export default function DashboardPage() {
+  const router = useRouter();
+  const [user, setUser] = useState<User | null>(null);
+  const [pdfs, setPdfs] = useState<PDFItem[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  // ── Auth check + initial data load ────────────────────────────────────────
+  useEffect(() => {
+    async function init() {
+      try {
+        const [me, list] = await Promise.all([api.me(), api.listPdfs()]);
+        setUser(me);
+        setPdfs(list);
+      } catch {
+        router.replace("/login");
+      } finally {
+        setLoading(false);
+      }
+    }
+    init();
+  }, [router]);
+
+  // ── Called after successful upload ────────────────────────────────────────
+  const handleUploaded = useCallback((newPdfs: PDFItem[]) => {
+    setPdfs((prev) => [...newPdfs, ...prev]);
+  }, []);
+
+  // ── Delete ─────────────────────────────────────────────────────────────────
+  const handleDelete = useCallback(async (id: number) => {
+    if (!confirm("Delete this PDF? This cannot be undone.")) return;
+    try {
+      await api.deletePdf(id);
+      setPdfs((prev) => prev.filter((p) => p.id !== id));
+    } catch (err: unknown) {
+      alert(err instanceof Error ? err.message : "Delete failed.");
+    }
+  }, []);
+
+  // ── Logout ─────────────────────────────────────────────────────────────────
+  async function handleLogout() {
+    await api.logout();
+    router.replace("/login");
+  }
+
+  // ── Loading skeleton ───────────────────────────────────────────────────────
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <svg className="animate-spin h-8 w-8 text-blue-500" viewBox="0 0 24 24" fill="none">
+          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+        </svg>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen">
+      {/* ── Nav ────────────────────────────────────────────────────────── */}
+      <header className="bg-white border-b shadow-sm sticky top-0 z-10">
+        <div className="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
+          <span className="font-bold text-lg text-blue-600">PDF LMS</span>
+          <div className="flex items-center gap-3">
+            <span className="text-sm text-gray-500 hidden sm:block">{user?.username}</span>
+            <button
+              onClick={handleLogout}
+              className="text-sm text-gray-500 hover:text-red-600 transition"
+            >
+              Sign out
+            </button>
+          </div>
+        </div>
+      </header>
+
+      {/* ── Main content ───────────────────────────────────────────────── */}
+      <main className="max-w-6xl mx-auto px-4 py-8">
+        <h2 className="text-xl font-bold mb-6 text-gray-800">My PDFs</h2>
+
+        <UploadZone onUploaded={handleUploaded} />
+
+        {pdfs.length === 0 ? (
+          <p className="text-center text-gray-400 text-sm mt-12">
+            No PDFs yet. Upload one above to get started.
+          </p>
+        ) : (
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+            {pdfs.map((pdf) => (
+              <PDFCard key={pdf.id} pdf={pdf} onDelete={handleDelete} />
+            ))}
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
@@ -0,0 +1,15 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "PDF LMS",
+  description: "Personal PDF Learning Management System",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body className="bg-gray-50 text-gray-900 antialiased">{children}</body>
+    </html>
+  );
+}
@@ -0,0 +1,79 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { api } from "@/lib/api";
+
+export default function LoginPage() {
+  const router = useRouter();
+  const [form, setForm] = useState({ username: "", password: "" });
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+    try {
+      await api.login(form);
+      router.push("/dashboard");
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Login failed.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center px-4">
+      <div className="w-full max-w-sm bg-white rounded-2xl shadow-md p-8">
+        <h1 className="text-2xl font-bold mb-6 text-center">Sign in</h1>
+
+        {error && (
+          <p className="mb-4 text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg px-3 py-2">
+            {error}
+          </p>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium mb-1">Username</label>
+            <input
+              className="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+              value={form.username}
+              onChange={(e) => setForm({ ...form, username: e.target.value })}
+              required
+              autoComplete="username"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-1">Password</label>
+            <input
+              type="password"
+              className="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+              value={form.password}
+              onChange={(e) => setForm({ ...form, password: e.target.value })}
+              required
+              autoComplete="current-password"
+            />
+          </div>
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full bg-blue-600 hover:bg-blue-700 disabled:opacity-60 text-white font-semibold rounded-lg py-2 text-sm transition"
+          >
+            {loading ? "Signing in…" : "Sign in"}
+          </button>
+        </form>
+
+        <p className="mt-6 text-center text-sm text-gray-500">
+          No account?{" "}
+          <Link href="/register" className="text-blue-600 hover:underline">
+            Register
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function Home() {
+  redirect("/dashboard");
+}
@@ -0,0 +1,91 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { api } from "@/lib/api";
+
+export default function RegisterPage() {
+  const router = useRouter();
+  const [form, setForm] = useState({ username: "", email: "", password: "" });
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+    try {
+      await api.register(form);
+      router.push("/dashboard");
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Registration failed.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center px-4">
+      <div className="w-full max-w-sm bg-white rounded-2xl shadow-md p-8">
+        <h1 className="text-2xl font-bold mb-6 text-center">Create account</h1>
+
+        {error && (
+          <p className="mb-4 text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg px-3 py-2">
+            {error}
+          </p>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium mb-1">Username</label>
+            <input
+              className="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+              value={form.username}
+              onChange={(e) => setForm({ ...form, username: e.target.value })}
+              required
+              autoComplete="username"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-1">Email</label>
+            <input
+              type="email"
+              className="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+              value={form.email}
+              onChange={(e) => setForm({ ...form, email: e.target.value })}
+              required
+              autoComplete="email"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-1">Password</label>
+            <input
+              type="password"
+              className="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+              value={form.password}
+              onChange={(e) => setForm({ ...form, password: e.target.value })}
+              required
+              autoComplete="new-password"
+              minLength={8}
+            />
+          </div>
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full bg-blue-600 hover:bg-blue-700 disabled:opacity-60 text-white font-semibold rounded-lg py-2 text-sm transition"
+          >
+            {loading ? "Creating account…" : "Create account"}
+          </button>
+        </form>
+
+        <p className="mt-6 text-center text-sm text-gray-500">
+          Already have an account?{" "}
+          <Link href="/login" className="text-blue-600 hover:underline">
+            Sign in
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}