diff --git a/web/components/nav-bar.tsx b/web/components/nav-bar.tsx index 0b98506e..1d4a257d 100644 --- a/web/components/nav-bar.tsx +++ b/web/components/nav-bar.tsx @@ -57,6 +57,17 @@ function NavOptions(props: { user: User | null; themeClasses: string }) { )} + + + + ) : ( <> - - - - )} diff --git a/web/lib/firebase/contracts.ts b/web/lib/firebase/contracts.ts index 326dad22..c7328326 100644 --- a/web/lib/firebase/contracts.ts +++ b/web/lib/firebase/contracts.ts @@ -24,7 +24,6 @@ import { createRNG, shuffle } from '../../../common/util/random' export type { Contract } export function contractPath(contract: Contract) { - // For now, derive username from creatorName return `/${contract.creatorUsername}/${contract.slug}` } diff --git a/web/lib/firebase/folds.ts b/web/lib/firebase/folds.ts index fd172a33..b2cfbf61 100644 --- a/web/lib/firebase/folds.ts +++ b/web/lib/firebase/folds.ts @@ -6,6 +6,14 @@ import { getValues } from './utils' const foldCollection = collection(db, 'folds') +export function foldPath(fold: Fold, subpath?: 'edit' | 'leaderboards') { + return `/fold/${fold.slug}${subpath ? `/${subpath}` : ''}` +} + +export async function listAllFolds() { + return getValues(foldCollection) +} + export async function getFoldBySlug(slug: string) { const q = query(foldCollection, where('slug', '==', slug)) const folds = await getValues(q) diff --git a/web/pages/fold/[foldSlug]/index.tsx b/web/pages/fold/[foldSlug]/index.tsx index 8bda7623..b38cd2e8 100644 --- a/web/pages/fold/[foldSlug]/index.tsx +++ b/web/pages/fold/[foldSlug]/index.tsx @@ -85,7 +85,7 @@ export default function FoldPage(props: { - <Row className="items-center mb-2"> + <Row className="items-center mb-2 flex-wrap"> {isCurator && ( <> <SiteLink className="text-sm " href={`/fold/${fold.slug}/edit`}> @@ -107,9 +107,8 @@ export default function FoldPage(props: { name={curator.name} username={curator.username} /> - <div className="ml-2 mr-2">•</div> - <TagsList tags={tags.map((tag) => `#${tag}`)} /> </Row> + <TagsList tags={tags.map((tag) => `#${tag}`)} /> <Spacer h={4} /> diff --git a/web/pages/folds.tsx b/web/pages/folds.tsx new file mode 100644 index 00000000..847d0173 --- /dev/null +++ b/web/pages/folds.tsx @@ -0,0 +1,51 @@ +import _ from 'lodash' +import { Fold } from '../../common/fold' +import { Col } from '../components/layout/col' +import { Row } from '../components/layout/row' +import { Page } from '../components/page' +import { SiteLink } from '../components/site-link' +import { Title } from '../components/title' +import { UserLink } from '../components/user-page' +import { foldPath, listAllFolds } from '../lib/firebase/folds' +import { getUser, User } from '../lib/firebase/users' + +export async function getStaticProps() { + const folds = await listAllFolds().catch((_) => []) + + const curators = await Promise.all( + folds.map((fold) => getUser(fold.curatorId)) + ) + + return { + props: { + folds, + curators, + }, + + revalidate: 60, // regenerate after a minute + } +} + +export default function Folds(props: { folds: Fold[]; curators: User[] }) { + const { folds, curators } = props + + return ( + <Page> + <Title text="Folds" /> + + <Col className="gap-4"> + {folds.map((fold, index) => ( + <Row className="items-center"> + <SiteLink href={foldPath(fold)}>{fold.name}</SiteLink> + <div className="text-sm text-gray-500 ml-4 mr-1">Curated by</div> + <UserLink + className="text-sm text-neutral" + name={curators[index].name} + username={curators[index].username} + /> + </Row> + ))} + </Col> + </Page> + ) +}