2022-07-25 17:31:20 +00:00
|
|
|
import { Comic } from '@prisma/client';
|
|
|
|
|
import { GetServerSideProps } from 'next';
|
2022-07-27 14:44:11 +00:00
|
|
|
import { useSession } from 'next-auth/react';
|
2022-07-25 17:31:20 +00:00
|
|
|
import Head from 'next/head';
|
2022-07-27 14:44:11 +00:00
|
|
|
import { useRouter } from 'next/router';
|
2022-07-25 17:31:20 +00:00
|
|
|
import { ParsedUrlQuery } from 'querystring';
|
|
|
|
|
import { LinkButton } from '../../../components/Button';
|
2022-07-27 14:44:11 +00:00
|
|
|
import CompletionBar from '../../../components/CompletionBar';
|
2022-07-25 17:31:20 +00:00
|
|
|
import { prisma } from '../../../src/db';
|
2022-07-25 17:22:59 +00:00
|
|
|
|
|
|
|
|
interface Params extends ParsedUrlQuery {
|
|
|
|
|
comic: string;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
|
comic: Comic;
|
|
|
|
|
completion: {
|
|
|
|
|
completePages: number;
|
|
|
|
|
totalPages: number;
|
2022-07-25 17:31:20 +00:00
|
|
|
};
|
2022-07-25 17:22:59 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default function ComicPage({ comic, completion }: Props) {
|
2022-07-27 14:44:11 +00:00
|
|
|
const { status } = useSession();
|
|
|
|
|
const router = useRouter();
|
|
|
|
|
|
2022-07-25 17:31:20 +00:00
|
|
|
return (
|
|
|
|
|
<main className='p-4'>
|
|
|
|
|
<Head>
|
|
|
|
|
<title>{`${comic.title}`}</title>
|
|
|
|
|
</Head>
|
|
|
|
|
<h1 className='text-4xl pb-2'>{comic.title}</h1>
|
2022-07-25 17:22:59 +00:00
|
|
|
|
2022-07-25 17:31:20 +00:00
|
|
|
<section>
|
|
|
|
|
<p>
|
|
|
|
|
So far, a total of {completion.completePages} out of{' '}
|
|
|
|
|
{completion.totalPages} pages have been transcribed!
|
|
|
|
|
</p>
|
2022-07-27 14:44:11 +00:00
|
|
|
<div className='max-w-md'>
|
2022-07-27 21:10:23 +00:00
|
|
|
<CompletionBar
|
|
|
|
|
total={completion.totalPages}
|
|
|
|
|
completed={completion.completePages}
|
|
|
|
|
/>
|
2022-07-27 14:44:11 +00:00
|
|
|
</div>
|
2022-07-25 17:31:20 +00:00
|
|
|
</section>
|
2022-07-25 17:22:59 +00:00
|
|
|
|
2022-07-25 17:31:20 +00:00
|
|
|
<nav>
|
2022-07-27 21:10:23 +00:00
|
|
|
{status === 'authenticated' && (
|
|
|
|
|
<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>
|
|
|
|
|
)}
|
2022-07-27 14:44:11 +00:00
|
|
|
|
|
|
|
|
{status === 'loading' && <>Loading...</>}
|
|
|
|
|
|
2022-07-27 21:10:23 +00:00
|
|
|
{status === 'unauthenticated' && (
|
|
|
|
|
<>
|
|
|
|
|
Please{' '}
|
|
|
|
|
<LinkButton
|
|
|
|
|
href={`/login?return=${encodeURIComponent(
|
|
|
|
|
router.asPath
|
|
|
|
|
)}`}
|
|
|
|
|
>
|
|
|
|
|
Log in
|
|
|
|
|
</LinkButton>{' '}
|
|
|
|
|
to contribute.
|
|
|
|
|
</>
|
|
|
|
|
)}
|
2022-07-25 17:31:20 +00:00
|
|
|
</nav>
|
|
|
|
|
</main>
|
|
|
|
|
);
|
2022-07-25 17:22:59 +00:00
|
|
|
}
|
|
|
|
|
|
2022-07-25 17:31:20 +00:00
|
|
|
export const getServerSideProps: GetServerSideProps<Props, Params> = async ({
|
|
|
|
|
params,
|
|
|
|
|
}) => {
|
2022-07-25 17:22:59 +00:00
|
|
|
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,
|
2022-07-25 17:31:20 +00:00
|
|
|
completePages: pages.filter((page) => page._count.bubbles !== 0)
|
|
|
|
|
.length,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
};
|
