2022-01-21 23:21:46 +00:00
|
|
|
import _ from 'lodash'
|
2022-01-24 05:47:20 +00:00
|
|
|
import { useEffect, useState } from 'react'
|
2022-01-21 23:21:46 +00:00
|
|
|
import { Fold } from '../../common/fold'
|
2022-01-25 23:02:02 +00:00
|
|
|
import { CreateFoldButton } from '../components/create-fold-button'
|
2022-01-21 23:21:46 +00:00
|
|
|
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'
|
2022-01-24 05:47:20 +00:00
|
|
|
import { useFolds } from '../hooks/use-fold'
|
2022-01-21 23:21:46 +00:00
|
|
|
import { useUser } from '../hooks/use-user'
|
|
|
|
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))
|
|
|
|
)
|
2022-01-24 05:47:20 +00:00
|
|
|
const curatorsDict = _.fromPairs(
|
|
|
|
curators.map((curator) => [curator.id, curator])
|
|
|
|
)
|
2022-01-21 23:21:46 +00:00
|
|
|
|
|
|
|
return {
|
|
|
|
props: {
|
|
|
|
folds,
|
2022-01-24 05:47:20 +00:00
|
|
|
curatorsDict,
|
2022-01-21 23:21:46 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
revalidate: 60, // regenerate after a minute
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-01-24 05:47:20 +00:00
|
|
|
export default function Folds(props: {
|
|
|
|
folds: Fold[]
|
|
|
|
curatorsDict: _.Dictionary<User>
|
|
|
|
}) {
|
|
|
|
const [curatorsDict, setCuratorsDict] = useState(props.curatorsDict)
|
2022-01-21 23:21:46 +00:00
|
|
|
|
2022-01-24 05:47:20 +00:00
|
|
|
const folds = useFolds() ?? props.folds
|
2022-01-21 23:21:46 +00:00
|
|
|
const user = useUser()
|
|
|
|
|
2022-01-24 05:47:20 +00:00
|
|
|
useEffect(() => {
|
|
|
|
// Load User object for curator of new Folds.
|
|
|
|
const newFolds = folds.filter(({ curatorId }) => !curatorsDict[curatorId])
|
|
|
|
if (newFolds.length > 0) {
|
|
|
|
Promise.all(newFolds.map(({ curatorId }) => getUser(curatorId))).then(
|
|
|
|
(newUsers) => {
|
|
|
|
const newUsersDict = _.fromPairs(
|
|
|
|
newUsers.map((user) => [user.id, user])
|
|
|
|
)
|
|
|
|
setCuratorsDict({ ...curatorsDict, ...newUsersDict })
|
|
|
|
}
|
|
|
|
)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
2022-01-21 23:21:46 +00:00
|
|
|
return (
|
|
|
|
<Page>
|
|
|
|
<Col className="items-center">
|
|
|
|
<Col className="max-w-2xl w-full px-2 sm:px-0">
|
|
|
|
<Row className="justify-between items-center">
|
2022-01-24 22:58:51 +00:00
|
|
|
<Title text="Manifold communities: Folds" />
|
2022-01-21 23:21:46 +00:00
|
|
|
{user && <CreateFoldButton />}
|
|
|
|
</Row>
|
|
|
|
|
2022-01-24 22:58:51 +00:00
|
|
|
<div className="text-gray-500 mb-6">
|
|
|
|
Browse folds on topics that interest you.
|
|
|
|
</div>
|
|
|
|
|
2022-01-21 23:21:46 +00:00
|
|
|
<Col className="gap-4">
|
2022-01-24 05:47:20 +00:00
|
|
|
{folds.map((fold) => (
|
2022-01-25 23:02:02 +00:00
|
|
|
<Col key={fold.id} className="gap-2">
|
|
|
|
<Row className="items-center flex-wrap gap-2">
|
|
|
|
<SiteLink href={foldPath(fold)}>{fold.name}</SiteLink>
|
|
|
|
<div />
|
|
|
|
<div className="text-sm text-gray-500">12 followers</div>
|
|
|
|
<div className="text-gray-500">•</div>
|
|
|
|
<Row>
|
|
|
|
<div className="text-sm text-gray-500 mr-1">Curated by</div>
|
|
|
|
<UserLink
|
|
|
|
className="text-sm text-neutral"
|
|
|
|
name={curatorsDict[fold.curatorId]?.name ?? ''}
|
|
|
|
username={curatorsDict[fold.curatorId]?.username ?? ''}
|
|
|
|
/>
|
|
|
|
</Row>
|
2022-01-21 23:21:46 +00:00
|
|
|
</Row>
|
2022-01-25 23:02:02 +00:00
|
|
|
<div className="text-gray-500 text-sm">{fold.about}</div>
|
|
|
|
<div />
|
|
|
|
</Col>
|
2022-01-21 23:21:46 +00:00
|
|
|
))}
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
</Page>
|
|
|
|
)
|
|
|
|
}
|