import { Comic } from '@prisma/client'; import type { GetServerSideProps } from 'next'; import Head from 'next/head'; import { LinkButton } from '../components/Button'; import CompletionBar from '../components/CompletionBar'; import { prisma } from '../src/db'; interface Props { comics: { comic: Comic; completion: { completePages: number; totalPages: number; }; }[]; } const Home = (props: Props) => { return (
Comicbox {props.comics.map(({ comic, completion }) => { return ( ); })}
Comic Search Completion Link
{comic.title} Search ({completion.completePages}/ {completion.totalPages} pages) {new URL(comic.url).host}
); }; export default Home; export const getServerSideProps: GetServerSideProps = 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, }, }; };