diff --git a/components/CompletionBar.tsx b/components/CompletionBar.tsx new file mode 100644 index 0000000..cfdbd59 --- /dev/null +++ b/components/CompletionBar.tsx @@ -0,0 +1,12 @@ +interface Props { + total: number; + completed: number; + inline?: boolean; +} + +export default function CompletionBar(props: Props) { + const progress = (props.completed / props.total) * 100; + return + + +} diff --git a/components/NavBar.tsx b/components/NavBar.tsx index 9fabd30..a934004 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -7,21 +7,32 @@ export default function NavBar() { const router = useRouter(); return ( - - {status === 'loading' && <>...>} - {status === 'unauthenticated' && ( - - Log in - - )} - {status === 'authenticated' && ( - <> - {data?.user?.name} - signOut()}>(Log out) - > - )} + + + + Comicbox + + + + + + {status === 'loading' && <>...>} + {status === 'unauthenticated' && ( + + Log in + + )} + {status === 'authenticated' && ( + <> + {data?.user?.name} + signOut()}>(Log out) + > + )} + + + ); } diff --git a/pages/index.tsx b/pages/index.tsx index da6fe68..df9367a 100755 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,11 +1,93 @@ -import type { NextPage } from 'next'; +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'; -const Home: NextPage = () => { +interface Props { + comics: { + comic: Comic; + completion: { + completePages: number; + totalPages: number; + }; + }[]; +} + +const Home: NextPage = (props) => { return ( - - Hello, World! + + + Comicbox + + + + + + Comic + Completion + Links + + + + {props.comics.map(({ comic, completion }) => { + return + + + {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, + } + } +}