Implement basic pagination on profile comments list

This commit is contained in:
Marshall Polaris 2022-08-12 14:39:15 -07:00
parent 374f5e6b2f
commit 512d02b74a
2 changed files with 49 additions and 15 deletions

View File

@ -17,3 +17,22 @@ export function buildArray<T>(
return array return array
} }
export function groupConsecutive<T, U>(xs: T[], key: (x: T) => U) {
if (!xs.length) {
return []
}
const result = []
let curr = { key: key(xs[0]), items: [xs[0]] }
for (const x of xs.slice(1)) {
const k = key(x)
if (k !== curr.key) {
result.push(curr)
curr = { key: k, items: [x] }
} else {
curr.items.push(x)
}
}
result.push(curr)
return result
}

View File

@ -1,9 +1,9 @@
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { Dictionary, groupBy, keyBy } from 'lodash' import { Dictionary, groupBy, keyBy, mapValues, uniq } from 'lodash'
import { Comment } from 'common/comment' import { Comment } from 'common/comment'
import { Contract } from 'common/contract' import { Contract } from 'common/contract'
import { filterDefined } from 'common/util/array' import { filterDefined, groupConsecutive } from 'common/util/array'
import { contractPath } from 'web/lib/firebase/contracts' import { contractPath } from 'web/lib/firebase/contracts'
import { getUsersComments } from 'web/lib/firebase/comments' import { getUsersComments } from 'web/lib/firebase/comments'
import { getContractFromId } from 'web/lib/firebase/contracts' import { getContractFromId } from 'web/lib/firebase/contracts'
@ -15,29 +15,34 @@ import { UserLink } from './user-page'
import { User } from 'common/user' import { User } from 'common/user'
import { Col } from './layout/col' import { Col } from './layout/col'
import { Content } from './editor' import { Content } from './editor'
import { Pagination } from './pagination'
import { LoadingIndicator } from './loading-indicator' import { LoadingIndicator } from './loading-indicator'
const COMMENTS_PER_PAGE = 50
type ContractComment = Comment & { contractId: string }
export function UserCommentsList(props: { user: User }) { export function UserCommentsList(props: { user: User }) {
const { user } = props const { user } = props
const [comments, setComments] = useState<Dictionary<Comment[]> | undefined>() const [comments, setComments] = useState<ContractComment[] | undefined>()
const [contracts, setContracts] = useState<Dictionary<Contract> | 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(() => { useEffect(() => {
getUsersComments(user.id).then((cs) => { getUsersComments(user.id).then((cs) => {
// we don't show comments in groups here atm, just comments on contracts // we don't show comments in groups here atm, just comments on contracts
const contractComments = cs.filter((c) => c.contractId) setComments(cs.filter((c) => c.contractId) as ContractComment[])
const commentsByContractId = groupBy(contractComments, 'contractId')
setComments(commentsByContractId)
}) })
}, [user.id]) }, [user.id])
useEffect(() => { useEffect(() => {
if (comments) { if (comments) {
Promise.all(Object.keys(comments).map(getContractFromId)).then( const contractIds = uniq(comments.map((c) => c.contractId))
(contracts) => { Promise.all(contractIds.map(getContractFromId)).then((contracts) => {
setContracts(keyBy(filterDefined(contracts), 'id')) setContracts(keyBy(filterDefined(contracts), 'id'))
} })
)
} }
}, [comments]) }, [comments])
@ -45,12 +50,16 @@ export function UserCommentsList(props: { user: User }) {
return <LoadingIndicator /> return <LoadingIndicator />
} }
const pageComments = groupConsecutive(
comments.slice(start, end),
(c) => c.contractId
)
return ( return (
<Col className={'bg-white'}> <Col className={'bg-white'}>
{Object.entries(comments).map(([contractId, comments]) => { {pageComments.map(({ key, items }, i) => {
const contract = contracts[contractId] const contract = contracts[key]
return ( return (
<div key={contractId} className="border-b p-5"> <div key={i} className="border-b p-5">
<SiteLink <SiteLink
className="mb-2 block pb-2 font-medium text-indigo-700" className="mb-2 block pb-2 font-medium text-indigo-700"
href={contractPath(contract)} href={contractPath(contract)}
@ -58,7 +67,7 @@ export function UserCommentsList(props: { user: User }) {
{contract.question} {contract.question}
</SiteLink> </SiteLink>
<Col className="gap-6"> <Col className="gap-6">
{comments.map((comment) => ( {items.map((comment) => (
<ProfileComment <ProfileComment
key={comment.id} key={comment.id}
comment={comment} comment={comment}
@ -69,6 +78,12 @@ export function UserCommentsList(props: { user: User }) {
</div> </div>
) )
})} })}
<Pagination
page={page}
itemsPerPage={COMMENTS_PER_PAGE}
totalItems={comments.length}
setPage={setPage}
/>
</Col> </Col>
) )
} }