Feedback categories page; treat 204 responses as success
Feedback → Categories: add, rename, reorder, archive/restore, and delete unused categories. Feedback rows show the category's current label. The API helper now accepts 204 No Content, which previously surfaced as a "No Content" error after archive/delete and quiz attempt resets. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
gosangam
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
b194d4aa03
commit
a63c329850
@@ -0,0 +1,366 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* /feedback/categories — the options on the app's /feedback form.
|
||||
*
|
||||
* A category's key (what each submission stores) is fixed when it's created,
|
||||
* so renaming one relabels every past submission too. Archiving takes it off
|
||||
* the form but keeps its label on existing feedback. Only a category nothing
|
||||
* has been filed under can be deleted — production feedback is never left
|
||||
* without a category.
|
||||
*
|
||||
* Anyone who can read feedback can see this page; changing it needs
|
||||
* feedback:categories.
|
||||
*/
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { ArrowDown, ArrowUp, Plus } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
AdminError,
|
||||
feedbackCategories,
|
||||
type FeedbackCategory,
|
||||
} from "@/lib/api";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Modal } from "@/components/ui/modal";
|
||||
import { Clamp } from "@/components/ui/clamp";
|
||||
import { Can, useStaff } from "@/components/staff-context";
|
||||
import { useConfirm } from "@/components/confirm";
|
||||
|
||||
const errMsg = (err: unknown, fallback: string) =>
|
||||
err instanceof AdminError ? err.message : fallback;
|
||||
|
||||
export default function FeedbackCategoriesPage() {
|
||||
const [list, setList] = useState<FeedbackCategory[] | null>(null);
|
||||
const [editing, setEditing] = useState<FeedbackCategory | "new" | null>(
|
||||
null,
|
||||
);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const confirm = useConfirm();
|
||||
const { can } = useStaff();
|
||||
const canEdit = can("feedback:categories");
|
||||
|
||||
const refresh = useCallback(
|
||||
() =>
|
||||
feedbackCategories
|
||||
.list()
|
||||
.then(setList)
|
||||
.catch((err) => {
|
||||
toast.error(errMsg(err, "Could not load categories"));
|
||||
setList([]);
|
||||
}),
|
||||
[],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
void refresh();
|
||||
}, [refresh]);
|
||||
|
||||
const active = (list ?? []).filter((c) => !c.archived_at);
|
||||
const archived = (list ?? []).filter((c) => c.archived_at);
|
||||
|
||||
const run = async (fn: () => Promise<unknown>, ok: string) => {
|
||||
setBusy(true);
|
||||
try {
|
||||
await fn();
|
||||
toast.success(ok);
|
||||
await refresh();
|
||||
} catch (err) {
|
||||
toast.error(errMsg(err, "That didn't work"));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const move = (i: number, by: number) => {
|
||||
const j = i + by;
|
||||
if (j < 0 || j >= active.length) return;
|
||||
const keys = active.map((c) => c.key);
|
||||
[keys[i], keys[j]] = [keys[j], keys[i]];
|
||||
void run(() => feedbackCategories.reorder(keys), "Order saved");
|
||||
};
|
||||
|
||||
const setArchived = (c: FeedbackCategory, archived: boolean) =>
|
||||
run(
|
||||
() =>
|
||||
feedbackCategories.update(c.key, {
|
||||
label: c.label,
|
||||
description: c.description,
|
||||
archived,
|
||||
}),
|
||||
archived ? `“${c.label}” archived` : `“${c.label}” restored`,
|
||||
);
|
||||
|
||||
const remove = async (c: FeedbackCategory) => {
|
||||
if (
|
||||
await confirm({
|
||||
title: `Delete “${c.label}”?`,
|
||||
message: "Nothing has been filed under it, so nothing else changes.",
|
||||
confirmLabel: "Delete category",
|
||||
destructive: true,
|
||||
})
|
||||
) {
|
||||
void run(() => feedbackCategories.remove(c.key), "Category deleted");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<header className="flex flex-wrap items-start justify-between gap-4">
|
||||
<div className="min-w-0 flex-1 basis-64">
|
||||
<Link
|
||||
href="/feedback"
|
||||
className="text-xs text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
← Feedback
|
||||
</Link>
|
||||
<h1 className="mt-1 text-xl font-semibold text-foreground">
|
||||
Feedback categories
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
The choices on the app's feedback form, in this order.
|
||||
Renaming a category relabels its past feedback too. Archive one to
|
||||
take it off the form without touching what's already been sent.
|
||||
</p>
|
||||
</div>
|
||||
<Can perm="feedback:categories">
|
||||
<Button onClick={() => setEditing("new")}>
|
||||
<Plus className="size-4" />
|
||||
New category
|
||||
</Button>
|
||||
</Can>
|
||||
</header>
|
||||
|
||||
{list === null ? (
|
||||
<p className="text-sm text-muted-foreground">Loading…</p>
|
||||
) : (
|
||||
<>
|
||||
<section className="space-y-2">
|
||||
<h2 className="text-sm font-medium text-foreground">
|
||||
On the form
|
||||
</h2>
|
||||
<ul className="divide-y divide-border rounded-xl border border-border bg-card">
|
||||
{active.map((c, i) => (
|
||||
<li
|
||||
key={c.key}
|
||||
className="flex flex-wrap items-start gap-3 px-4 py-3"
|
||||
>
|
||||
<CategoryText c={c} />
|
||||
{canEdit && (
|
||||
<div className="flex shrink-0 flex-wrap items-center gap-1">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
disabled={busy || i === 0}
|
||||
onClick={() => move(i, -1)}
|
||||
aria-label={`Move ${c.label} up`}
|
||||
>
|
||||
<ArrowUp className="size-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
disabled={busy || i === active.length - 1}
|
||||
onClick={() => move(i, 1)}
|
||||
aria-label={`Move ${c.label} down`}
|
||||
>
|
||||
<ArrowDown className="size-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={busy}
|
||||
onClick={() => setEditing(c)}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
// The form must always offer something.
|
||||
disabled={busy || active.length === 1}
|
||||
onClick={() => void setArchived(c, true)}
|
||||
>
|
||||
Archive
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
{archived.length > 0 && (
|
||||
<section className="space-y-2">
|
||||
<h2 className="text-sm font-medium text-foreground">Archived</h2>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Not offered on the form. Feedback already filed under them
|
||||
keeps its category.
|
||||
</p>
|
||||
<ul className="divide-y divide-border rounded-xl border border-border bg-card">
|
||||
{archived.map((c) => (
|
||||
<li
|
||||
key={c.key}
|
||||
className="flex flex-wrap items-start gap-3 px-4 py-3 opacity-80"
|
||||
>
|
||||
<CategoryText c={c} />
|
||||
{canEdit && (
|
||||
<div className="flex shrink-0 flex-wrap items-center gap-1">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={busy}
|
||||
onClick={() => setEditing(c)}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
disabled={busy}
|
||||
onClick={() => void setArchived(c, false)}
|
||||
>
|
||||
Restore
|
||||
</Button>
|
||||
{!c.usage_count && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
disabled={busy}
|
||||
onClick={() => void remove(c)}
|
||||
className="text-destructive"
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<CategoryModal
|
||||
target={editing}
|
||||
onClose={() => setEditing(null)}
|
||||
onSaved={() => {
|
||||
setEditing(null);
|
||||
void refresh();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CategoryText({ c }: { c: FeedbackCategory }) {
|
||||
const n = c.usage_count ?? 0;
|
||||
return (
|
||||
<div className="min-w-0 flex-1 basis-48">
|
||||
<Clamp className="text-sm font-medium text-foreground">{c.label}</Clamp>
|
||||
{c.description && (
|
||||
<Clamp lines={2} className="mt-0.5 text-xs text-muted-foreground">
|
||||
{c.description}
|
||||
</Clamp>
|
||||
)}
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
<span className="font-mono">{c.key}</span> · {n}{" "}
|
||||
{n === 1 ? "submission" : "submissions"}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CategoryModal({
|
||||
target,
|
||||
onClose,
|
||||
onSaved,
|
||||
}: {
|
||||
target: FeedbackCategory | "new" | null;
|
||||
onClose: () => void;
|
||||
onSaved: () => void;
|
||||
}) {
|
||||
const editing = target && target !== "new" ? target : null;
|
||||
// Re-seed the fields whenever a different category (or "new") opens.
|
||||
const seed = editing ? editing.key : target;
|
||||
const [lastSeed, setLastSeed] = useState<typeof seed>(null);
|
||||
const [label, setLabel] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
if (seed !== lastSeed) {
|
||||
setLastSeed(seed);
|
||||
setLabel(editing?.label ?? "");
|
||||
setDescription(editing?.description ?? "");
|
||||
}
|
||||
|
||||
const save = async () => {
|
||||
if (!label.trim()) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
if (editing) {
|
||||
await feedbackCategories.update(editing.key, {
|
||||
label: label.trim(),
|
||||
description: description.trim(),
|
||||
archived: !!editing.archived_at,
|
||||
});
|
||||
toast.success("Category saved");
|
||||
} else {
|
||||
await feedbackCategories.create(label.trim(), description.trim());
|
||||
toast.success("Category added to the form");
|
||||
}
|
||||
onSaved();
|
||||
} catch (err) {
|
||||
toast.error(errMsg(err, "Could not save the category"));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={target !== null}
|
||||
onClose={onClose}
|
||||
title={editing ? "Edit category" : "New category"}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<label className="block space-y-1.5">
|
||||
<span className="text-sm font-medium">Name</span>
|
||||
<Input
|
||||
value={label}
|
||||
onChange={(e) => setLabel(e.target.value)}
|
||||
maxLength={60}
|
||||
placeholder="e.g. Audio & playback"
|
||||
/>
|
||||
</label>
|
||||
<label className="block space-y-1.5">
|
||||
<span className="text-sm font-medium">Description</span>
|
||||
<Input
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
maxLength={200}
|
||||
placeholder="Shown under the choice on the form (optional)"
|
||||
/>
|
||||
</label>
|
||||
{editing && (editing.usage_count ?? 0) > 0 && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{editing.usage_count} past{" "}
|
||||
{editing.usage_count === 1 ? "submission" : "submissions"} will
|
||||
show the new name.
|
||||
</p>
|
||||
)}
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="ghost" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={() => void save()} disabled={busy || !label.trim()}>
|
||||
{busy ? "Saving…" : editing ? "Save" : "Add category"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { Tags } from "lucide-react";
|
||||
import { Can } from "@/components/staff-context";
|
||||
import { toast } from "sonner";
|
||||
import { api, AdminError, type AdminFeedback } from "@/lib/api";
|
||||
@@ -70,21 +72,29 @@ export default function FeedbackPage() {
|
||||
total={list.total}
|
||||
list={list}
|
||||
toolbar={
|
||||
<div className="flex gap-1 rounded-lg border border-border bg-card p-1">
|
||||
{STATUSES.map((s) => (
|
||||
<button
|
||||
key={s}
|
||||
onClick={() => setStatus(s)}
|
||||
className={cn(
|
||||
"rounded-md px-3 py-1.5 text-sm capitalize transition-colors",
|
||||
status === s
|
||||
? "bg-accent text-accent-foreground font-medium"
|
||||
: "text-muted-foreground hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
{s}
|
||||
</button>
|
||||
))}
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Link href="/feedback/categories">
|
||||
<Button variant="outline" size="sm">
|
||||
<Tags className="size-4" />
|
||||
Categories
|
||||
</Button>
|
||||
</Link>
|
||||
<div className="flex gap-1 rounded-lg border border-border bg-card p-1">
|
||||
{STATUSES.map((s) => (
|
||||
<button
|
||||
key={s}
|
||||
onClick={() => setStatus(s)}
|
||||
className={cn(
|
||||
"rounded-md px-3 py-1.5 text-sm capitalize transition-colors",
|
||||
status === s
|
||||
? "bg-accent text-accent-foreground font-medium"
|
||||
: "text-muted-foreground hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
{s}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
@@ -122,7 +132,7 @@ export default function FeedbackPage() {
|
||||
</TD>
|
||||
<TD className="max-w-md">
|
||||
<div className="text-xs uppercase tracking-wide text-muted-foreground">
|
||||
{f.category}
|
||||
{f.category_label || f.category}
|
||||
</div>
|
||||
<div className="mt-0.5 whitespace-pre-line">{f.message}</div>
|
||||
{f.reply_message ? (
|
||||
@@ -246,7 +256,7 @@ function ReplyModal({
|
||||
{feedback ? (
|
||||
<div className="rounded-md bg-muted px-3 py-2 text-sm">
|
||||
<div className="text-xs uppercase tracking-wide text-muted-foreground">
|
||||
{feedback.category}
|
||||
{feedback.category_label || feedback.category}
|
||||
</div>
|
||||
<div className="mt-0.5 whitespace-pre-line">{feedback.message}</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user