100 lines
2.7 KiB
TypeScript
100 lines
2.7 KiB
TypeScript
import { Comic } from '@prisma/client';
|
|
import { GetServerSideProps } from 'next';
|
|
import Head from 'next/head';
|
|
import { ParsedUrlQuery } from 'querystring';
|
|
import { LinkButton } from '../../../components/Button';
|
|
import { prisma } from '../../../src/db';
|
|
|
|
interface Params extends ParsedUrlQuery {
|
|
comic: string;
|
|
}
|
|
|
|
interface Props {
|
|
comic: Comic;
|
|
completion: {
|
|
completePages: number;
|
|
totalPages: number;
|
|
};
|
|
}
|
|
|
|
export default function ComicPage({ comic, completion }: Props) {
|
|
return (
|
|
<main className='p-4'>
|
|
<Head>
|
|
<title>{`${comic.title}`}</title>
|
|
</Head>
|
|
<h1 className='text-4xl pb-2'>{comic.title}</h1>
|
|
|
|
<section>
|
|
<p>
|
|
So far, a total of {completion.completePages} out of{' '}
|
|
{completion.totalPages} pages have been transcribed!
|
|
</p>
|
|
</section>
|
|
|
|
<nav>
|
|
<ul>
|
|
<li>
|
|
<LinkButton
|
|
href={`/comic/${comic.slug}/transcribe/random`}
|
|
>
|
|
Random page
|
|
</LinkButton>
|
|
</li>
|
|
<li>
|
|
<LinkButton
|
|
href={`/comic/${comic.slug}/transcribe/random?completed=true`}
|
|
>
|
|
Random page (complete)
|
|
</LinkButton>
|
|
</li>
|
|
<li>
|
|
<LinkButton
|
|
href={`/comic/${comic.slug}/transcribe/random?completed=false`}
|
|
>
|
|
Random page (incomplete)
|
|
</LinkButton>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
export const getServerSideProps: GetServerSideProps<Props, Params> = async ({
|
|
params,
|
|
}) => {
|
|
const { comic: comicId } = params!;
|
|
|
|
const comic = await prisma.comic.findFirst({
|
|
where: {
|
|
slug: comicId,
|
|
},
|
|
});
|
|
|
|
if (!comic) return { notFound: true };
|
|
|
|
const pages = await prisma.comicPage.findMany({
|
|
where: {
|
|
comicId: comic.id,
|
|
},
|
|
select: {
|
|
_count: {
|
|
select: {
|
|
bubbles: true,
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
return {
|
|
props: {
|
|
comic,
|
|
completion: {
|
|
totalPages: pages.length,
|
|
completePages: pages.filter((page) => page._count.bubbles !== 0)
|
|
.length,
|
|
},
|
|
},
|
|
};
|
|
};
|