From 3495a667ca0c160d98cd1c47bc9dfad0999bcd3f Mon Sep 17 00:00:00 2001 From: James Grugett Date: Tue, 27 Sep 2022 17:31:22 -0400 Subject: [PATCH] Date doc individual page --- web/components/site-link.tsx | 4 +- web/lib/firebase/posts.ts | 15 +++++ web/pages/date-docs/[username].tsx | 98 ++++++++++++++++++++++++++++++ web/pages/date-docs/index.tsx | 51 ++-------------- 4 files changed, 121 insertions(+), 47 deletions(-) create mode 100644 web/pages/date-docs/[username].tsx diff --git a/web/components/site-link.tsx b/web/components/site-link.tsx index f395e6a9..2b97f07d 100644 --- a/web/components/site-link.tsx +++ b/web/components/site-link.tsx @@ -6,13 +6,15 @@ export const linkClass = 'z-10 break-anywhere hover:underline hover:decoration-indigo-400 hover:decoration-2' export const SiteLink = (props: { - href: string + href: string | undefined children?: ReactNode onClick?: () => void className?: string }) => { const { href, children, onClick, className } = props + if (!href) return <>{children} + return ( ('posts') @@ -49,3 +50,17 @@ export async function getDateDocs() { const q = query(posts, where('type', '==', 'date-doc')) return getValues(q) } + +export async function getDateDoc(username: string) { + const user = await getUserByUsername(username) + if (!user) return null + + const q = query( + posts, + where('type', '==', 'date-doc'), + where('creatorId', '==', user.id) + ) + const docs = await getValues(q) + const post = docs.length === 0 ? null : docs[0] + return { post, user } +} diff --git a/web/pages/date-docs/[username].tsx b/web/pages/date-docs/[username].tsx new file mode 100644 index 00000000..1c9361ee --- /dev/null +++ b/web/pages/date-docs/[username].tsx @@ -0,0 +1,98 @@ +import { getDateDoc } from 'web/lib/firebase/posts' +import { Page } from 'web/components/page' +import dayjs from 'dayjs' + +import { DateDoc } from 'common/post' +import { Spacer } from 'web/components/layout/spacer' +import { Content } from 'web/components/editor' +import { Col } from 'web/components/layout/col' +import { Row } from 'web/components/layout/row' +import { SiteLink } from 'web/components/site-link' +import { User } from 'web/lib/firebase/users' +import { DOMAIN } from 'common/envs/constants' +import Custom404 from '../404' + +export async function getStaticProps(props: { params: { username: string } }) { + const { username } = props.params + const { user, post } = (await getDateDoc(username)) ?? { + user: null, + post: null, + } + + return { + props: { + user, + post, + }, + revalidate: 5, // regenerate after five seconds + } +} + +export async function getStaticPaths() { + return { paths: [], fallback: 'blocking' } +} + +export default function DateDocPage(props: { + user: User | null + post: DateDoc | null +}) { + const { user, post } = props + + if (!user || !post) return + + return ( + +
+ +
+ + ) +} + +export function DateDocPost(props: { + dateDoc: DateDoc + creator: User + link?: boolean +}) { + const { dateDoc, creator } = props + const { content, birthday, photoUrl, contractSlug } = dateDoc + const { name, username } = creator + + const age = dayjs().diff(birthday, 'year') + const marketUrl = `https://${DOMAIN}/${username}/${contractSlug}` + + return ( + + + + + {name} + + +
+ {name}, {age} +
+ + + + + + +
+ +
+ + ) +} diff --git a/web/pages/date-docs/index.tsx b/web/pages/date-docs/index.tsx index 2862863d..6e009aa4 100644 --- a/web/pages/date-docs/index.tsx +++ b/web/pages/date-docs/index.tsx @@ -1,19 +1,17 @@ import { Page } from 'web/components/page' import { PlusCircleIcon } from '@heroicons/react/outline' -import dayjs from 'dayjs' import { getDateDocs } from 'web/lib/firebase/posts' -import { DateDoc } from 'common/post' +import type { DateDoc } from 'common/post' import { Title } from 'web/components/title' import { Spacer } from 'web/components/layout/spacer' -import { Content } from 'web/components/editor' import { Col } from 'web/components/layout/col' import { useUser } from 'web/hooks/use-user' import { Row } from 'web/components/layout/row' import { Button } from 'web/components/button' import { SiteLink } from 'web/components/site-link' import { getUser, User } from 'web/lib/firebase/users' -import { DOMAIN } from 'common/envs/constants' +import { DateDocPost } from './[username]' export async function getStaticProps() { const dateDocs = await getDateDocs() @@ -42,7 +40,7 @@ export default function DatePage(props: { return ( -
+
{!hasDoc && ( @@ -60,10 +58,11 @@ export default function DatePage(props: { <Spacer h={6} /> <Col className="gap-4"> {dateDocs.map((dateDoc, i) => ( - <DateDoc + <DateDocPost key={dateDoc.id} dateDoc={dateDoc} creator={docCreators[i]} + link /> ))} </Col> @@ -71,43 +70,3 @@ export default function DatePage(props: { </Page> ) } - -function DateDoc(props: { dateDoc: DateDoc; creator: User }) { - const { dateDoc, creator } = props - const { content, birthday, photoUrl, contractSlug } = dateDoc - const { name, username } = creator - - const age = dayjs().diff(birthday, 'year') - const marketUrl = `https://${DOMAIN}/${username}/${contractSlug}` - - return ( - <Col className="rounded-lg bg-white px-6 py-6"> - <Col className="gap-2 self-center"> - <Row> - <img - className="w-full max-w-lg rounded-lg object-cover" - src={photoUrl} - alt={name} - /> - </Row> - <Row className="gap-4 text-2xl"> - <div> - {name}, {age} - </div> - </Row> - </Col> - <Spacer h={6} /> - <Content content={content} /> - <Spacer h={6} /> - <div className="mt-10 w-full max-w-lg self-center rounded-xl bg-gradient-to-r from-blue-200 via-purple-200 to-indigo-300 p-5"> - <iframe - height="405" - src={marketUrl} - title="" - frameBorder="0" - className="w-full rounded-xl bg-white p-10" - ></iframe> - </div> - </Col> - ) -}