ershisan99/www
1
0
Fork 0
mirror of https://github.com/ershisan99/www.git synced 2026-02-01 12:35:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

new page for transcripts

Browse Source
This commit is contained in:
Andres
2025-07-06 00:12:48 +02:00
parent 033fcca06b
commit 520691d315
2 changed files with 50 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/(home)/players/[id]/_components/games-table.tsx
View File

@@ -307,7 +307,7 @@ export function GamesTable({ games }: { games: SelectGames[] }) {
: 'Game Transcript'} : 'Game Transcript'}
</DialogTitle> </DialogTitle>
{transcriptGameNumber && ( {transcriptGameNumber && (
<Button variant='outline' size='sm' asChild> <Button variant='outline' size='sm' asChild className={'mr-10'}>
<Link <Link
href={`/transcript/${transcriptGameNumber}`} href={`/transcript/${transcriptGameNumber}`}
target='_blank' target='_blank'

110
src/app/transcript/[gameNumber]/page.tsx
View File

@@ -1,64 +1,52 @@
'use client' import { api } from '@/trpc/server'
import type { Metadata } from 'next'
import { api } from '@/trpc/react' type Props = {
import { useParams } from 'next/navigation' params: {
import { useEffect, useState } from 'react' gameNumber: string
}
export default function TranscriptPage() { }
const params = useParams()
const gameNumber = Number.parseInt(params.gameNumber as string, 10) export async function generateMetadata({ params }: Props): Promise<Metadata> {
const [error, setError] = useState<string | null>(null) const gameNumber = Number.parseInt(params.gameNumber, 10)
return {
// Use the tRPC useQuery hook to fetch the transcript title: `Game Transcript #${gameNumber}`,
const { data: transcriptContent, isLoading } = }
api.history.getTranscript.useQuery( }
{ gameNumber },
{ export default async function TranscriptPage({ params }: Props) {
// Don't refetch on window focus const gameNumber = Number.parseInt(params.gameNumber, 10)
refetchOnWindowFocus: false,
onError: (err) => { try {
setError(`Failed to load transcript: ${err.message}`) // Fetch transcript data server-side
}, const transcriptContent = await api.history.getTranscript({
} gameNumber,
) })
// Use useEffect to set the document title if (!transcriptContent) {
useEffect(() => { return (
document.title = `Game Transcript #${gameNumber}` <div className='flex h-screen w-screen items-center justify-center'>
}, [gameNumber]) <p>Failed to load transcript. Please try again.</p>
</div>
if (isLoading) { )
return ( }
<div className='flex h-screen w-screen items-center justify-center'>
<div className='text-center'> // Return the transcript content directly as HTML
<div className='mb-2 h-6 w-6 animate-spin rounded-full border-gray-900 border-t-2 border-b-2'></div> return (
<p>Loading transcript...</p> <div
</div> className='transcript-container'
</div> dangerouslySetInnerHTML={{
) __html: transcriptContent.replace('calc(100% - 126px)', 'auto'),
}}
/>
)
} catch (error) {
return (
<div className='flex h-screen w-screen items-center justify-center'>
<p className='text-red-500'>
Failed to load transcript: {(error as Error).message}
</p>
</div>
)
} }
if (error) {
return (
<div className='flex h-screen w-screen items-center justify-center'>
<p className='text-red-500'>{error}</p>
</div>
)
}
if (!transcriptContent) {
return (
<div className='flex h-screen w-screen items-center justify-center'>
<p>Failed to load transcript. Please try again.</p>
</div>
)
}
// Return the transcript content directly as HTML
return (
<div
className='transcript-container'
dangerouslySetInnerHTML={{ __html: transcriptContent }}
/>
)
} }