This commit is contained in:
ingawei 2022-10-11 20:37:28 -07:00
parent 015e3ef24c
commit 35367d4c83
2 changed files with 15 additions and 69 deletions

View File

@ -1,26 +1,17 @@
import { Answer } from 'common/answer' import { Answer } from 'common/answer'
import { Contract } from 'common/contract' import { Contract } from 'common/contract'
import { FreeResponseContract } from 'common/contract' import React, { useEffect, useRef } from 'react'
import { ContractComment } from 'common/comment'
import React, { useEffect, useRef, useState } from 'react'
import { sum } from 'lodash'
import { Col } from 'web/components/layout/col' import { Col } from 'web/components/layout/col'
import { Row } from 'web/components/layout/row' import { Row } from 'web/components/layout/row'
import { Avatar } from 'web/components/avatar' import { Avatar } from 'web/components/avatar'
import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-time' import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-time'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { useUser } from 'web/hooks/use-user'
import { useEvent } from 'web/hooks/use-event'
import { CommentTipMap } from 'web/hooks/use-tip-txns'
import { UserLink } from 'web/components/user-link' import { UserLink } from 'web/components/user-link'
import { ReplyTo } from './feed-comments'
export function CommentsAnswer(props: { answer: Answer; contract: Contract }) { export function CommentsAnswer(props: { answer: Answer; contract: Contract }) {
const { answer, contract } = props const { answer, contract } = props
const { username, avatarUrl, name, text } = answer const { username, avatarUrl, name, text } = answer
const answerElementId = `answer-${answer.id}` const answerElementId = `answer-${answer.id}`
const [replyTo, setReplyTo] = useState<ReplyTo>()
const user = useUser()
const router = useRouter() const router = useRouter()
const highlighted = router.asPath.endsWith(`#${answerElementId}`) const highlighted = router.asPath.endsWith(`#${answerElementId}`)
const answerRef = useRef<HTMLDivElement>(null) const answerRef = useRef<HTMLDivElement>(null)
@ -45,7 +36,7 @@ export function CommentsAnswer(props: { answer: Answer; contract: Contract }) {
/> />
</div> </div>
</Row> </Row>
<div className="text-sm">{answer.text}</div> <div className="text-sm">{text}</div>
</Col> </Col>
) )
} }

View File

@ -5,7 +5,7 @@ import { sum } from 'lodash'
import clsx from 'clsx' import clsx from 'clsx'
import { ContractComment } from 'common/comment' import { ContractComment } from 'common/comment'
import { AnyContractType, Contract } from 'common/contract' import { Contract } from 'common/contract'
import { useUser } from 'web/hooks/use-user' import { useUser } from 'web/hooks/use-user'
import { formatMoney } from 'common/util/format' import { formatMoney } from 'common/util/format'
import { Row } from 'web/components/layout/row' import { Row } from 'web/components/layout/row'
@ -154,14 +154,15 @@ export function ParentFeedComment(props: {
numComments={numComments} numComments={numComments}
onClick={onSeeReplyClick} onClick={onSeeReplyClick}
/> />
<Row className="grow justify-end"> <Row className="my-auto grow justify-end">
{onReplyClick && ( {onReplyClick && (
<button <Button
className="font-bold hover:underline" color="gray-white"
size="2xs"
onClick={() => onReplyClick(comment)} onClick={() => onReplyClick(comment)}
> >
Reply <ReplyIcon className="h-4 w-4" />
</button> </Button>
)} )}
{showTip && ( {showTip && (
<Tipper <Tipper
@ -189,27 +190,7 @@ export const FeedComment = memo(function FeedComment(props: {
onReplyClick?: (comment: ContractComment) => void onReplyClick?: (comment: ContractComment) => void
}) { }) {
const { contract, comment, myTip, totalTip, showTip, onReplyClick } = props const { contract, comment, myTip, totalTip, showTip, onReplyClick } = props
const { const { text, content, userUsername, userAvatarUrl } = comment
text,
content,
userUsername,
userName,
userAvatarUrl,
commenterPositionProb,
commenterPositionShares,
commenterPositionOutcome,
createdTime,
bountiesAwarded,
} = comment
const betOutcome = comment.betOutcome
let bought: string | undefined
let money: string | undefined
if (comment.betAmount != null) {
bought = comment.betAmount >= 0 ? 'bought' : 'sold'
money = formatMoney(Math.abs(comment.betAmount))
}
const totalAwarded = bountiesAwarded ?? 0
const { isReady, asPath } = useRouter() const { isReady, asPath } = useRouter()
const [highlighted, setHighlighted] = useState(false) const [highlighted, setHighlighted] = useState(false)
const commentRef = useRef<HTMLDivElement>(null) const commentRef = useRef<HTMLDivElement>(null)
@ -251,12 +232,13 @@ export const FeedComment = memo(function FeedComment(props: {
/> />
<Row className="justify-end"> <Row className="justify-end">
{onReplyClick && ( {onReplyClick && (
<button <Button
className="font-bold hover:underline" color="gray-white"
size="2xs"
onClick={() => onReplyClick(comment)} onClick={() => onReplyClick(comment)}
> >
Reply <ReplyIcon className="h-4 w-4" />
</button> </Button>
)} )}
{showTip && ( {showTip && (
<Tipper <Tipper
@ -274,33 +256,6 @@ export const FeedComment = memo(function FeedComment(props: {
) )
}) })
// export function CommentActions(props: {
// onReplyClick?: () => void
// tips?: CommentTips | undefined
// comment: ContractComment
// contract: Contract<AnyContractType>
// }) {
// const { onReplyClick, tips, comment, contract } = props
// return (
// <Row className={clsx('ml-2 items-center gap-2 text-xs text-gray-500')}>
// {onReplyClick && (
// <Button
// className="font-bold hover:underline"
// onClick={onReplyClick}
// size="2xs"
// color="gray-white"
// >
// <ReplyIcon className="h-5 w-5" />
// </Button>
// )}
// {tips && <Tipper comment={comment} tips={tips} />}
// {(contract.openCommentBounties ?? 0) > 0 && (
// <AwardBountyButton comment={comment} contract={contract} />
// )}
// </Row>
// )
// })
function CommentStatus(props: { function CommentStatus(props: {
contract: Contract contract: Contract
outcome: string outcome: string