practice UI round — top bars + sidebar reopen, one-attempt per-problem submit with instant reveal, score-only grading (owner 2026-09-29)
This commit is contained in:
amosblomqvist
+402
-246
@@ -1,282 +1,438 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* The exam page (practice slice 5): one problem set, numbered problems,
|
||||
* markdown statements, a textarea + dictation per problem (the bar
|
||||
* renders only on the FOCUSED box — thinking out loud is the primary
|
||||
* answering mode), one submit for the set, and the post-grade reveal
|
||||
* (verdict chip, feedback, model solution, rubric) under the box.
|
||||
* The exam page (practice slice 5, one-attempt redesign 2026-09-29):
|
||||
* one problem set, numbered problems, markdown statements, a textarea +
|
||||
* dictation per problem (the bar renders only on the FOCUSED box —
|
||||
* thinking out loud is the primary answering mode). ONE ATTEMPT: each
|
||||
* problem has its OWN submit button; once submitted the box locks and
|
||||
* the MODEL SOLUTION reveals instantly (rubric collapsed by default).
|
||||
* The grade (score 0–10 + brief reasoning) lands via the poll and
|
||||
* updates live — no reload.
|
||||
*
|
||||
* DISPLAY-SEAM MATH HEALING: statements/solutions/rubrics/feedback ride
|
||||
* TOP BAR (owner, UI round 2026-09-29): the chat pattern — an h-15
|
||||
* lh-drag header in flow above the scroller, the sidebar reopen toggle
|
||||
* first (it clears the traffic lights via .lh-closed-toggle), the set
|
||||
* title truncating beside it. The levels + status stay in the body.
|
||||
*
|
||||
* DISPLAY-SEAM MATH HEALING: statements/solutions/rubrics/reasoning ride
|
||||
* the same streaming-args parse as quiz/ask strings — restoreMathEscapes
|
||||
* heals them at render (the same helper the tool-part seam uses).
|
||||
*
|
||||
* POLLING: 2s while the set isn't ready (stubs → filled), and while a
|
||||
* grading run is live for this set (activity feed's practice rows) with
|
||||
* answered-but-ungraded problems outstanding. A settled page goes quiet
|
||||
* (a dropped grade terminates honestly: no live row → no poll).
|
||||
* grading run is live for this set (activity feed practice rows are
|
||||
* keyed setId:grade:problemId — the LIVE rows name exactly which
|
||||
* problems' grades are pending). A settled page goes quiet; a dropped
|
||||
* grade shows "grade interrupted" honestly.
|
||||
*/
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import type { GradeVerdict, Problem, ProblemSet } from "@/src/core";
|
||||
import type { Problem, ProblemSet } from "@/src/core";
|
||||
import { CUE_LEVELS, LADDER_RUNGS, PRESENTATIONS } from "@/src/core";
|
||||
import { restoreMathEscapes } from "@/src/core";
|
||||
import { MessageResponse } from "@/components/ai-elements/message";
|
||||
import { BrailleSpinner } from "@/components/braille-spinner";
|
||||
import { DictationBar, useDictation } from "@/components/dictation";
|
||||
|
||||
/** The verdict chip's tone — plain, no invented color language. */
|
||||
export function verdictClass(verdict: GradeVerdict): string {
|
||||
if (verdict === "solid") return "bg-green-500/15 text-green-500";
|
||||
if (verdict === "partial") return "bg-amber-500/15 text-amber-600 dark:text-amber-400";
|
||||
return "bg-destructive/15 text-destructive";
|
||||
}
|
||||
import { SidebarToggle } from "@/components/sidebar";
|
||||
|
||||
/** One answerable problem: textarea + focus-gated dictation bar. */
|
||||
export function ProblemBox({
|
||||
problem,
|
||||
draft,
|
||||
onDraft,
|
||||
problem,
|
||||
draft,
|
||||
onDraft,
|
||||
}: {
|
||||
problem: Pick<Problem, "id">;
|
||||
draft: string;
|
||||
onDraft: (text: string) => void;
|
||||
problem: Pick<Problem, "id">;
|
||||
draft: string;
|
||||
onDraft: (text: string) => void;
|
||||
}) {
|
||||
const [focused, setFocused] = useState(false);
|
||||
// The dictation appends into THIS box only (per-box instance).
|
||||
const dictation = useDictation({
|
||||
append: (text) => onDraft(text),
|
||||
});
|
||||
return (
|
||||
<div className="flex flex-col gap-1.5" data-testid={`problem-box-${problem.id}`}>
|
||||
<textarea
|
||||
data-testid={`answer-${problem.id}`}
|
||||
value={draft}
|
||||
rows={5}
|
||||
placeholder="Think out loud — dictation or typing, both fine."
|
||||
onChange={(e) => onDraft(e.target.value)}
|
||||
onFocus={() => setFocused(true)}
|
||||
onBlur={() => setFocused(false)}
|
||||
className="w-full resize-y rounded-lg border bg-background px-3 py-2 text-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
/>
|
||||
{focused && <DictationBar dictation={dictation} />}
|
||||
</div>
|
||||
);
|
||||
const [focused, setFocused] = useState(false);
|
||||
// The dictation appends into THIS box only (per-box instance).
|
||||
const dictation = useDictation({
|
||||
append: (text) => onDraft(text),
|
||||
});
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col gap-1.5"
|
||||
data-testid={`problem-box-${problem.id}`}
|
||||
>
|
||||
<textarea
|
||||
data-testid={`answer-${problem.id}`}
|
||||
value={draft}
|
||||
rows={5}
|
||||
placeholder="Think out loud — dictation or typing, both fine."
|
||||
onChange={(e) => onDraft(e.target.value)}
|
||||
onFocus={() => setFocused(true)}
|
||||
onBlur={() => setFocused(false)}
|
||||
className="w-full resize-y rounded-lg border bg-background px-3 py-2 text-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
/>
|
||||
{focused && <DictationBar dictation={dictation} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** The exam page's pure body — exported for SSR pins. */
|
||||
export function PracticeExamBody({
|
||||
set,
|
||||
drafts,
|
||||
onDraft,
|
||||
onSubmit,
|
||||
submitting,
|
||||
submitError,
|
||||
grading,
|
||||
set,
|
||||
drafts,
|
||||
onDraft,
|
||||
onSubmit,
|
||||
submittingId,
|
||||
submitErrors,
|
||||
liveGradeIds,
|
||||
}: {
|
||||
set: ProblemSet;
|
||||
drafts: Record<string, string>;
|
||||
onDraft: (problemId: string, text: string) => void;
|
||||
onSubmit: () => void;
|
||||
submitting: boolean;
|
||||
submitError: string | null;
|
||||
grading: boolean;
|
||||
set: ProblemSet;
|
||||
drafts: Record<string, string>;
|
||||
onDraft: (problemId: string, text: string) => void;
|
||||
/** Per-problem submit (owner 2026-09-29): ONE attempt per problem. */
|
||||
onSubmit: (problemId: string) => void;
|
||||
/** The problem whose submit POST is in flight. */
|
||||
submittingId: string | null;
|
||||
/** Per-problem submit failures, keyed by problem id. */
|
||||
submitErrors: Record<string, string>;
|
||||
/** Problems whose grade rows are LIVE (the poll's activity feed). */
|
||||
liveGradeIds: ReadonlySet<string>;
|
||||
}) {
|
||||
const answerable = set.problems.filter((p) => !p.grade);
|
||||
const anyDraft = answerable.some((p) => (drafts[p.id] ?? p.answer ?? "") !== "");
|
||||
return (
|
||||
<div className="h-dvh overflow-y-auto" data-testid="practice-exam-scroll">
|
||||
<div className="mx-auto flex w-full max-w-3xl flex-col gap-6 p-6" data-testid="practice-exam">
|
||||
<div className="flex flex-col gap-1">
|
||||
<h1 className="font-title text-3xl tracking-tight">{set.title}</h1>
|
||||
<p className="text-xs text-muted-foreground/80" data-testid="practice-exam-levels">
|
||||
{LADDER_RUNGS[set.params.ladderRung].name} · {CUE_LEVELS[set.params.cueDistance].name} ·{" "}
|
||||
{PRESENTATIONS[set.params.presentation].name}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground" data-testid="practice-exam-status">
|
||||
{set.status === "partitioning" && "Partitioning the chains…"}
|
||||
{set.status === "generating" && `Generating — ${set.problems.filter((p) => p.status === "ready").length}/${set.problems.length} problems ready`}
|
||||
{set.status === "error" && (set.error ?? "Something went wrong")}
|
||||
{set.status === "ready" &&
|
||||
(grading ? "Grading your answers…" : `${set.problems.length} problems · ${set.problems.filter((p) => p.grade).length} graded`)}
|
||||
</p>
|
||||
</div>
|
||||
return (
|
||||
<div className="flex h-dvh">
|
||||
<div className="flex min-w-0 flex-1 flex-col">
|
||||
{/* The top bar (owner, UI round 2026-09-29): the new-session
|
||||
pattern — h-15, lh-drag (the Electron window-drag surface, so
|
||||
the traffic lights never cover content), the sidebar reopen
|
||||
toggle first, the set title truncating beside it. */}
|
||||
<header className="lh-drag flex h-15 items-center gap-3 border-b border-border px-3">
|
||||
<SidebarToggle />
|
||||
<div
|
||||
className="min-w-0 flex-1 truncate font-title text-3xl tracking-tight"
|
||||
data-testid="practice-exam-title"
|
||||
>
|
||||
{set.title}
|
||||
</div>
|
||||
</header>
|
||||
<div className="relative flex min-h-0 flex-1">
|
||||
<div
|
||||
className="h-full min-w-0 flex-1 overflow-y-auto"
|
||||
data-testid="practice-exam-scroll"
|
||||
>
|
||||
<div
|
||||
className="mx-auto flex w-full max-w-3xl flex-col gap-6 p-6"
|
||||
data-testid="practice-exam"
|
||||
>
|
||||
<div className="flex flex-col gap-1">
|
||||
<p
|
||||
className="text-xs text-muted-foreground/80"
|
||||
data-testid="practice-exam-levels"
|
||||
>
|
||||
{LADDER_RUNGS[set.params.ladderRung].name} ·{" "}
|
||||
{CUE_LEVELS[set.params.cueDistance].name} ·{" "}
|
||||
{PRESENTATIONS[set.params.presentation].name}
|
||||
</p>
|
||||
<p
|
||||
className="text-sm text-muted-foreground"
|
||||
data-testid="practice-exam-status"
|
||||
>
|
||||
{set.status === "partitioning" && "Partitioning the chains…"}
|
||||
{set.status === "generating" &&
|
||||
`Generating — ${set.problems.filter((p) => p.status === "ready").length}/${set.problems.length} problems ready`}
|
||||
{set.status === "error" &&
|
||||
(set.error ?? "Something went wrong")}
|
||||
{set.status === "ready" &&
|
||||
(liveGradeIds.size > 0
|
||||
? "Grading your answers…"
|
||||
: `${set.problems.length} problems · ${set.problems.filter((p) => p.grade).length} graded`)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{set.problems.map((problem, i) => (
|
||||
<section key={problem.id} className="rounded-xl border bg-card p-4" data-testid={`problem-${problem.id}`}>
|
||||
<h2 className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">Problem {i + 1}</h2>
|
||||
{problem.status === "generating" ? (
|
||||
// The stub: propositions NEVER surface (never-announce law).
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground" data-testid={`generating-${problem.id}`}>
|
||||
<BrailleSpinner className="size-4" />
|
||||
Generating problem…
|
||||
</div>
|
||||
) : problem.status === "error" ? (
|
||||
<p className="text-sm text-destructive" data-testid={`problem-error-${problem.id}`}>
|
||||
This problem failed to generate{problem.error ? ` — ${problem.error}` : ""}.
|
||||
</p>
|
||||
) : (
|
||||
<>
|
||||
<div className="lh-prose text-sm">
|
||||
<MessageResponse mode="static">{restoreMathEscapes(problem.statement)}</MessageResponse>
|
||||
</div>
|
||||
{problem.grade ? (
|
||||
// Graded: the answer read-only, the reveal below.
|
||||
<div className="mt-4 flex flex-col gap-3">
|
||||
<textarea
|
||||
data-testid={`answer-${problem.id}`}
|
||||
value={problem.answer ?? ""}
|
||||
readOnly
|
||||
rows={5}
|
||||
className="w-full resize-y rounded-lg border bg-muted/40 px-3 py-2 text-sm text-muted-foreground"
|
||||
/>
|
||||
<div className="rounded-lg border bg-background p-3" data-testid={`reveal-${problem.id}`}>
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<span className={`rounded px-1.5 py-0.5 text-xs font-medium uppercase ${verdictClass(problem.grade.verdict)}`}>
|
||||
{problem.grade.verdict}
|
||||
</span>
|
||||
</div>
|
||||
<div className="lh-prose text-sm" data-testid={`feedback-${problem.id}`}>
|
||||
<MessageResponse mode="static">{restoreMathEscapes(problem.grade.feedback)}</MessageResponse>
|
||||
</div>
|
||||
<div className="mt-3 text-xs uppercase tracking-wide text-muted-foreground">Model solution</div>
|
||||
<div className="lh-prose text-sm" data-testid={`solution-${problem.id}`}>
|
||||
<MessageResponse mode="static">{restoreMathEscapes(problem.solution)}</MessageResponse>
|
||||
</div>
|
||||
<div className="mt-3 text-xs uppercase tracking-wide text-muted-foreground">Rubric</div>
|
||||
<div className="lh-prose text-sm" data-testid={`rubric-${problem.id}`}>
|
||||
<MessageResponse mode="static">{restoreMathEscapes(problem.rubric)}</MessageResponse>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
// Answerable: the box (graded problems lock above).
|
||||
<div className="mt-4">
|
||||
<ProblemBox problem={problem} draft={drafts[problem.id] ?? problem.answer ?? ""} onDraft={(text) => onDraft(problem.id, text)} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
))}
|
||||
|
||||
{set.status === "ready" && answerable.length > 0 && (
|
||||
<div className="flex flex-col items-start gap-2">
|
||||
<button
|
||||
type="button"
|
||||
data-testid="practice-submit"
|
||||
onClick={onSubmit}
|
||||
disabled={!anyDraft || submitting}
|
||||
className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-40"
|
||||
>
|
||||
{submitting ? "Submitting…" : "Submit answers"}
|
||||
</button>
|
||||
{submitError && (
|
||||
<p data-testid="practice-submit-error" className="text-sm text-destructive">
|
||||
{submitError}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
{set.problems.map((problem, i) => (
|
||||
<section
|
||||
key={problem.id}
|
||||
className="rounded-xl border bg-card p-4"
|
||||
data-testid={`problem-${problem.id}`}
|
||||
>
|
||||
<h2 className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Problem {i + 1}
|
||||
</h2>
|
||||
{problem.status === "generating" ? (
|
||||
// The stub: propositions NEVER surface (never-announce law).
|
||||
<div
|
||||
className="flex items-center gap-2 text-sm text-muted-foreground"
|
||||
data-testid={`generating-${problem.id}`}
|
||||
>
|
||||
<BrailleSpinner className="size-4" />
|
||||
Generating problem…
|
||||
</div>
|
||||
) : problem.status === "error" ? (
|
||||
<p
|
||||
className="text-sm text-destructive"
|
||||
data-testid={`problem-error-${problem.id}`}
|
||||
>
|
||||
This problem failed to generate
|
||||
{problem.error ? ` — ${problem.error}` : ""}.
|
||||
</p>
|
||||
) : (
|
||||
<>
|
||||
<div className="lh-prose text-sm">
|
||||
<MessageResponse mode="static">
|
||||
{restoreMathEscapes(problem.statement)}
|
||||
</MessageResponse>
|
||||
</div>
|
||||
{problem.answer === undefined ? (
|
||||
// ANSWERABLE (owner 2026-09-29): the box + its OWN submit
|
||||
// button — one attempt, submitted the moment it's clicked.
|
||||
<div className="flex flex-col items-start gap-2">
|
||||
<div className="w-full">
|
||||
<ProblemBox
|
||||
problem={problem}
|
||||
draft={drafts[problem.id] ?? ""}
|
||||
onDraft={(text) => onDraft(problem.id, text)}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
data-testid={`practice-submit-${problem.id}`}
|
||||
onClick={() => onSubmit(problem.id)}
|
||||
disabled={
|
||||
set.status !== "ready" ||
|
||||
(drafts[problem.id] ?? "").trim() === "" ||
|
||||
submittingId !== null
|
||||
}
|
||||
className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-40"
|
||||
>
|
||||
{submittingId === problem.id
|
||||
? "Submitting…"
|
||||
: "Submit answer"}
|
||||
</button>
|
||||
{submitErrors[problem.id] && (
|
||||
<p
|
||||
data-testid={`practice-submit-error-${problem.id}`}
|
||||
className="text-sm text-destructive"
|
||||
>
|
||||
{submitErrors[problem.id]}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
// SUBMITTED (owner 2026-09-29): the answer locks, the
|
||||
// model solution reveals INSTANTLY, the rubric stays
|
||||
// collapsed, and the grade lands live when it lands.
|
||||
<div className="mt-4 flex flex-col gap-3">
|
||||
<textarea
|
||||
data-testid={`answer-${problem.id}`}
|
||||
value={problem.answer}
|
||||
readOnly
|
||||
rows={5}
|
||||
className="w-full resize-y rounded-lg border bg-muted/40 px-3 py-2 text-sm text-muted-foreground"
|
||||
/>
|
||||
<div
|
||||
className="rounded-lg border bg-background p-3"
|
||||
data-testid={`reveal-${problem.id}`}
|
||||
>
|
||||
{problem.grade ? (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span
|
||||
data-testid={`grade-${problem.id}`}
|
||||
className="font-mono text-sm font-medium"
|
||||
>
|
||||
{problem.grade.score}/10
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="lh-prose text-sm"
|
||||
data-testid={`reasoning-${problem.id}`}
|
||||
>
|
||||
<MessageResponse mode="static">
|
||||
{restoreMathEscapes(
|
||||
problem.grade.reasoning,
|
||||
)}
|
||||
</MessageResponse>
|
||||
</div>
|
||||
</div>
|
||||
) : liveGradeIds.has(problem.id) ? (
|
||||
<div
|
||||
className="flex items-center gap-2 text-sm text-muted-foreground"
|
||||
data-testid={`grading-${problem.id}`}
|
||||
>
|
||||
<BrailleSpinner className="size-4" />
|
||||
Grading…
|
||||
</div>
|
||||
) : (
|
||||
<p
|
||||
className="text-sm text-muted-foreground"
|
||||
data-testid={`grade-interrupted-${problem.id}`}
|
||||
>
|
||||
Grade interrupted — the answer stands.
|
||||
</p>
|
||||
)}
|
||||
<div className="mt-3 text-xs uppercase tracking-wide text-muted-foreground">
|
||||
Model solution
|
||||
</div>
|
||||
<div
|
||||
className="lh-prose text-sm"
|
||||
data-testid={`solution-${problem.id}`}
|
||||
>
|
||||
<MessageResponse mode="static">
|
||||
{restoreMathEscapes(problem.solution)}
|
||||
</MessageResponse>
|
||||
</div>
|
||||
<details
|
||||
className="mt-3"
|
||||
data-testid={`rubric-${problem.id}`}
|
||||
>
|
||||
<summary className="cursor-pointer select-none text-xs uppercase tracking-wide text-muted-foreground">
|
||||
Rubric
|
||||
</summary>
|
||||
<div className="mt-2 lh-prose text-sm">
|
||||
<MessageResponse mode="static">
|
||||
{restoreMathEscapes(problem.rubric)}
|
||||
</MessageResponse>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function PracticeExam({ initial }: { initial: ProblemSet }) {
|
||||
const [set, setSet] = useState<ProblemSet>(initial);
|
||||
const [drafts, setDrafts] = useState<Record<string, string>>({});
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [submitError, setSubmitError] = useState<string | null>(null);
|
||||
const [gradingLive, setGradingLive] = useState(false);
|
||||
const mounted = useRef(true);
|
||||
useEffect(() => {
|
||||
mounted.current = true;
|
||||
return () => {
|
||||
mounted.current = false;
|
||||
};
|
||||
}, []);
|
||||
const [set, setSet] = useState<ProblemSet>(initial);
|
||||
const [drafts, setDrafts] = useState<Record<string, string>>({});
|
||||
const [submittingId, setSubmittingId] = useState<string | null>(null);
|
||||
const [submitErrors, setSubmitErrors] = useState<Record<string, string>>({});
|
||||
// Which problems' grade rows are LIVE (activity feed) — drives the
|
||||
// per-problem "Grading…" spinners and the status line.
|
||||
const [liveGradeIds, setLiveGradeIds] = useState<Set<string>>(new Set());
|
||||
// True from a successful submit until the feed shows no live grade
|
||||
// rows for this set — keeps the poll alive across refetches.
|
||||
const [gradingLive, setGradingLive] = useState(false);
|
||||
const mounted = useRef(true);
|
||||
useEffect(() => {
|
||||
mounted.current = true;
|
||||
return () => {
|
||||
mounted.current = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const refetch = useCallback(async () => {
|
||||
try {
|
||||
const res = await fetch(`/api/practice/sets/${initial.id}`, { cache: "no-store" });
|
||||
if (!res.ok) return;
|
||||
const d = (await res.json()) as { set: ProblemSet };
|
||||
if (mounted.current) setSet(d.set);
|
||||
} catch {
|
||||
// transient poll failures keep the last snapshot
|
||||
}
|
||||
}, [initial.id]);
|
||||
const refetch = useCallback(async () => {
|
||||
try {
|
||||
const res = await fetch(`/api/practice/sets/${initial.id}`, {
|
||||
cache: "no-store",
|
||||
});
|
||||
if (!res.ok) return;
|
||||
const d = (await res.json()) as { set: ProblemSet };
|
||||
if (mounted.current) setSet(d.set);
|
||||
} catch {
|
||||
// transient poll failures keep the last snapshot
|
||||
}
|
||||
}, [initial.id]);
|
||||
|
||||
// The poll: while not ready (generation), or while a grading run is
|
||||
// live for this set with outstanding ungraded answers. The activity
|
||||
// feed is the grading-liveness truth — a dropped grade (no live row)
|
||||
// settles the page instead of polling forever.
|
||||
const pendingGrade = set.problems.some((p) => p.answer && !p.grade);
|
||||
const needsPoll = set.status !== "ready" || (gradingLive && pendingGrade);
|
||||
useEffect(() => {
|
||||
if (!needsPoll) return;
|
||||
let stopped = false;
|
||||
const tick = async () => {
|
||||
await refetch();
|
||||
try {
|
||||
const res = await fetch("/api/activity", { cache: "no-store" });
|
||||
if (!res.ok) return;
|
||||
const feed = (await res.json()) as { practice?: Array<{ id: string; kind: string }> };
|
||||
if (!stopped && mounted.current) {
|
||||
setGradingLive((feed.practice ?? []).some((row) => row.id === initial.id));
|
||||
}
|
||||
} catch {
|
||||
// keep the last liveness read
|
||||
}
|
||||
};
|
||||
void tick();
|
||||
const t = setInterval(() => void tick(), 2000);
|
||||
return () => {
|
||||
stopped = true;
|
||||
clearInterval(t);
|
||||
};
|
||||
}, [needsPoll, refetch, initial.id]);
|
||||
// The poll: while not ready (generation), or while a grading run is
|
||||
// live for this set with outstanding ungraded answers. The activity
|
||||
// feed's practice rows are ROW-KEYED (setId:grade:problemId) — the
|
||||
// live rows name exactly which grades are pending; a dropped grade
|
||||
// (no live row) settles the page instead of polling forever.
|
||||
const pendingGrade = set.problems.some(
|
||||
(p) => p.answer !== undefined && !p.grade,
|
||||
);
|
||||
const needsPoll = set.status !== "ready" || (gradingLive && pendingGrade);
|
||||
useEffect(() => {
|
||||
if (!needsPoll) return;
|
||||
let stopped = false;
|
||||
const tick = async () => {
|
||||
await refetch();
|
||||
try {
|
||||
const res = await fetch("/api/activity", { cache: "no-store" });
|
||||
if (!res.ok) return;
|
||||
const feed = (await res.json()) as {
|
||||
practice?: Array<{ id: string; kind: string }>;
|
||||
};
|
||||
if (!stopped && mounted.current) {
|
||||
const prefix = `${initial.id}:grade:`;
|
||||
const pids = (feed.practice ?? [])
|
||||
.filter((row) => row.id.startsWith(prefix))
|
||||
.map((row) => row.id.slice(prefix.length));
|
||||
setLiveGradeIds(new Set(pids));
|
||||
setGradingLive(pids.length > 0);
|
||||
}
|
||||
} catch {
|
||||
// keep the last liveness read
|
||||
}
|
||||
};
|
||||
void tick();
|
||||
const t = setInterval(() => void tick(), 2000);
|
||||
return () => {
|
||||
stopped = true;
|
||||
clearInterval(t);
|
||||
};
|
||||
}, [needsPoll, refetch, initial.id]);
|
||||
|
||||
const submit = useCallback(async () => {
|
||||
if (submitting) return;
|
||||
const answers = set.problems
|
||||
.filter((p) => !p.grade)
|
||||
.map((p) => ({ problemId: p.id, text: drafts[p.id] ?? p.answer ?? "" }))
|
||||
.filter((a) => a.text.trim() !== "");
|
||||
if (answers.length === 0) return;
|
||||
setSubmitting(true);
|
||||
setSubmitError(null);
|
||||
try {
|
||||
const res = await fetch(`/api/practice/sets/${set.id}/answers`, {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify({ answers }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const body = (await res.json().catch(() => ({}))) as { error?: string };
|
||||
setSubmitError(body.error ?? `Submit failed (${res.status})`);
|
||||
setSubmitting(false);
|
||||
return;
|
||||
}
|
||||
setSubmitting(false);
|
||||
setGradingLive(true); // grades land via the poll
|
||||
await refetch();
|
||||
} catch {
|
||||
setSubmitError("Submit failed — network error. Try again.");
|
||||
setSubmitting(false);
|
||||
}
|
||||
}, [submitting, set, drafts, refetch]);
|
||||
// ONE attempt per problem (owner 2026-09-29): the submit posts THAT
|
||||
// problem's answer alone; the server refuses a second submission
|
||||
// forever after. On success the box locks (answer persisted) and the
|
||||
// reveal shows instantly; the grade arrives via the poll.
|
||||
const submit = useCallback(
|
||||
async (problemId: string) => {
|
||||
if (submittingId !== null) return;
|
||||
const p = set.problems.find((q) => q.id === problemId);
|
||||
if (!p || p.answer !== undefined) return; // done problems never resubmit
|
||||
const text = drafts[problemId] ?? "";
|
||||
if (text.trim() === "") return;
|
||||
setSubmittingId(problemId);
|
||||
setSubmitErrors((prev) => {
|
||||
const next = { ...prev };
|
||||
delete next[problemId];
|
||||
return next;
|
||||
});
|
||||
try {
|
||||
const res = await fetch(`/api/practice/sets/${set.id}/answers`, {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify({ answers: [{ problemId, text }] }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const body = (await res.json().catch(() => ({}))) as {
|
||||
error?: string;
|
||||
};
|
||||
setSubmitErrors((prev) => ({
|
||||
...prev,
|
||||
[problemId]: body.error ?? `Submit failed (${res.status})`,
|
||||
}));
|
||||
setSubmittingId(null);
|
||||
return;
|
||||
}
|
||||
setSubmittingId(null);
|
||||
setGradingLive(true); // the grade lands via the poll
|
||||
await refetch();
|
||||
} catch {
|
||||
setSubmitErrors((prev) => ({
|
||||
...prev,
|
||||
[problemId]: "Submit failed — network error. Try again.",
|
||||
}));
|
||||
setSubmittingId(null);
|
||||
}
|
||||
},
|
||||
[submittingId, set, drafts, refetch],
|
||||
);
|
||||
|
||||
return (
|
||||
<PracticeExamBody
|
||||
set={set}
|
||||
drafts={drafts}
|
||||
onDraft={(problemId, text) => setDrafts((prev) => ({ ...prev, [problemId]: text }))}
|
||||
onSubmit={() => void submit()}
|
||||
submitting={submitting}
|
||||
submitError={submitError}
|
||||
grading={gradingLive && pendingGrade}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<PracticeExamBody
|
||||
set={set}
|
||||
drafts={drafts}
|
||||
onDraft={(problemId, text) =>
|
||||
setDrafts((prev) => ({ ...prev, [problemId]: text }))
|
||||
}
|
||||
onSubmit={(problemId) => void submit(problemId)}
|
||||
submittingId={submittingId}
|
||||
submitErrors={submitErrors}
|
||||
liveGradeIds={liveGradeIds}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
+248
-198
@@ -13,229 +13,279 @@ import { useCallback, useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { createPortal } from "react-dom";
|
||||
import { PlusIcon, TrashIcon } from "lucide-react";
|
||||
import { SidebarToggle } from "@/components/sidebar";
|
||||
import type { ProblemSet } from "@/src/core";
|
||||
import { PracticeDialog } from "@/components/practice-dialog";
|
||||
|
||||
/** A set's status word — plain and honest, no invented progress. */
|
||||
export function setStatusWord(set: Pick<ProblemSet, "status">): string {
|
||||
return set.status === "partitioning" ? "partitioning" : set.status === "generating" ? "generating" : set.status;
|
||||
return set.status === "partitioning"
|
||||
? "partitioning"
|
||||
: set.status === "generating"
|
||||
? "generating"
|
||||
: set.status;
|
||||
}
|
||||
|
||||
/** The list's pure body — exported for SSR pins. Rows are buttons
|
||||
* (click-through); the delete affordance is a nested icon button. */
|
||||
export function PracticeListBody({
|
||||
sets,
|
||||
onOpen,
|
||||
onDelete,
|
||||
onNew,
|
||||
sets,
|
||||
onOpen,
|
||||
onDelete,
|
||||
onNew,
|
||||
}: {
|
||||
sets: ProblemSet[];
|
||||
onOpen: (id: string) => void;
|
||||
onDelete: (set: ProblemSet) => void;
|
||||
onNew: () => void;
|
||||
sets: ProblemSet[];
|
||||
onOpen: (id: string) => void;
|
||||
onDelete: (set: ProblemSet) => void;
|
||||
onNew: () => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="h-dvh overflow-y-auto" data-testid="practice-list-scroll">
|
||||
<div className="mx-auto flex w-full max-w-3xl flex-col gap-3 p-6" data-testid="practice-list">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="font-title text-3xl tracking-tight">Practice</h1>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="practice-new"
|
||||
onClick={onNew}
|
||||
className="flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors hover:bg-accent"
|
||||
>
|
||||
<PlusIcon className="size-3.5" />
|
||||
New problem set
|
||||
</button>
|
||||
</div>
|
||||
return (
|
||||
<div className="flex h-dvh">
|
||||
<div className="flex min-w-0 flex-1 flex-col">
|
||||
{/* The top bar (owner, UI round 2026-09-29): the new-session
|
||||
pattern — h-15, lh-drag (the Electron window-drag surface),
|
||||
the sidebar reopen toggle first, "Practice" beside it, the
|
||||
page's one action at the right edge (lh-no-drag — it must
|
||||
stay clickable inside the drag band). */}
|
||||
<header className="lh-drag flex h-15 items-center gap-3 border-b border-border px-3">
|
||||
<SidebarToggle />
|
||||
<div className="min-w-0 flex-1 truncate font-title text-3xl tracking-tight">
|
||||
Practice
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="practice-new"
|
||||
onClick={onNew}
|
||||
className="lh-no-drag flex shrink-0 items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors hover:bg-accent"
|
||||
>
|
||||
<PlusIcon className="size-3.5" />
|
||||
New problem set
|
||||
</button>
|
||||
</header>
|
||||
<div className="relative flex min-h-0 flex-1">
|
||||
<div
|
||||
className="h-full min-w-0 flex-1 overflow-y-auto"
|
||||
data-testid="practice-list-scroll"
|
||||
>
|
||||
<div
|
||||
className="mx-auto flex w-full max-w-3xl flex-col gap-3 p-6"
|
||||
data-testid="practice-list"
|
||||
>
|
||||
{sets.length === 0 && (
|
||||
<div
|
||||
className="rounded-xl border bg-card p-6 text-sm text-muted-foreground"
|
||||
data-testid="practice-empty"
|
||||
>
|
||||
No problem sets yet — create one from a session.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{sets.length === 0 && (
|
||||
<div className="rounded-xl border bg-card p-6 text-sm text-muted-foreground" data-testid="practice-empty">
|
||||
No problem sets yet — create one from a session.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
{sets.map((set) => {
|
||||
const ready = set.problems.filter((p) => p.status === "ready").length;
|
||||
const graded = set.problems.filter((p) => p.grade).length;
|
||||
return (
|
||||
<div key={set.id} className="flex items-stretch gap-1">
|
||||
<button
|
||||
type="button"
|
||||
data-testid={`practice-row-${set.id}`}
|
||||
onClick={() => onOpen(set.id)}
|
||||
className="flex flex-1 items-center justify-between gap-4 rounded-xl border bg-card px-4 py-3 text-left transition-colors hover:bg-accent/50"
|
||||
>
|
||||
<span className="min-w-0">
|
||||
<span className="block truncate font-medium">{set.title}</span>
|
||||
<span className="block text-xs text-muted-foreground">
|
||||
{set.createdAt.slice(0, 10)} · {set.problems.length > 0 ? `${ready}/${set.problems.length} problems` : "no problems yet"}
|
||||
{graded > 0 ? ` · ${graded} graded` : ""}
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
data-testid={`practice-status-${set.id}`}
|
||||
className={`shrink-0 text-xs uppercase tracking-wide ${
|
||||
set.status === "error" ? "text-destructive" : "text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{setStatusWord(set)}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
data-testid={`practice-delete-${set.id}`}
|
||||
aria-label={`Delete ${set.title}`}
|
||||
onClick={() => onDelete(set)}
|
||||
className="flex items-center rounded-xl border px-3 text-muted-foreground/60 transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<TrashIcon className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<div className="flex flex-col gap-2">
|
||||
{sets.map((set) => {
|
||||
const ready = set.problems.filter(
|
||||
(p) => p.status === "ready",
|
||||
).length;
|
||||
const graded = set.problems.filter((p) => p.grade).length;
|
||||
return (
|
||||
<div key={set.id} className="flex items-stretch gap-1">
|
||||
<button
|
||||
type="button"
|
||||
data-testid={`practice-row-${set.id}`}
|
||||
onClick={() => onOpen(set.id)}
|
||||
className="flex flex-1 items-center justify-between gap-4 rounded-xl border bg-card px-4 py-3 text-left transition-colors hover:bg-accent/50"
|
||||
>
|
||||
<span className="min-w-0">
|
||||
<span className="block truncate font-medium">
|
||||
{set.title}
|
||||
</span>
|
||||
<span className="block text-xs text-muted-foreground">
|
||||
{set.createdAt.slice(0, 10)} ·{" "}
|
||||
{set.problems.length > 0
|
||||
? `${ready}/${set.problems.length} problems`
|
||||
: "no problems yet"}
|
||||
{graded > 0 ? ` · ${graded} graded` : ""}
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
data-testid={`practice-status-${set.id}`}
|
||||
className={`shrink-0 text-xs uppercase tracking-wide ${
|
||||
set.status === "error"
|
||||
? "text-destructive"
|
||||
: "text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{setStatusWord(set)}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
data-testid={`practice-delete-${set.id}`}
|
||||
aria-label={`Delete ${set.title}`}
|
||||
onClick={() => onDelete(set)}
|
||||
className="flex items-center rounded-xl border px-3 text-muted-foreground/60 transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<TrashIcon className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** The delete confirm — the delete-session dialog's shape (no mode
|
||||
* checkbox: a set has no preserve-graph question). Pure body + portal
|
||||
* wrapper. */
|
||||
export function DeleteSetBody({
|
||||
title,
|
||||
busy,
|
||||
failure,
|
||||
onClose,
|
||||
onRun,
|
||||
title,
|
||||
busy,
|
||||
failure,
|
||||
onClose,
|
||||
onRun,
|
||||
}: {
|
||||
title: string;
|
||||
busy: boolean;
|
||||
failure: string | null;
|
||||
onClose: () => void;
|
||||
onRun: () => void;
|
||||
title: string;
|
||||
busy: boolean;
|
||||
failure: string | null;
|
||||
onClose: () => void;
|
||||
onRun: () => void;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Delete problem set"
|
||||
data-testid="delete-set-dialog"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="w-[32rem] max-w-[calc(100vw-2rem)] rounded-xl border bg-card p-5 shadow-xl"
|
||||
>
|
||||
<h2 className="font-title text-2xl tracking-tight text-destructive">Delete problem set?</h2>
|
||||
<p className="mt-2 font-mono text-sm">{title}</p>
|
||||
<p className="mt-3 text-sm text-muted-foreground">
|
||||
The set and its problems are removed. Nothing in the graph or your sessions changes.
|
||||
</p>
|
||||
{failure && (
|
||||
<p data-testid="delete-set-error" className="mt-3 text-sm text-destructive">
|
||||
{failure}
|
||||
</p>
|
||||
)}
|
||||
<div className="mt-5 flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
disabled={busy}
|
||||
className="rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="delete-set-run"
|
||||
onClick={onRun}
|
||||
disabled={busy}
|
||||
className="rounded-md bg-destructive px-3 py-1.5 text-sm font-medium text-destructive-foreground transition-colors hover:bg-destructive/90 disabled:opacity-40"
|
||||
>
|
||||
{busy ? "Deleting…" : "Delete"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Delete problem set"
|
||||
data-testid="delete-set-dialog"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="w-[32rem] max-w-[calc(100vw-2rem)] rounded-xl border bg-card p-5 shadow-xl"
|
||||
>
|
||||
<h2 className="font-title text-2xl tracking-tight text-destructive">
|
||||
Delete problem set?
|
||||
</h2>
|
||||
<p className="mt-2 font-mono text-sm">{title}</p>
|
||||
<p className="mt-3 text-sm text-muted-foreground">
|
||||
The set and its problems are removed. Nothing in the graph or your
|
||||
sessions changes.
|
||||
</p>
|
||||
{failure && (
|
||||
<p
|
||||
data-testid="delete-set-error"
|
||||
className="mt-3 text-sm text-destructive"
|
||||
>
|
||||
{failure}
|
||||
</p>
|
||||
)}
|
||||
<div className="mt-5 flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
disabled={busy}
|
||||
className="rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="delete-set-run"
|
||||
onClick={onRun}
|
||||
disabled={busy}
|
||||
className="rounded-md bg-destructive px-3 py-1.5 text-sm font-medium text-destructive-foreground transition-colors hover:bg-destructive/90 disabled:opacity-40"
|
||||
>
|
||||
{busy ? "Deleting…" : "Delete"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function PracticeListPage({ initialSets }: { initialSets: ProblemSet[] }) {
|
||||
const router = useRouter();
|
||||
const [sets, setSets] = useState<ProblemSet[]>(initialSets);
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [deleting, setDeleting] = useState<ProblemSet | null>(null);
|
||||
const [deleteBusy, setDeleteBusy] = useState(false);
|
||||
const [deleteFailure, setDeleteFailure] = useState<string | null>(null);
|
||||
export function PracticeListPage({
|
||||
initialSets,
|
||||
}: {
|
||||
initialSets: ProblemSet[];
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [sets, setSets] = useState<ProblemSet[]>(initialSets);
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [deleting, setDeleting] = useState<ProblemSet | null>(null);
|
||||
const [deleteBusy, setDeleteBusy] = useState(false);
|
||||
const [deleteFailure, setDeleteFailure] = useState<string | null>(null);
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
try {
|
||||
const res = await fetch("/api/practice/sets", { cache: "no-store" });
|
||||
if (!res.ok) return;
|
||||
const d = (await res.json()) as { sets: ProblemSet[] };
|
||||
setSets(d.sets);
|
||||
} catch {
|
||||
// a transient failure on the poll keeps the last snapshot
|
||||
}
|
||||
}, []);
|
||||
const refresh = useCallback(async () => {
|
||||
try {
|
||||
const res = await fetch("/api/practice/sets", { cache: "no-store" });
|
||||
if (!res.ok) return;
|
||||
const d = (await res.json()) as { sets: ProblemSet[] };
|
||||
setSets(d.sets);
|
||||
} catch {
|
||||
// a transient failure on the poll keeps the last snapshot
|
||||
}
|
||||
}, []);
|
||||
|
||||
// The reveal poll: while any set is partitioning/generating, statuses
|
||||
// live-update; a settled list goes quiet.
|
||||
const anyRunning = sets.some((s) => s.status === "partitioning" || s.status === "generating");
|
||||
useEffect(() => {
|
||||
if (!anyRunning) return;
|
||||
const t = setInterval(() => void refresh(), 2000);
|
||||
return () => clearInterval(t);
|
||||
}, [anyRunning, refresh]);
|
||||
// The reveal poll: while any set is partitioning/generating, statuses
|
||||
// live-update; a settled list goes quiet.
|
||||
const anyRunning = sets.some(
|
||||
(s) => s.status === "partitioning" || s.status === "generating",
|
||||
);
|
||||
useEffect(() => {
|
||||
if (!anyRunning) return;
|
||||
const t = setInterval(() => void refresh(), 2000);
|
||||
return () => clearInterval(t);
|
||||
}, [anyRunning, refresh]);
|
||||
|
||||
const runDelete = useCallback(async () => {
|
||||
if (!deleting || deleteBusy) return;
|
||||
setDeleteBusy(true);
|
||||
setDeleteFailure(null);
|
||||
try {
|
||||
const res = await fetch(`/api/practice/sets/${deleting.id}`, { method: "DELETE" });
|
||||
if (!res.ok) {
|
||||
const body = (await res.json().catch(() => ({}))) as { error?: string };
|
||||
setDeleteFailure(body.error ?? `Delete failed (${res.status})`);
|
||||
setDeleteBusy(false);
|
||||
return;
|
||||
}
|
||||
setDeleting(null);
|
||||
setDeleteBusy(false);
|
||||
await refresh();
|
||||
} catch {
|
||||
setDeleteFailure("Delete failed — network error. Try again.");
|
||||
setDeleteBusy(false);
|
||||
}
|
||||
}, [deleting, deleteBusy, refresh]);
|
||||
const runDelete = useCallback(async () => {
|
||||
if (!deleting || deleteBusy) return;
|
||||
setDeleteBusy(true);
|
||||
setDeleteFailure(null);
|
||||
try {
|
||||
const res = await fetch(`/api/practice/sets/${deleting.id}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
if (!res.ok) {
|
||||
const body = (await res.json().catch(() => ({}))) as { error?: string };
|
||||
setDeleteFailure(body.error ?? `Delete failed (${res.status})`);
|
||||
setDeleteBusy(false);
|
||||
return;
|
||||
}
|
||||
setDeleting(null);
|
||||
setDeleteBusy(false);
|
||||
await refresh();
|
||||
} catch {
|
||||
setDeleteFailure("Delete failed — network error. Try again.");
|
||||
setDeleteBusy(false);
|
||||
}
|
||||
}, [deleting, deleteBusy, refresh]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PracticeListBody
|
||||
sets={sets}
|
||||
onOpen={(id) => router.push(`/practice/${id}`)}
|
||||
onDelete={(set) => setDeleting(set)}
|
||||
onNew={() => setCreating(true)}
|
||||
/>
|
||||
{creating && <PracticeDialog onClose={() => setCreating(false)} />}
|
||||
{deleting &&
|
||||
createPortal(
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-background/80"
|
||||
onClick={() => {
|
||||
if (!deleteBusy) setDeleting(null);
|
||||
}}
|
||||
>
|
||||
<DeleteSetBody
|
||||
title={deleting.title}
|
||||
busy={deleteBusy}
|
||||
failure={deleteFailure}
|
||||
onClose={() => setDeleting(null)}
|
||||
onRun={() => void runDelete()}
|
||||
/>
|
||||
</div>,
|
||||
document.body,
|
||||
)}
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<PracticeListBody
|
||||
sets={sets}
|
||||
onOpen={(id) => router.push(`/practice/${id}`)}
|
||||
onDelete={(set) => setDeleting(set)}
|
||||
onNew={() => setCreating(true)}
|
||||
/>
|
||||
{creating && <PracticeDialog onClose={() => setCreating(false)} />}
|
||||
{deleting &&
|
||||
createPortal(
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-background/80"
|
||||
onClick={() => {
|
||||
if (!deleteBusy) setDeleting(null);
|
||||
}}
|
||||
>
|
||||
<DeleteSetBody
|
||||
title={deleting.title}
|
||||
busy={deleteBusy}
|
||||
failure={deleteFailure}
|
||||
onClose={() => setDeleting(null)}
|
||||
onRun={() => void runDelete()}
|
||||
/>
|
||||
</div>,
|
||||
document.body,
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user