import { Comic } from '@prisma/client'; import { GetServerSideProps } from 'next'; import { useSession } from 'next-auth/react'; import Head from 'next/head'; import { useRouter } from 'next/router'; import { ParsedUrlQuery } from 'querystring'; import { LinkButton } from '../../../components/Button'; import CompletionBar from '../../../components/CompletionBar'; 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) { const { status } = useSession(); const router = useRouter(); return (
{`${comic.title}`}

{comic.title}

So far, a total of {completion.completePages} out of{' '} {completion.totalPages} pages have been transcribed!

); } export const getServerSideProps: GetServerSideProps = 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, }, }, }; };