open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add a "Show more..." button when there are more contracts

Browse Source
This commit is contained in:
Austin Chen 2022-04-28 18:45:26 -04:00
parent 625308c19d
commit 2e17f9f917
1 changed files with 26 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web/components/contract/contracts-list.tsx
View File

@ -25,15 +25,16 @@ export function ContractsGrid(props: {
showCloseTime?: boolean showCloseTime?: boolean
}) { }) {
const { showCloseTime } = props const { showCloseTime } = props
const PAGE_SIZE = 100
const [page, setPage] = useState(1)
const [resolvedContracts, activeContracts] = _.partition( const [resolvedContracts, activeContracts] = _.partition(
props.contracts, props.contracts,
(c) => c.isResolved (c) => c.isResolved
) )
const contracts = [...activeContracts, ...resolvedContracts].slice( const allContracts = [...activeContracts, ...resolvedContracts]
0, const showMore = allContracts.length > PAGE_SIZE * page
MAX_CONTRACTS_DISPLAYED const contracts = allContracts.slice(0, PAGE_SIZE * page)
)
if (contracts.length === 0) { if (contracts.length === 0) {
return ( return (
@ -47,6 +48,7 @@ export function ContractsGrid(props: {
} }
return ( return (
<>
<ul className="grid w-full grid-cols-1 gap-6 md:grid-cols-2"> <ul className="grid w-full grid-cols-1 gap-6 md:grid-cols-2">
{contracts.map((contract) => ( {contracts.map((contract) => (
<ContractCard <ContractCard
@ -57,6 +59,16 @@ export function ContractsGrid(props: {
/> />
))} ))}
</ul> </ul>
{/* Show a link that increases the page num when clicked */}
{showMore && (
<button
className="btn btn-link float-right normal-case"
onClick={() => setPage(page + 1)}
>
Show more...
</button>
)}
</>
) )
} }