Implement basic pagination on profile comments list
This commit is contained in:
parent
374f5e6b2f
commit
512d02b74a
|
@ -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
|
||||||
|
}
|
||||||
|
|
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user