2022-07-27 14:43:34 +00:00
|
|
|
import { Comic } from '@prisma/client';
|
2022-07-27 21:10:23 +00:00
|
|
|
import type { GetServerSideProps } from 'next';
|
2022-07-27 14:43:34 +00:00
|
|
|
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;
|
|
|
|
|
};
|
|
|
|
|
}[];
|
|
|
|
|
}
|
|
|
|
|
|
2022-07-27 21:10:23 +00:00
|
|
|
const Home = (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>
|
2022-08-01 16:18:55 +00:00
|
|
|
<th>Search</th>
|
2022-07-27 14:43:34 +00:00
|
|
|
<th>Completion</th>
|
2022-08-01 16:18:55 +00:00
|
|
|
<th>Link</th>
|
2022-07-27 14:43:34 +00:00
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
{props.comics.map(({ comic, completion }) => {
|
2022-07-27 21:10:23 +00:00
|
|
|
return (
|
|
|
|
|
<tr key={comic.id}>
|
|
|
|
|
<td>
|
|
|
|
|
<LinkButton href={`/comic/${comic.slug}`}>
|
|
|
|
|
{comic.title}
|
|
|
|
|
</LinkButton>
|
|
|
|
|
</td>
|
2022-08-01 16:18:55 +00:00
|
|
|
<td>
|
2022-08-01 16:20:29 +00:00
|
|
|
<LinkButton
|
|
|
|
|
href={`/comic/${comic.slug}/search`}
|
|
|
|
|
>
|
2022-08-01 16:18:55 +00:00
|
|
|
Search
|
|
|
|
|
</LinkButton>
|
|
|
|
|
</td>
|
2022-07-27 21:10:23 +00:00
|
|
|
<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>
|
|
|
|
|
);
|
2022-07-27 14:43:34 +00:00
|
|
|
})}
|
|
|
|
|
</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();
|
2022-07-27 21:10:23 +00:00
|
|
|
const comicsWithCompletions = await Promise.all(
|
|
|
|
|
comics.map(async (comic) => {
|
|
|
|
|
const pages = await prisma.comicPage.findMany({
|
|
|
|
|
where: {
|
|
|
|
|
comicId: comic.id,
|
|
|
|
|
},
|
|
|
|
|
select: {
|
|
|
|
|
_count: {
|
|
|
|
|
select: {
|
|
|
|
|
bubbles: true,
|
|
|
|
|
},
|
2022-07-27 14:43:34 +00:00
|
|
|
},
|
|
|
|
|
},
|
2022-07-27 21:10:23 +00:00
|
|
|
});
|
2022-07-27 14:43:34 +00:00
|
|
|
|
2022-07-27 21:10:23 +00:00
|
|
|
return {
|
|
|
|
|
comic,
|
|
|
|
|
completion: {
|
|
|
|
|
totalPages: pages.length,
|
|
|
|
|
completePages: pages.filter(
|
|
|
|
|
(page) => page._count.bubbles !== 0
|
|
|
|
|
).length,
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
})
|
|
|
|
|
);
|
2022-07-27 14:43:34 +00:00
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
props: {
|
|
|
|
|
comics: comicsWithCompletions,
|
2022-07-27 21:10:23 +00:00
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
};
|
