manifold/web/components/feed/feed-answer-comment-group.tsx

247 lines
8.1 KiB
TypeScript
Raw Permalink Normal View History

import { Answer } from 'common/answer'
import { Bet } from 'common/bet'
import { Comment } from 'common/comment'
import { formatPercent } from 'common/util/format'
import React, { useEffect, useState } from 'react'
import { Col } from 'web/components/layout/col'
import { Modal } from 'web/components/layout/modal'
import { AnswerBetPanel } from 'web/components/answers/answer-bet-panel'
import { Row } from 'web/components/layout/row'
import { Avatar } from 'web/components/avatar'
import { UserLink } from 'web/components/user-page'
import { Linkify } from 'web/components/linkify'
import clsx from 'clsx'
import { tradingAllowed } from 'web/lib/firebase/contracts'
import { BuyButton } from 'web/components/yes-no-selector'
import {
CommentInput,
CommentRepliesList,
getMostRecentCommentableBet,
} from 'web/components/feed/feed-comments'
import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-time'
import { useRouter } from 'next/router'
import { groupBy } from 'lodash'
import { User } from 'common/user'
import { useEvent } from 'web/hooks/use-event'
2022-06-09 13:22:03 +00:00
import { getDpmOutcomeProbability } from 'common/calculate-dpm'
import { CommentTipMap } from 'web/hooks/use-tip-txns'
export function FeedAnswerCommentGroup(props: {
contract: any
user: User | undefined | null
answer: Answer
comments: Comment[]
tips: CommentTipMap
bets: Bet[]
}) {
const { answer, contract, comments, tips, bets, user } = props
const { username, avatarUrl, name, text } = answer
const [replyToUsername, setReplyToUsername] = useState('')
const [open, setOpen] = useState(false)
const [showReply, setShowReply] = useState(false)
const [inputRef, setInputRef] = useState<HTMLTextAreaElement | null>(null)
const [highlighted, setHighlighted] = useState(false)
const router = useRouter()
const answerElementId = `answer-${answer.id}`
const betsByUserId = groupBy(bets, (bet) => bet.userId)
const commentsByUserId = groupBy(comments, (comment) => comment.userId)
const commentsList = comments.filter(
(comment) => comment.answerOutcome === answer.number.toString()
)
const thisAnswerProb = getDpmOutcomeProbability(
contract.totalShares,
answer.id
)
const probPercent = formatPercent(thisAnswerProb)
const betsByCurrentUser = (user && betsByUserId[user.id]) ?? []
const commentsByCurrentUser = (user && commentsByUserId[user.id]) ?? []
const isFreeResponseContractPage = !!commentsByCurrentUser
const mostRecentCommentableBet = getMostRecentCommentableBet(
betsByCurrentUser,
commentsByCurrentUser,
user,
answer.number.toString()
)
2022-06-09 14:53:01 +00:00
const [usersMostRecentBetTimeAtLoad, setUsersMostRecentBetTimeAtLoad] =
useState<number | undefined>(
!user ? undefined : mostRecentCommentableBet?.createdTime ?? 0
)
useEffect(() => {
if (user && usersMostRecentBetTimeAtLoad === undefined)
setUsersMostRecentBetTimeAtLoad(
mostRecentCommentableBet?.createdTime ?? 0
)
}, [
mostRecentCommentableBet?.createdTime,
user,
usersMostRecentBetTimeAtLoad,
])
const scrollAndOpenReplyInput = useEvent(
(comment?: Comment, answer?: Answer) => {
setReplyToUsername(comment?.userUsername ?? answer?.username ?? '')
setShowReply(true)
inputRef?.focus()
}
)
useEffect(() => {
if (
mostRecentCommentableBet &&
2022-06-09 14:53:01 +00:00
usersMostRecentBetTimeAtLoad !== undefined &&
2022-06-09 13:22:03 +00:00
mostRecentCommentableBet.createdTime > usersMostRecentBetTimeAtLoad &&
!showReply
)
scrollAndOpenReplyInput(undefined, answer)
}, [
answer,
2022-06-09 13:22:03 +00:00
usersMostRecentBetTimeAtLoad,
mostRecentCommentableBet,
scrollAndOpenReplyInput,
showReply,
])
useEffect(() => {
// Only show one comment input for a bet at a time
if (
betsByCurrentUser.length > 1 &&
betsByCurrentUser.sort((a, b) => b.createdTime - a.createdTime)[0]
?.outcome !== answer.number.toString()
)
setShowReply(false)
// Even if we pass memoized bets this still runs on every render, which we don't want
2022-06-09 16:15:34 +00:00
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [betsByCurrentUser.length, user, answer.number])
useEffect(() => {
if (showReply && inputRef) inputRef.focus()
}, [inputRef, showReply])
useEffect(() => {
if (router.asPath.endsWith(`#${answerElementId}`)) {
setHighlighted(true)
}
2022-05-21 21:48:15 +00:00
}, [answerElementId, router.asPath])
return (
<Col className={'relative flex-1 gap-2'} key={answer.id + 'comment'}>
<Modal open={open} setOpen={setOpen}>
<AnswerBetPanel
answer={answer}
contract={contract}
closePanel={() => setOpen(false)}
className="sm:max-w-84 !rounded-md bg-white !px-8 !py-6"
isModal={true}
/>
</Modal>
<Row
className={clsx(
'my-4 flex gap-3 space-x-3 transition-all duration-1000',
highlighted ? `-m-2 my-3 rounded bg-indigo-500/[0.2] p-2` : ''
)}
id={answerElementId}
>
<div className="px-1">
<Avatar username={username} avatarUrl={avatarUrl} />
</div>
<Col className="min-w-0 flex-1 lg:gap-1">
<div className="text-sm text-gray-500">
<UserLink username={username} name={name} /> answered
<CopyLinkDateTimeComponent
prefix={contract.creatorUsername}
slug={contract.slug}
createdTime={answer.createdTime}
elementId={answerElementId}
/>
</div>
<Col className="align-items justify-between gap-4 sm:flex-row">
<span className="whitespace-pre-line text-lg">
<Linkify text={text} />
</span>
<Row className="items-center justify-center gap-4">
{isFreeResponseContractPage && (
<div className={'sm:hidden'}>
<button
className={
'text-xs font-bold text-gray-500 hover:underline'
}
onClick={() => scrollAndOpenReplyInput(undefined, answer)}
>
Reply
</button>
</div>
)}
<div className={'align-items flex w-full justify-end gap-4 '}>
<span
className={clsx(
'text-2xl',
tradingAllowed(contract) ? 'text-primary' : 'text-gray-500'
)}
>
{probPercent}
</span>
<BuyButton
className={clsx(
'btn-sm flex-initial !px-6 sm:flex',
tradingAllowed(contract) ? '' : '!hidden'
)}
onClick={() => setOpen(true)}
/>
</div>
</Row>
</Col>
{isFreeResponseContractPage && (
<div className={'justify-initial hidden sm:block'}>
<button
className={'text-xs font-bold text-gray-500 hover:underline'}
onClick={() => scrollAndOpenReplyInput(undefined, answer)}
>
Reply
</button>
</div>
)}
</Col>
</Row>
<CommentRepliesList
contract={contract}
commentsList={commentsList}
betsByUserId={betsByUserId}
smallAvatar={true}
truncate={false}
bets={bets}
tips={tips}
scrollAndOpenReplyInput={scrollAndOpenReplyInput}
treatFirstIndexEqually={true}
/>
{showReply && (
<div className={'ml-6 pt-4'}>
<span
className="absolute -ml-[1px] mt-[0.8rem] h-2 w-0.5 rotate-90 bg-gray-200"
aria-hidden="true"
/>
<CommentInput
contract={contract}
betsByCurrentUser={betsByCurrentUser}
commentsByCurrentUser={commentsByCurrentUser}
parentAnswerOutcome={answer.number.toString()}
replyToUsername={replyToUsername}
setRef={setInputRef}
onSubmitComment={() => {
setShowReply(false)
setReplyToUsername('')
}}
/>
</div>
)}
</Col>
)
}