feat: quiz
This commit is contained in:
gosangam
@@ -0,0 +1,254 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
api,
|
||||
staff,
|
||||
AdminError,
|
||||
type AdminRole,
|
||||
type StaffMember,
|
||||
} from "@/lib/api";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Avatar } from "@/components/ui/avatar";
|
||||
import { Table, THead, TH, TR, TD } from "@/components/ui/table";
|
||||
import { useConfirm } from "@/components/confirm";
|
||||
|
||||
const errMsg = (err: unknown, fallback: string) =>
|
||||
err instanceof AdminError ? err.message : fallback;
|
||||
|
||||
export function StaffTab() {
|
||||
const confirm = useConfirm();
|
||||
const [members, setMembers] = useState<StaffMember[] | null>(null);
|
||||
const [roles, setRoles] = useState<AdminRole[]>([]);
|
||||
const [selfId, setSelfId] = useState<string | null>(null);
|
||||
const [handle, setHandle] = useState("");
|
||||
const [grantRole, setGrantRole] = useState("");
|
||||
const [busy, setBusy] = useState<string | null>(null);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const [m, r, me] = await Promise.all([
|
||||
staff.list(),
|
||||
staff.roles(),
|
||||
api.me(),
|
||||
]);
|
||||
setMembers(m);
|
||||
setRoles(r);
|
||||
setSelfId(me?.id ?? null);
|
||||
setGrantRole(
|
||||
(prev) =>
|
||||
prev || r.find((x) => x.key === "moderator")?.id || r[0]?.id || "",
|
||||
);
|
||||
} catch (err) {
|
||||
toast.error(errMsg(err, "Could not load staff"));
|
||||
setMembers([]);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, [load]);
|
||||
|
||||
const run = async (key: string, fn: () => Promise<unknown>, ok: string) => {
|
||||
setBusy(key);
|
||||
try {
|
||||
await fn();
|
||||
toast.success(ok);
|
||||
await load();
|
||||
} catch (err) {
|
||||
toast.error(errMsg(err, "That didn't work"));
|
||||
} finally {
|
||||
setBusy(null);
|
||||
}
|
||||
};
|
||||
|
||||
const grant = () => {
|
||||
const h = handle.trim().replace(/^@/, "");
|
||||
if (!h || !grantRole) return;
|
||||
// Only someone new to the panel gets the welcome email; granting to an
|
||||
// existing staff member just changes their role.
|
||||
const existing = members?.some((m) => m.handle === h);
|
||||
void run(
|
||||
"grant",
|
||||
() => staff.grant(h, grantRole),
|
||||
existing
|
||||
? `@${h}'s role was changed`
|
||||
: `@${h} is now staff — we've emailed them how to log in`,
|
||||
).then(() => setHandle(""));
|
||||
};
|
||||
|
||||
const block = async (m: StaffMember) => {
|
||||
const blocking = !m.blocked_at;
|
||||
if (
|
||||
blocking &&
|
||||
!(await confirm({
|
||||
title: `Block ${m.name}?`,
|
||||
message:
|
||||
"They keep their role but can't use the admin panel until you unblock them.",
|
||||
confirmLabel: "Block",
|
||||
destructive: true,
|
||||
}))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
void run(
|
||||
m.user_id,
|
||||
() => staff.setBlocked(m.user_id, blocking),
|
||||
blocking ? "Blocked" : "Unblocked",
|
||||
);
|
||||
};
|
||||
|
||||
const revoke = async (m: StaffMember) => {
|
||||
if (
|
||||
!(await confirm({
|
||||
title: `Remove ${m.name} from staff?`,
|
||||
message:
|
||||
"They lose admin access entirely. Their user account is unaffected.",
|
||||
confirmLabel: "Remove",
|
||||
destructive: true,
|
||||
}))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
void run(m.user_id, () => staff.revoke(m.user_id), "Removed from staff");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<section className="space-y-3 rounded-xl border border-border p-4">
|
||||
<h2 className="text-sm font-medium text-foreground">
|
||||
Add a staff member
|
||||
</h2>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Input
|
||||
value={handle}
|
||||
onChange={(e) => setHandle(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && grant()}
|
||||
placeholder="@handle"
|
||||
className="max-w-xs"
|
||||
/>
|
||||
<select
|
||||
value={grantRole}
|
||||
onChange={(e) => setGrantRole(e.target.value)}
|
||||
className="h-10 rounded-lg border border-input bg-card px-3 text-sm"
|
||||
>
|
||||
{roles.map((r) => (
|
||||
<option key={r.id} value={r.id}>
|
||||
{r.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<Button onClick={grant} disabled={busy === "grant" || !handle.trim()}>
|
||||
Add
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{members === null ? (
|
||||
<p className="text-sm text-muted-foreground">Loading…</p>
|
||||
) : (
|
||||
<Table>
|
||||
<THead>
|
||||
<TR>
|
||||
<TH>Person</TH>
|
||||
<TH>Role</TH>
|
||||
<TH>Status</TH>
|
||||
<TH className="text-right">Actions</TH>
|
||||
</TR>
|
||||
</THead>
|
||||
<tbody>
|
||||
{members.map((m) => {
|
||||
const self = m.user_id === selfId;
|
||||
return (
|
||||
<TR key={m.user_id}>
|
||||
<TD>
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar
|
||||
src={m.avatar_url ?? null}
|
||||
name={m.name}
|
||||
className="size-8"
|
||||
/>
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-sm font-medium text-foreground">
|
||||
{m.name}{" "}
|
||||
{self && (
|
||||
<span className="text-muted-foreground">(you)</span>
|
||||
)}
|
||||
</p>
|
||||
<p className="truncate text-xs text-muted-foreground">
|
||||
@{m.handle}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</TD>
|
||||
<TD>
|
||||
{/* Your own row is read-only: nobody changes their own
|
||||
access, so a superadmin can't demote themselves into
|
||||
a locked-out panel by accident. */}
|
||||
{self ? (
|
||||
<span className="text-sm">{m.role_name}</span>
|
||||
) : (
|
||||
<select
|
||||
value={m.role_id}
|
||||
disabled={busy === m.user_id}
|
||||
onChange={(e) =>
|
||||
void run(
|
||||
m.user_id,
|
||||
() => staff.changeRole(m.user_id, e.target.value),
|
||||
"Role changed",
|
||||
)
|
||||
}
|
||||
className="h-8 rounded-md border border-input bg-card px-2 text-xs"
|
||||
>
|
||||
{roles.map((r) => (
|
||||
<option key={r.id} value={r.id}>
|
||||
{r.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
</TD>
|
||||
<TD>
|
||||
{m.blocked_at ? (
|
||||
<span className="rounded bg-destructive/10 px-2 py-0.5 text-xs text-destructive">
|
||||
Blocked
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Active
|
||||
</span>
|
||||
)}
|
||||
</TD>
|
||||
<TD className="text-right">
|
||||
{!self && (
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={busy === m.user_id}
|
||||
onClick={() => void block(m)}
|
||||
>
|
||||
{m.blocked_at ? "Unblock" : "Block"}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
disabled={busy === m.user_id}
|
||||
onClick={() => void revoke(m)}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</TD>
|
||||
</TR>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user