Comicbox

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'; interface Props { comics: { comic: Comic; completion: { completePages: number; totalPages: number; }; }[]; } const Home: NextPage = (props) => { return (

Comicbox {props.comics.map(({ comic, completion }) => { return })}

Comic	Completion	Links
{comic.title}	({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, } } }