Create and use new usePagination hook for paginating loading (#769)
* Create and use new `usePagination` hook for paginating loading * Fix index for new comment list code
This commit is contained in:
Marshall Polaris
GitHub
parent
9698895c22
commit
902d9e140c
|
|
@ -40,6 +40,10 @@
|
|||
"collectionGroup": "comments",
|
||||
"queryScope": "COLLECTION_GROUP",
|
||||
"fields": [
|
||||
{
|
||||
"fieldPath": "commentType",
|
||||
"order": "ASCENDING"
|
||||
},
|
||||
{
|
||||
"fieldPath": "userId",
|
||||
"order": "ASCENDING"
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
|
||||
import { Comment, ContractComment } from 'common/comment'
|
||||
import { ContractComment } from 'common/comment'
|
||||
import { groupConsecutive } from 'common/util/array'
|
||||
import { getUsersComments } from 'web/lib/firebase/comments'
|
||||
import { getUserCommentsQuery } from 'web/lib/firebase/comments'
|
||||
import { usePagination } from 'web/hooks/use-pagination'
|
||||
import { SiteLink } from './site-link'
|
||||
import { Row } from './layout/row'
|
||||
import { Avatar } from './avatar'
|
||||
|
|
@ -11,10 +10,14 @@ 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'
|
||||
import { PaginationNextPrev } from 'web/components/pagination'
|
||||
|
||||
const COMMENTS_PER_PAGE = 50
|
||||
type ContractKey = {
|
||||
contractId: string
|
||||
contractSlug: string
|
||||
contractQuestion: string
|
||||
}
|
||||
|
||||
function contractPath(slug: string) {
|
||||
// by convention this includes the contract creator username, but we don't
|
||||
|
|
@ -24,67 +27,83 @@ function contractPath(slug: string) {
|
|||
|
||||
export function UserCommentsList(props: { user: User }) {
|
||||
const { user } = props
|
||||
const [comments, setComments] = useState<ContractComment[] | 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.commentType == 'contract') as ContractComment[]
|
||||
)
|
||||
})
|
||||
}, [user.id])
|
||||
const page = usePagination({ q: getUserCommentsQuery(user.id), pageSize: 50 })
|
||||
const { isStart, isEnd, getNext, getPrev, getItems, isLoading } = page
|
||||
|
||||
if (comments == null) {
|
||||
const pageComments = groupConsecutive(getItems(), (c) => {
|
||||
return {
|
||||
contractId: c.contractId,
|
||||
contractQuestion: c.contractQuestion,
|
||||
contractSlug: c.contractSlug,
|
||||
}
|
||||
})
|
||||
|
||||
if (isLoading) {
|
||||
return <LoadingIndicator />
|
||||
}
|
||||
|
||||
const pageComments = groupConsecutive(comments.slice(start, end), (c) => {
|
||||
return { question: c.contractQuestion, slug: c.contractSlug }
|
||||
})
|
||||
if (pageComments.length === 0) {
|
||||
if (isStart && isEnd) {
|
||||
return <p>This user hasn't made any comments yet.</p>
|
||||
} else {
|
||||
// this can happen if their comment count is a multiple of page size
|
||||
return <p>No more comments to display.</p>
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Col className={'bg-white'}>
|
||||
{pageComments.map(({ key, items }, i) => {
|
||||
return (
|
||||
<div key={start + i} className="border-b p-5">
|
||||
<SiteLink
|
||||
className="mb-2 block pb-2 font-medium text-indigo-700"
|
||||
href={contractPath(key.slug)}
|
||||
>
|
||||
{key.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>
|
||||
)
|
||||
return <ProfileCommentGroup key={i} groupKey={key} items={items} />
|
||||
})}
|
||||
<Pagination
|
||||
page={page}
|
||||
itemsPerPage={COMMENTS_PER_PAGE}
|
||||
totalItems={comments.length}
|
||||
setPage={setPage}
|
||||
/>
|
||||
<nav
|
||||
className="border-t border-gray-200 px-4 py-3 sm:px-6"
|
||||
aria-label="Pagination"
|
||||
>
|
||||
<PaginationNextPrev
|
||||
prev={!isStart ? 'Previous' : null}
|
||||
next={!isEnd ? 'Next' : null}
|
||||
onClickPrev={getPrev}
|
||||
onClickNext={getNext}
|
||||
scrollToTop={true}
|
||||
/>
|
||||
</nav>
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
|
||||
function ProfileComment(props: { comment: Comment; className?: string }) {
|
||||
const { comment, className } = props
|
||||
function ProfileCommentGroup(props: {
|
||||
groupKey: ContractKey
|
||||
items: ContractComment[]
|
||||
}) {
|
||||
const { groupKey, items } = props
|
||||
const { contractSlug, contractQuestion } = groupKey
|
||||
const path = contractPath(contractSlug)
|
||||
return (
|
||||
<div className="border-b p-5">
|
||||
<SiteLink
|
||||
className="mb-2 block pb-2 font-medium text-indigo-700"
|
||||
href={path}
|
||||
>
|
||||
{contractQuestion}
|
||||
</SiteLink>
|
||||
<Col className="gap-6">
|
||||
{items.map((c) => (
|
||||
<ProfileComment key={c.id} comment={c} />
|
||||
))}
|
||||
</Col>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ProfileComment(props: { comment: ContractComment }) {
|
||||
const { comment } = 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}>
|
||||
<Row className="relative flex items-start space-x-3">
|
||||
<Avatar username={userUsername} avatarUrl={userAvatarUrl} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="mt-0.5 text-sm text-gray-500">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,40 @@
|
|||
import { ReactNode } from 'react'
|
||||
import clsx from 'clsx'
|
||||
import { Spacer } from './layout/spacer'
|
||||
import { Row } from './layout/row'
|
||||
|
||||
export function PaginationNextPrev(props: {
|
||||
className?: string
|
||||
prev?: ReactNode
|
||||
next?: ReactNode
|
||||
onClickPrev: () => void
|
||||
onClickNext: () => void
|
||||
scrollToTop?: boolean
|
||||
}) {
|
||||
const { className, prev, next, onClickPrev, onClickNext, scrollToTop } = props
|
||||
return (
|
||||
<Row className={clsx(className, 'flex-1 justify-between sm:justify-end')}>
|
||||
{prev != null && (
|
||||
<a
|
||||
href={scrollToTop ? '#' : undefined}
|
||||
className="relative inline-flex cursor-pointer select-none items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
|
||||
onClick={onClickPrev}
|
||||
>
|
||||
{prev ?? 'Previous'}
|
||||
</a>
|
||||
)}
|
||||
{next != null && (
|
||||
<a
|
||||
href={scrollToTop ? '#' : undefined}
|
||||
className="relative ml-3 inline-flex cursor-pointer select-none items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
|
||||
onClick={onClickNext}
|
||||
>
|
||||
{next ?? 'Next'}
|
||||
</a>
|
||||
)}
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
export function Pagination(props: {
|
||||
page: number
|
||||
itemsPerPage: number
|
||||
|
|
@ -44,24 +78,13 @@ export function Pagination(props: {
|
|||
of <span className="font-medium">{totalItems}</span> results
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-1 justify-between sm:justify-end">
|
||||
{page > 0 && (
|
||||
<a
|
||||
href={scrollToTop ? '#' : undefined}
|
||||
className="relative inline-flex cursor-pointer select-none items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
|
||||
onClick={() => page > 0 && setPage(page - 1)}
|
||||
>
|
||||
{prevTitle ?? 'Previous'}
|
||||
</a>
|
||||
)}
|
||||
<a
|
||||
href={scrollToTop ? '#' : undefined}
|
||||
className="relative ml-3 inline-flex cursor-pointer select-none items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
|
||||
onClick={() => page < maxPage && setPage(page + 1)}
|
||||
>
|
||||
{nextTitle ?? 'Next'}
|
||||
</a>
|
||||
</div>
|
||||
<PaginationNextPrev
|
||||
prev={page > 0 ? prevTitle ?? 'Previous' : null}
|
||||
next={page < maxPage ? nextTitle ?? 'Next' : null}
|
||||
onClickPrev={() => setPage(page - 1)}
|
||||
onClickNext={() => setPage(page + 1)}
|
||||
scrollToTop={scrollToTop}
|
||||
/>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
109
web/hooks/use-pagination.ts
Normal file
109
web/hooks/use-pagination.ts
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
// adapted from https://github.com/premshree/use-pagination-firestore
|
||||
|
||||
import { useEffect, useReducer } from 'react'
|
||||
import {
|
||||
Query,
|
||||
QuerySnapshot,
|
||||
QueryDocumentSnapshot,
|
||||
queryEqual,
|
||||
limit,
|
||||
onSnapshot,
|
||||
query,
|
||||
startAfter,
|
||||
} from 'firebase/firestore'
|
||||
|
||||
interface State<T> {
|
||||
baseQ: Query<T>
|
||||
docs: QueryDocumentSnapshot<T>[]
|
||||
pageStart: number
|
||||
pageEnd: number
|
||||
pageSize: number
|
||||
isLoading: boolean
|
||||
isComplete: boolean
|
||||
}
|
||||
|
||||
type ActionBase<K, V = void> = V extends void ? { type: K } : { type: K } & V
|
||||
|
||||
type Action<T> =
|
||||
| ActionBase<'INIT', { opts: PaginationOptions<T> }>
|
||||
| ActionBase<'LOAD', { snapshot: QuerySnapshot<T> }>
|
||||
| ActionBase<'PREV'>
|
||||
| ActionBase<'NEXT'>
|
||||
|
||||
const getReducer =
|
||||
<T>() =>
|
||||
(state: State<T>, action: Action<T>): State<T> => {
|
||||
switch (action.type) {
|
||||
case 'INIT': {
|
||||
return getInitialState(action.opts)
|
||||
}
|
||||
case 'LOAD': {
|
||||
const docs = state.docs.concat(action.snapshot.docs)
|
||||
const isComplete = action.snapshot.docs.length < state.pageSize
|
||||
return { ...state, docs, isComplete, isLoading: false }
|
||||
}
|
||||
case 'PREV': {
|
||||
const { pageStart, pageSize } = state
|
||||
const prevStart = pageStart - pageSize
|
||||
const isLoading = false
|
||||
return { ...state, isLoading, pageStart: prevStart, pageEnd: pageStart }
|
||||
}
|
||||
case 'NEXT': {
|
||||
const { docs, pageEnd, isComplete, pageSize } = state
|
||||
const nextEnd = pageEnd + pageSize
|
||||
const isLoading = !isComplete && docs.length < nextEnd
|
||||
return { ...state, isLoading, pageStart: pageEnd, pageEnd: nextEnd }
|
||||
}
|
||||
default:
|
||||
throw new Error('Invalid action.')
|
||||
}
|
||||
}
|
||||
|
||||
export type PaginationOptions<T> = { q: Query<T>; pageSize: number }
|
||||
|
||||
const getInitialState = <T>(opts: PaginationOptions<T>): State<T> => {
|
||||
return {
|
||||
baseQ: opts.q,
|
||||
docs: [],
|
||||
pageStart: 0,
|
||||
pageEnd: opts.pageSize,
|
||||
pageSize: opts.pageSize,
|
||||
isLoading: true,
|
||||
isComplete: false,
|
||||
}
|
||||
}
|
||||
|
||||
export const usePagination = <T>(opts: PaginationOptions<T>) => {
|
||||
const [state, dispatch] = useReducer(getReducer<T>(), opts, getInitialState)
|
||||
|
||||
useEffect(() => {
|
||||
// save callers the effort of ref-izing their opts by checking for
|
||||
// deep equality over here
|
||||
if (queryEqual(opts.q, state.baseQ) && opts.pageSize === state.pageSize) {
|
||||
return
|
||||
}
|
||||
dispatch({ type: 'INIT', opts })
|
||||
}, [opts, state.baseQ, state.pageSize])
|
||||
|
||||
useEffect(() => {
|
||||
if (state.isLoading) {
|
||||
const lastDoc = state.docs[state.docs.length - 1]
|
||||
const nextQ = lastDoc
|
||||
? query(state.baseQ, startAfter(lastDoc), limit(state.pageSize))
|
||||
: query(state.baseQ, limit(state.pageSize))
|
||||
return onSnapshot(nextQ, (snapshot) => {
|
||||
dispatch({ type: 'LOAD', snapshot })
|
||||
})
|
||||
}
|
||||
}, [state.isLoading, state.baseQ, state.docs, state.pageSize])
|
||||
|
||||
return {
|
||||
isLoading: state.isLoading,
|
||||
isStart: state.pageStart === 0,
|
||||
isEnd: state.isComplete && state.pageEnd >= state.docs.length,
|
||||
getPrev: () => dispatch({ type: 'PREV' }),
|
||||
getNext: () => dispatch({ type: 'NEXT' }),
|
||||
getItems: () =>
|
||||
state.docs.slice(state.pageStart, state.pageEnd).map((d) => d.data()),
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import {
|
||||
Query,
|
||||
collection,
|
||||
collectionGroup,
|
||||
doc,
|
||||
|
|
@ -148,12 +149,10 @@ export function listenForRecentComments(
|
|||
return listenForValues<Comment>(recentCommentsQuery, setComments)
|
||||
}
|
||||
|
||||
const getUsersCommentsQuery = (userId: string) =>
|
||||
export const getUserCommentsQuery = (userId: string) =>
|
||||
query(
|
||||
collectionGroup(db, 'comments'),
|
||||
where('userId', '==', userId),
|
||||
where('commentType', '==', 'contract'),
|
||||
orderBy('createdTime', 'desc')
|
||||
)
|
||||
export async function getUsersComments(userId: string) {
|
||||
return await getValues<Comment>(getUsersCommentsQuery(userId))
|
||||
}
|
||||
) as Query<ContractComment>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user