ash/comicbox
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: improve comic page

Browse source 
- hide random page links when not logged in
- add completion bar
This commit is contained in:
Ashhhleyyy 2022-07-27 15:44:11 +01:00
parent d0d070e867
commit 32b4ca94cd
Signed by: ash
GPG key ID: 83B789081A0878FB
1 changed files with 17 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
pages/comic/[comic]/index.tsx
View file

@ -1,8 +1,11 @@
import { Comic } from '@prisma/client'; import { Comic } from '@prisma/client';
import { GetServerSideProps } from 'next'; import { GetServerSideProps } from 'next';
import { useSession } from 'next-auth/react';
import Head from 'next/head'; import Head from 'next/head';
import { useRouter } from 'next/router';
import { ParsedUrlQuery } from 'querystring'; import { ParsedUrlQuery } from 'querystring';
import { LinkButton } from '../../../components/Button'; import { LinkButton } from '../../../components/Button';
import CompletionBar from '../../../components/CompletionBar';
import { prisma } from '../../../src/db'; import { prisma } from '../../../src/db';
interface Params extends ParsedUrlQuery { interface Params extends ParsedUrlQuery {
@ -18,6 +21,9 @@ interface Props {
} }
export default function ComicPage({ comic, completion }: Props) { export default function ComicPage({ comic, completion }: Props) {
const { status } = useSession();
const router = useRouter();
return ( return (
<main className='p-4'> <main className='p-4'>
<Head> <Head>
@ -30,10 +36,13 @@ export default function ComicPage({ comic, completion }: Props) {
So far, a total of {completion.completePages} out of{' '} So far, a total of {completion.completePages} out of{' '}
{completion.totalPages} pages have been transcribed! {completion.totalPages} pages have been transcribed!
</p> </p>
<div className='max-w-md'>
<CompletionBar total={completion.totalPages} completed={completion.completePages} />
</div>
</section> </section>
<nav> <nav>
<ul> {status === 'authenticated' && <ul>
<li> <li>
<LinkButton <LinkButton
href={`/comic/${comic.slug}/transcribe/random`} href={`/comic/${comic.slug}/transcribe/random`}
@ -55,7 +64,13 @@ export default function ComicPage({ comic, completion }: Props) {
Random page (incomplete) Random page (incomplete)
</LinkButton> </LinkButton>
</li> </li>
</ul> </ul>}
{status === 'loading' && <>Loading...</>}
{status === 'unauthenticated' && <>
Please <LinkButton href={`/login?return=${encodeURIComponent(router.asPath)}`}>Log in</LinkButton> to contribute.
</>}
</nav> </nav>
</main> </main>
); );