page.tsx
2,638 bytes
| 1 | import Link from 'next/link'; |
|---|---|
| 2 | import { auth, signIn } from '@/auth'; |
| 3 | import { HistoryList } from '@/components/history-list'; |
| 4 | import { Button } from '@/components/ui/button'; |
| 5 | import { listDebates, monthlySpendUsd } from '@/db/repositories'; |
| 6 | import { isGithubAuthConfigured } from '@/lib/env'; |
| 7 | import { formatUsd } from '@/lib/utils'; |
| 8 | |
| 9 | export const dynamic = 'force-dynamic'; |
| 10 | |
| 11 | export default async function HistoryPage() { |
| 12 | const session = await auth(); |
| 13 | const userId = session?.user?.id; |
| 14 | |
| 15 | if (!userId) { |
| 16 | return ( |
| 17 | <div className="container flex flex-col items-center gap-4 py-24 text-center"> |
| 18 | <p className="font-mono text-xs uppercase tracking-[0.22em] text-muted-foreground"> |
| 19 | past questions |
| 20 | </p> |
| 21 | <h1 className="font-display text-3xl font-semibold tracking-tight">Keep every verdict.</h1> |
| 22 | <p className="max-w-md text-sm leading-relaxed text-muted-foreground"> |
| 23 | Sign in to search, revisit, and share the questions you have put to the table. |
| 24 | </p> |
| 25 | {isGithubAuthConfigured ? ( |
| 26 | <form |
| 27 | action={async () => { |
| 28 | 'use server'; |
| 29 | await signIn('github', { redirectTo: '/history' }); |
| 30 | }} |
| 31 | > |
| 32 | <Button type="submit">Sign in with GitHub</Button> |
| 33 | </form> |
| 34 | ) : ( |
| 35 | <p className="text-xs text-muted-foreground"> |
| 36 | GitHub sign-in is not configured on this deployment. Your results are still available |
| 37 | from their direct links. |
| 38 | </p> |
| 39 | )} |
| 40 | <Button variant="outline" asChild> |
| 41 | <Link href="/debate">Ask a question anyway</Link> |
| 42 | </Button> |
| 43 | </div> |
| 44 | ); |
| 45 | } |
| 46 | |
| 47 | const [debates, spend] = await Promise.all([listDebates(userId), monthlySpendUsd(userId)]); |
| 48 | |
| 49 | return ( |
| 50 | <div className="container max-w-4xl py-12"> |
| 51 | <div className="mb-8 flex flex-wrap items-end justify-between gap-3 border-b pb-6"> |
| 52 | <div className="space-y-1.5"> |
| 53 | <p className="font-mono text-xs uppercase tracking-[0.22em] text-muted-foreground"> |
| 54 | past questions |
| 55 | </p> |
| 56 | <h1 className="font-display text-3xl font-semibold tracking-tight"> |
| 57 | {debates.length} {debates.length === 1 ? 'question' : 'questions'} |
| 58 | </h1> |
| 59 | </div> |
| 60 | <div className="text-right"> |
| 61 | <div className="font-mono text-xs uppercase tracking-[0.22em] text-muted-foreground"> |
| 62 | this month |
| 63 | </div> |
| 64 | <div className="mt-1 font-display text-2xl font-medium">{formatUsd(spend)}</div> |
| 65 | </div> |
| 66 | </div> |
| 67 | <HistoryList debates={debates} /> |
| 68 | </div> |
| 69 | ); |
| 70 | } |
| 71 | |