feat: quiz

2026-10-15 19:40:28 +05:30
parent 3f3fa9a720
commit 111485a43e
20 changed files with 2178 additions and 224 deletions
@@ -0,0 +1,178 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import Link from "next/link";
+import { toast } from "sonner";
+import { quizzes, AdminError, type Quiz } from "@/lib/api";
+import { Button } from "@/components/ui/button";
+import { useConfirm } from "@/components/confirm";
+import { Can, useStaff } from "@/components/staff-context";
+import { cn } from "@/lib/utils";
+import { QuizEditor } from "../quiz-editor";
+import { KIND_LABEL } from "../labels";
+import { Participants, Responses } from "./results";
+
+type Tab = "edit" | "participants" | "responses";
+
+export default function QuizDetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const router = useRouter();
+  const confirm = useConfirm();
+  const { can } = useStaff();
+  const [quiz, setQuiz] = useState<Quiz | null>(null);
+  const [tab, setTab] = useState<Tab>("edit");
+  const [busy, setBusy] = useState(false);
+
+  const load = useCallback(() => {
+    quizzes
+      .get(id)
+      .then(setQuiz)
+      .catch((err) =>
+        toast.error(
+          err instanceof AdminError ? err.message : "Could not load the quiz",
+        ),
+      );
+  }, [id]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  if (!quiz) return <p className="text-sm text-muted-foreground">Loading…</p>;
+
+  const togglePublish = async () => {
+    const on = !quiz.published_at;
+    if (
+      !on &&
+      !(await confirm({
+        title: "Unpublish this quiz?",
+        message:
+          "It disappears from the app. Results so far are kept, and you can publish it again.",
+        confirmLabel: "Unpublish",
+      }))
+    ) {
+      return;
+    }
+    setBusy(true);
+    try {
+      setQuiz(await quizzes.setPublished(quiz.id, on));
+      toast.success(on ? "Published" : "Unpublished");
+    } catch (err) {
+      toast.error(err instanceof AdminError ? err.message : "That didn't work");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const remove = async () => {
+    if (
+      !(await confirm({
+        title: `Delete “${quiz.title}”?`,
+        message:
+          "It disappears from the app. Participants' results are kept on record.",
+        confirmLabel: "Delete",
+        destructive: true,
+      }))
+    ) {
+      return;
+    }
+    try {
+      await quizzes.remove(quiz.id);
+      toast.success("Quiz deleted");
+      router.replace("/quizzes");
+    } catch (err) {
+      toast.error(
+        err instanceof AdminError ? err.message : "Could not delete the quiz",
+      );
+    }
+  };
+
+  const tabs: { key: Tab; label: string; show: boolean }[] = [
+    {
+      key: "edit",
+      label: can("quizzes:write") ? "Edit" : "Questions",
+      show: true,
+    },
+    {
+      key: "participants",
+      label: `Participants (${quiz.attempt_count ?? 0})`,
+      show: can("quizzes:results"),
+    },
+    { key: "responses", label: "Responses", show: can("quizzes:results") },
+  ];
+
+  return (
+    <div className="space-y-6">
+      <header className="flex flex-wrap items-start justify-between gap-4">
+        <div>
+          <Link
+            href="/quizzes"
+            className="text-xs text-muted-foreground hover:text-foreground"
+          >
+            ← Quizzes
+          </Link>
+          <h1 className="mt-1 text-xl font-semibold text-foreground">
+            {quiz.title}
+          </h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            {KIND_LABEL[quiz.target_kind]}
+            {quiz.target_title && ` · ${quiz.target_title}`}
+            {quiz.target_path && (
+              <span className="ml-1 font-mono text-xs">
+                ({quiz.target_path})
+              </span>
+            )}
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Can perm="quizzes:write">
+            <Button
+              variant={quiz.published_at ? "outline" : "primary"}
+              disabled={busy}
+              onClick={() => void togglePublish()}
+            >
+              {quiz.published_at ? "Unpublish" : "Publish"}
+            </Button>
+          </Can>
+          <Can perm="quizzes:delete">
+            <Button variant="ghost" onClick={() => void remove()}>
+              Delete
+            </Button>
+          </Can>
+        </div>
+      </header>
+
+      <div className="flex gap-1 border-b border-border">
+        {tabs
+          .filter((t) => t.show)
+          .map((t) => (
+            <button
+              key={t.key}
+              type="button"
+              onClick={() => setTab(t.key)}
+              className={cn(
+                "-mb-px border-b-2 px-3 py-2 text-sm transition-colors",
+                tab === t.key
+                  ? "border-primary font-medium text-foreground"
+                  : "border-transparent text-muted-foreground hover:text-foreground",
+              )}
+            >
+              {t.label}
+            </button>
+          ))}
+      </div>
+
+      {tab === "edit" && (
+        <QuizEditor
+          key={quiz.updated_at}
+          initial={quiz}
+          onSaved={setQuiz}
+          readOnly={!can("quizzes:write")}
+        />
+      )}
+      {tab === "participants" && <Participants quizId={quiz.id} />}
+      {tab === "responses" && <Responses quizId={quiz.id} />}
+    </div>
+  );
+}