manifold/web/pages/date-docs/index.tsx

73 lines
2.0 KiB
TypeScript
Raw Normal View History

import { Page } from 'web/components/page'
import { PlusCircleIcon } from '@heroicons/react/outline'
import { getDateDocs } from 'web/lib/firebase/posts'
import type { DateDoc } from 'common/post'
import { Title } from 'web/components/title'
import { Spacer } from 'web/components/layout/spacer'
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 { DateDocPost } from './[username]'
export async function getStaticProps() {
const dateDocs = await getDateDocs()
const docCreators = await Promise.all(
dateDocs.map((d) => getUser(d.creatorId))
)
return {
props: {
dateDocs,
docCreators,
},
revalidate: 60, // regenerate after a minute
}
}
export default function DatePage(props: {
dateDocs: DateDoc[]
docCreators: User[]
}) {
const { dateDocs, docCreators } = props
const user = useUser()
const hasDoc = dateDocs.some((d) => d.creatorId === user?.id)
return (
<Page>
<div className="mx-auto w-full max-w-xl">
<Row className="items-center justify-between">
<Title className="!my-0 px-2 text-blue-500" text="Date docs" />
{!hasDoc && (
<SiteLink href="/date-docs/create" className="!no-underline">
<Button className="flex flex-row gap-1" color="blue">
<PlusCircleIcon
className={'h-5 w-5 flex-shrink-0 text-white'}
aria-hidden="true"
/>
New
</Button>
</SiteLink>
)}
</Row>
<Spacer h={6} />
<Col className="gap-4">
{dateDocs.map((dateDoc, i) => (
<DateDocPost
key={dateDoc.id}
dateDoc={dateDoc}
creator={docCreators[i]}
link
/>
))}
</Col>
</div>
</Page>
)
}