manifold/web/components/contract-overview.tsx
James Grugett 93287f8dc1
Answers in feed (#63)
* Compute answer group feed items

* Refactor feed code into 5 files under feed directory.

* Convert to typed ActivityItems

* Use feed "mode". Clean up cases.

* Implement feed answer groups!

* FR: Use nested comments/bets under answers for contract page. filter more items out of FR feed.

* Linkify answer text on activity feed

* Default feed excluded tags are case insensitive

* Show followed folds first

* Allow filtering your trades

* Store users's last sort in localstorage

* Use avatar of user that submitted answer and name instead of pencil icon. Spacing. Show up to 3 comments in asnwer group.

* Don't reveal market creator's bets

* Fix communites feed to be abbreviated

* Remove complicated answer group logic

Co-authored-by: Austin Chen <akrolsmir@gmail.com>
2022-03-14 15:29:32 -05:00

133 lines
3.6 KiB
TypeScript

import {
Contract,
deleteContract,
tradingAllowed,
} from '../lib/firebase/contracts'
import { Col } from './layout/col'
import { Spacer } from './layout/spacer'
import { ContractProbGraph } from './contract-prob-graph'
import router from 'next/router'
import { useUser } from '../hooks/use-user'
import { Row } from './layout/row'
import { Linkify } from './linkify'
import clsx from 'clsx'
import { ContractDetails, ResolutionOrChance } from './contract-card'
import { Bet } from '../../common/bet'
import { Comment } from '../../common/comment'
import { RevealableTagsInput, TagsInput } from './tags-input'
import BetRow from './bet-row'
import { Fold } from '../../common/fold'
import { FoldTagList } from './tags-list'
import { ContractActivity } from './feed/contract-activity'
export const ContractOverview = (props: {
contract: Contract
bets: Bet[]
comments: Comment[]
folds: Fold[]
children?: any
className?: string
}) => {
const { contract, bets, comments, folds, children, className } = props
const { question, resolution, creatorId, outcomeType } = contract
const user = useUser()
const isCreator = user?.id === creatorId
const isBinary = outcomeType === 'BINARY'
return (
<Col className={clsx('mb-6', className)}>
<Row className="justify-between gap-4 px-2">
<Col className="gap-4">
<div className="text-2xl text-indigo-700 md:text-3xl">
<Linkify text={question} />
</div>
<Row className="items-center justify-between gap-4">
{(isBinary || resolution) && (
<ResolutionOrChance
className="md:hidden"
contract={contract}
large
/>
)}
{isBinary && tradingAllowed(contract) && (
<BetRow
contract={contract}
className="md:hidden"
labelClassName="hidden"
/>
)}
</Row>
<ContractDetails contract={contract} isCreator={isCreator} />
</Col>
{(isBinary || resolution) && (
<Col className="hidden items-end justify-between md:flex">
<ResolutionOrChance
className="items-end"
contract={contract}
large
/>
</Col>
)}
</Row>
<Spacer h={4} />
{isBinary && <ContractProbGraph contract={contract} bets={bets} />}
{children}
<Row className="mt-6 hidden items-center justify-between gap-4 sm:flex">
{folds.length === 0 ? (
<TagsInput className={clsx('mx-4')} contract={contract} />
) : (
<FoldTagList folds={folds} />
)}
</Row>
<Col className="mt-6 gap-4 sm:hidden">
{folds.length === 0 ? (
<TagsInput contract={contract} />
) : (
<FoldTagList folds={folds} />
)}
</Col>
{folds.length > 0 && (
<RevealableTagsInput className="mt-4" contract={contract} />
)}
{/* Show a delete button for contracts without any trading */}
{isCreator && bets.length === 0 && (
<>
<button
className="btn btn-xs btn-error btn-outline mt-1 max-w-fit self-end"
onClick={async (e) => {
e.preventDefault()
await deleteContract(contract.id)
router.push('/markets')
}}
>
Delete
</button>
</>
)}
<Spacer h={12} />
<ContractActivity
contract={contract}
bets={bets}
comments={comments}
user={user}
mode="all"
betRowClassName="!mt-0"
/>
</Col>
)
}