asepharyana
d54aa7e2c2
CI / lint + typecheck + test + build (push) Canceled after 0s
- Auth: middleware.ts guards /protected via better-auth session cookie; protected page reads session server-side (auth.api.getSession) - Demo wiring (app/demo + components/demo): react-markdown + remark-gfm + shiki CodeBlock, RHF+zod form with react-query mutation + sonner toast, react-table items list (legacy API, table v9), /api/items GET+POST (zod v4 coercion, schema in lib/items.ts shared with unit tests) - Error UX: app/error.tsx (retry + digest), not-found.tsx (404), loading.tsx - Env: lib/env.ts zod-validated (no import-time throw), .env.example sync (NEXT_PUBLIC_BETTER_AUTH_URL), auth-client uses env - Tooling: @vitest/coverage-v8 (test:coverage works), tsconfig cleanup (drop .next/dev/dev/types artifact), README rewrite, demo e2e specs
99 lines
2.8 KiB
TypeScript
99 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { flexRender } from "@tanstack/react-table";
|
|
import {
|
|
legacyCreateColumnHelper as createColumnHelper,
|
|
getCoreRowModel,
|
|
useLegacyTable,
|
|
type LegacyColumnDef,
|
|
} from "@tanstack/react-table/legacy";
|
|
import { format } from "date-fns";
|
|
import type { Item } from "@/lib/items";
|
|
|
|
const columnHelper = createColumnHelper<Item>();
|
|
|
|
const columns = [
|
|
columnHelper.accessor("name", {
|
|
header: "Name",
|
|
}),
|
|
columnHelper.accessor("quantity", {
|
|
header: "Qty",
|
|
}),
|
|
columnHelper.accessor("createdAt", {
|
|
header: "Created",
|
|
cell: (info) => format(new Date(info.getValue<string>()), "MMM d, HH:mm"),
|
|
}),
|
|
] as LegacyColumnDef<Item>[];
|
|
|
|
export function ItemList() {
|
|
const { data, isLoading, isError, error, refetch } = useQuery({
|
|
queryKey: ["items"],
|
|
queryFn: async () => {
|
|
const res = await fetch("/api/items");
|
|
if (!res.ok) throw new Error("Failed to load items");
|
|
const body = await res.json();
|
|
return body.items as Item[];
|
|
},
|
|
});
|
|
|
|
const table = useLegacyTable({
|
|
data: data ?? [],
|
|
columns,
|
|
getCoreRowModel: getCoreRowModel(),
|
|
});
|
|
|
|
if (isLoading) {
|
|
return <p className="text-sm text-muted-foreground">Loading items…</p>;
|
|
}
|
|
|
|
if (isError) {
|
|
return (
|
|
<div className="flex items-center gap-3 text-sm text-destructive">
|
|
<span>{error.message}</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => refetch()}
|
|
className="rounded-md border px-2 py-1 hover:bg-muted"
|
|
>
|
|
Retry
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="overflow-hidden rounded-lg border">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-muted/50 text-left">
|
|
{table.getHeaderGroups().map((headerGroup) => (
|
|
<tr key={headerGroup.id}>
|
|
{headerGroup.headers.map((header) => (
|
|
<th key={header.id} className="px-4 py-2 font-medium">
|
|
{header.isPlaceholder
|
|
? null
|
|
: flexRender(header.column.columnDef.header, header.getContext())}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</thead>
|
|
<tbody>
|
|
{table.getRowModel().rows.map((row) => (
|
|
<tr key={row.id} className="border-t hover:bg-muted/30">
|
|
{row.getVisibleCells().map((cell) => (
|
|
<td key={cell.id} className="px-4 py-2">
|
|
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
{data?.length === 0 ? (
|
|
<p className="px-4 py-3 text-sm text-muted-foreground">No items yet.</p>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|