2022-07-27 14:43:34 +00:00
|
|
|
import { Comic } from '@prisma/client';
|
|
|
|
|
import type { GetServerSideProps, NextPage } from 'next';
|
|
|
|
|
import Head from 'next/head';
|
|
|
|
|
import { LinkButton } from '../components/Button';
|
|
|
|
|
import CompletionBar from '../components/CompletionBar';
|
|
|
|
|
import { prisma } from '../src/db';
|
2022-07-19 20:32:51 +00:00
|
|
|
|
2022-07-27 14:43:34 +00:00
|
|
|
interface Props {
|
|
|
|
|
comics: {
|
|
|
|
|
comic: Comic;
|
|
|
|
|
completion: {
|
|
|
|
|
completePages: number;
|
|
|
|
|
totalPages: number;
|
|
|
|
|
};
|
|
|
|
|
}[];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const Home: NextPage<Props> = (props) => {
|
2022-07-25 17:22:59 +00:00
|
|
|
return (
|
2022-07-27 14:43:34 +00:00
|
|
|
<main className='p-4'>
|
|
|
|
|
<Head>
|
|
|
|
|
<title>Comicbox</title>
|
|
|
|
|
</Head>
|
|
|
|
|
|
|
|
|
|
<table className='border-separate border-spacing-x-2'>
|
|
|
|
|
<thead>
|
|
|
|
|
<tr className='text-left'>
|
|
|
|
|
<th>Comic</th>
|
|
|
|
|
<th>Completion</th>
|
|
|
|
|
<th>Links</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
{props.comics.map(({ comic, completion }) => {
|
|
|
|
|
return <tr key={comic.id}>
|
|
|
|
|
<td>
|
|
|
|
|
<LinkButton href={`/comic/${comic.slug}`}>
|
|
|
|
|
{comic.title}
|
|
|
|
|
</LinkButton>
|
|
|
|
|
</td>
|
|
|
|
|
<td className='w-96 flex flex-row items-center'>
|
|
|
|
|
<CompletionBar inline total={completion.totalPages} completed={completion.completePages} />
|
|
|
|
|
<span className='whitespace-nowrap pl-2'>
|
|
|
|
|
({completion.completePages}/{completion.totalPages} pages)
|
|
|
|
|
</span>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<LinkButton href={comic.url} target='_blank'>
|
|
|
|
|
{new URL(comic.url).host}
|
|
|
|
|
</LinkButton>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
})}
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
2022-07-25 17:22:59 +00:00
|
|
|
</main>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default Home;
|
2022-07-27 14:43:34 +00:00
|
|
|
|
|
|
|
|
export const getServerSideProps: GetServerSideProps<Props> = async () => {
|
|
|
|
|
const comics = await prisma.comic.findMany();
|
|
|
|
|
const comicsWithCompletions = await Promise.all(comics.map(async (comic) => {
|
|
|
|
|
const pages = await prisma.comicPage.findMany({
|
|
|
|
|
where: {
|
|
|
|
|
comicId: comic.id,
|
|
|
|
|
},
|
|
|
|
|
select: {
|
|
|
|
|
_count: {
|
|
|
|
|
select: {
|
|
|
|
|
bubbles: true,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
comic,
|
|
|
|
|
completion: {
|
|
|
|
|
totalPages: pages.length,
|
|
|
|
|
completePages: pages.filter((page) => page._count.bubbles !== 0)
|
|
|
|
|
.length,
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
props: {
|
|
|
|
|
comics: comicsWithCompletions,
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
