456d9398a1
* Load bets and comments tabs data on user page independently * Implement basic pagination on profile comments list * Tweak server auth to return `null` instead of `undefined` * Switch to SSR for user page * Fix lint * Fix broken contract fetching in user bets list * Tidying
113 lines
3.6 KiB
TypeScript
113 lines
3.6 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import { Dictionary, keyBy, uniq } from 'lodash'
|
|
|
|
import { Comment } from 'common/comment'
|
|
import { Contract } from 'common/contract'
|
|
import { filterDefined, groupConsecutive } from 'common/util/array'
|
|
import { contractPath } from 'web/lib/firebase/contracts'
|
|
import { getUsersComments } from 'web/lib/firebase/comments'
|
|
import { getContractFromId } from 'web/lib/firebase/contracts'
|
|
import { SiteLink } from './site-link'
|
|
import { Row } from './layout/row'
|
|
import { Avatar } from './avatar'
|
|
import { RelativeTimestamp } from './relative-timestamp'
|
|
import { UserLink } from './user-page'
|
|
import { User } from 'common/user'
|
|
import { Col } from './layout/col'
|
|
import { Content } from './editor'
|
|
import { Pagination } from './pagination'
|
|
import { LoadingIndicator } from './loading-indicator'
|
|
|
|
const COMMENTS_PER_PAGE = 50
|
|
|
|
type ContractComment = Comment & { contractId: string }
|
|
|
|
export function UserCommentsList(props: { user: User }) {
|
|
const { user } = props
|
|
const [comments, setComments] = useState<ContractComment[] | undefined>()
|
|
const [contracts, setContracts] = useState<Dictionary<Contract> | undefined>()
|
|
const [page, setPage] = useState(0)
|
|
const start = page * COMMENTS_PER_PAGE
|
|
const end = start + COMMENTS_PER_PAGE
|
|
|
|
useEffect(() => {
|
|
getUsersComments(user.id).then((cs) => {
|
|
// we don't show comments in groups here atm, just comments on contracts
|
|
setComments(cs.filter((c) => c.contractId) as ContractComment[])
|
|
})
|
|
}, [user.id])
|
|
|
|
useEffect(() => {
|
|
if (comments) {
|
|
const contractIds = uniq(comments.map((c) => c.contractId))
|
|
Promise.all(contractIds.map(getContractFromId)).then((contracts) => {
|
|
setContracts(keyBy(filterDefined(contracts), 'id'))
|
|
})
|
|
}
|
|
}, [comments])
|
|
|
|
if (comments == null || contracts == null) {
|
|
return <LoadingIndicator />
|
|
}
|
|
|
|
const pageComments = groupConsecutive(
|
|
comments.slice(start, end),
|
|
(c) => c.contractId
|
|
)
|
|
return (
|
|
<Col className={'bg-white'}>
|
|
{pageComments.map(({ key, items }, i) => {
|
|
const contract = contracts[key]
|
|
return (
|
|
<div key={start + i} className="border-b p-5">
|
|
<SiteLink
|
|
className="mb-2 block pb-2 font-medium text-indigo-700"
|
|
href={contractPath(contract)}
|
|
>
|
|
{contract.question}
|
|
</SiteLink>
|
|
<Col className="gap-6">
|
|
{items.map((comment) => (
|
|
<ProfileComment
|
|
key={comment.id}
|
|
comment={comment}
|
|
className="relative flex items-start space-x-3"
|
|
/>
|
|
))}
|
|
</Col>
|
|
</div>
|
|
)
|
|
})}
|
|
<Pagination
|
|
page={page}
|
|
itemsPerPage={COMMENTS_PER_PAGE}
|
|
totalItems={comments.length}
|
|
setPage={setPage}
|
|
/>
|
|
</Col>
|
|
)
|
|
}
|
|
|
|
function ProfileComment(props: { comment: Comment; className?: string }) {
|
|
const { comment, className } = props
|
|
const { text, content, userUsername, userName, userAvatarUrl, createdTime } =
|
|
comment
|
|
// TODO: find and attach relevant bets by comment betId at some point
|
|
return (
|
|
<Row className={className}>
|
|
<Avatar username={userUsername} avatarUrl={userAvatarUrl} />
|
|
<div className="min-w-0 flex-1">
|
|
<p className="mt-0.5 text-sm text-gray-500">
|
|
<UserLink
|
|
className="text-gray-500"
|
|
username={userUsername}
|
|
name={userName}
|
|
/>{' '}
|
|
<RelativeTimestamp time={createdTime} />
|
|
</p>
|
|
<Content content={content || text} smallImage />
|
|
</div>
|
|
</Row>
|
|
)
|
|
}
|