manifold/web/components/contract/contracts-list.tsx
Austin Chen 39870dd933
Bets on profile, again (#251)
* Revert "Revert "Show every user's bets on their profile (#170)""

This reverts commit 142206b79a.

* Fix typo

* Delete portfolio page
2022-05-18 11:52:12 -04:00

71 lines
1.8 KiB
TypeScript

import { Contract } from '../../lib/firebase/contracts'
import { User } from '../../lib/firebase/users'
import { Col } from '../layout/col'
import { SiteLink } from '../site-link'
import { ContractCard } from './contract-card'
import { ContractSearch } from '../contract-search'
import { useIsVisible } from 'web/hooks/use-is-visible'
import { useEffect, useState } from 'react'
export function ContractsGrid(props: {
contracts: Contract[]
loadMore: () => void
hasMore: boolean
showCloseTime?: boolean
}) {
const { contracts, showCloseTime, hasMore, loadMore } = props
const [elem, setElem] = useState<HTMLElement | null>(null)
const isBottomVisible = useIsVisible(elem)
useEffect(() => {
if (isBottomVisible) {
loadMore()
}
}, [isBottomVisible, hasMore, loadMore])
if (contracts.length === 0) {
return (
<p className="mx-2 text-gray-500">
No markets found. Why not{' '}
<SiteLink href="/home" className="font-bold text-gray-700">
create one?
</SiteLink>
</p>
)
}
return (
<Col className="gap-8">
<ul className="grid w-full grid-cols-1 gap-4 md:grid-cols-2">
{contracts.map((contract) => (
<ContractCard
contract={contract}
key={contract.id}
showCloseTime={showCloseTime}
/>
))}
</ul>
<div ref={setElem} className="relative -top-96 h-1" />
</Col>
)
}
export function CreatorContractsList(props: { creator: User }) {
const { creator } = props
return (
<ContractSearch
querySortOptions={{
defaultSort: 'newest',
defaultFilter: 'all',
shouldLoadFromStorage: false,
}}
additionalFilter={{
creatorId: creator.id,
}}
showCategorySelector={false}
/>
)
}