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 { 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 {
@ -18,6 +21,9 @@ interface Props {
}
export default function ComicPage({ comic, completion }: Props) {
const { status } = useSession();
const router = useRouter();
return (
<main className='p-4'>
<Head>
@ -30,10 +36,13 @@ export default function ComicPage({ comic, completion }: Props) {
So far, a total of {completion.completePages} out of{' '}
{completion.totalPages} pages have been transcribed!
</p>
<div className='max-w-md'>
<CompletionBar total={completion.totalPages} completed={completion.completePages} />
</div>
</section>
<nav>
<ul>
{status === 'authenticated' && <ul>
<li>
<LinkButton
href={`/comic/${comic.slug}/transcribe/random`}
@ -55,7 +64,13 @@ export default function ComicPage({ comic, completion }: Props) {
Random page (incomplete)
</LinkButton>
</li>
</ul>
</ul>}
{status === 'loading' && <>Loading...</>}
{status === 'unauthenticated' && <>
Please <LinkButton href={`/login?return=${encodeURIComponent(router.asPath)}`}>Log in</LinkButton> to contribute.
</>}
</nav>
</main>
);