From 2e17f9f91786fac6dc408f4fdd8c45a48a56ff63 Mon Sep 17 00:00:00 2001 From: Austin Chen Date: Thu, 28 Apr 2022 18:45:26 -0400 Subject: [PATCH] Add a "Show more..." button when there are more contracts --- web/components/contract/contracts-list.tsx | 40 ++++++++++++++-------- 1 file changed, 26 insertions(+), 14 deletions(-) diff --git a/web/components/contract/contracts-list.tsx b/web/components/contract/contracts-list.tsx index 1850cf0b..d6bef2e7 100644 --- a/web/components/contract/contracts-list.tsx +++ b/web/components/contract/contracts-list.tsx @@ -25,15 +25,16 @@ export function ContractsGrid(props: { showCloseTime?: boolean }) { const { showCloseTime } = props + const PAGE_SIZE = 100 + const [page, setPage] = useState(1) const [resolvedContracts, activeContracts] = _.partition( props.contracts, (c) => c.isResolved ) - const contracts = [...activeContracts, ...resolvedContracts].slice( - 0, - MAX_CONTRACTS_DISPLAYED - ) + const allContracts = [...activeContracts, ...resolvedContracts] + const showMore = allContracts.length > PAGE_SIZE * page + const contracts = allContracts.slice(0, PAGE_SIZE * page) if (contracts.length === 0) { return ( @@ -47,16 +48,27 @@ export function ContractsGrid(props: { } return ( - + <> + + {/* Show a link that increases the page num when clicked */} + {showMore && ( + + )} + ) }