Files
erika/app/form/page.tsx
T

60 lines
2.0 KiB
TypeScript

import { db } from "@/db";
import Link from "next/link";
import {
Card,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { HtmlDisplay } from "@/components/html-display";
import { getServerSession } from "next-auth";
import { authOptions } from "@/app/api/auth/[...nextauth]/route";
import { canAccessForm, getSessionDiscordId } from "@/lib/auth";
import { RealtimeRefresh } from "@/components/realtime-refresh";
export const dynamic = "force-dynamic";
export default async function FormsListingPage() {
const formsList = await db.query.forms.findMany({
where: (f, { eq }) => eq(f.isOpen, true),
orderBy: (f, { desc }) => [desc(f.createdAt)],
});
const session = await getServerSession(authOptions);
const discordId = getSessionDiscordId(session);
const visibleForms = [];
for (const form of formsList) {
if (await canAccessForm(form, discordId)) {
visibleForms.push(form);
}
}
return (
<>
<RealtimeRefresh topic="forms" />
<div className="max-w-4xl mx-auto p-4 md:p-6 space-y-6">
<h1 className="text-3xl font-bold tracking-tight">Form ทั้งหมด</h1>
{visibleForms.length === 0 ? (
<p className="text-muted-foreground">ตอนนี้ยังไม่เปิดรับสัก Form</p>
) : (
<div className="flex flex-col gap-4">
{visibleForms.map((form) => (
<Link key={form.id} href={`/form/${form.id}`}>
<Card className="hover:bg-muted/50 transition-colors h-full flex flex-col">
<CardHeader>
<CardTitle>{form.title}</CardTitle>
{form.description && (
<div className="line-clamp-3 text-sm text-muted-foreground mt-1.5">
<HtmlDisplay html={form.description} />
</div>
)}
</CardHeader>
</Card>
</Link>
))}
</div>
)}
</div>
</>
);
}