manifold/web/components/contract/contracts-list.tsx
Ian Philips 3b3717d307
Groups (#510)
* Folds=>groups

* Show groups on user profile

* Allow group creation from /create

* Refactoring to groups

* Convert folds to groups

* Add new add to group notification

* Fix user profile tab bug

* Add groups nav and tab for my groups

* Remove bad profile pages

* remove comments

* Add group list dropdown to sidebar

* remove unused

* group cards ui

* Messages=>Comments, v2, groupDetails

* Discussion time

* Cleaning up some code

* Remove follow count

* Fix pool scoring for cpmm

* Fix imports

* Simplify rules, add GroupUser collection

* Fix group cards

* Refactor

* Refactor

* Small fixes

* Remove string

* Add api error detail handling

* Clear name field

* Componentize

* Spacing

* Undo userpage memo

* Member groups are already in my tab

* Remove active contracts reference for now

* Remove unused

* Refactoring

* Allow adding old questions to a group

* Rename

* Wording

* Throw standard v2 APIError

* Hide input for non-members, add about under title

* Multiple names to & # more

* Move comments firestore rules to appropriate subpaths

* Group membership, pool=>volume

* Cleanup, useEvent

* Raise state to parent

* Eliminate unused

* Cleaning up

* Clean code

* Revert tags input deletion

* Cleaning code

* Stylling

* Limit members to display

* Array cleanup

* Add categories back in

* Private=>closed

* Unused vars
2022-06-22 11:35:50 -05:00

93 lines
2.3 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'
import clsx from 'clsx'
export function ContractsGrid(props: {
contracts: Contract[]
loadMore: () => void
hasMore: boolean
showCloseTime?: boolean
onContractClick?: (contract: Contract) => void
overrideGridClassName?: string
hideQuickBet?: boolean
}) {
const {
contracts,
showCloseTime,
hasMore,
loadMore,
onContractClick,
overrideGridClassName,
hideQuickBet,
} = props
const [elem, setElem] = useState<HTMLElement | null>(null)
const isBottomVisible = useIsVisible(elem)
useEffect(() => {
if (isBottomVisible && hasMore) {
loadMore()
}
}, [isBottomVisible, hasMore, loadMore])
if (contracts.length === 0) {
return (
<p className="mx-2 text-gray-500">
No markets found. Why not{' '}
<SiteLink href="/create" className="font-bold text-gray-700">
create one?
</SiteLink>
</p>
)
}
return (
<Col className="gap-8">
<ul
className={clsx(
overrideGridClassName
? overrideGridClassName
: 'grid w-full grid-cols-1 gap-4 md:grid-cols-2'
)}
>
{contracts.map((contract) => (
<ContractCard
contract={contract}
key={contract.id}
showCloseTime={showCloseTime}
onClick={
onContractClick ? () => onContractClick(contract) : undefined
}
hideQuickBet={hideQuickBet}
/>
))}
</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}
/>
)
}