131 lines
4.2 KiB
TypeScript
131 lines
4.2 KiB
TypeScript
import { Answer } from 'common/answer'
|
|
import { FreeResponseContract } from 'common/contract'
|
|
import { ContractComment } from 'common/comment'
|
|
import React, { useEffect, useState } from 'react'
|
|
import { Col } from 'web/components/layout/col'
|
|
import { Row } from 'web/components/layout/row'
|
|
import { Avatar } from 'web/components/avatar'
|
|
import { Linkify } from 'web/components/linkify'
|
|
import clsx from 'clsx'
|
|
import {
|
|
ContractCommentInput,
|
|
FeedComment,
|
|
} from 'web/components/feed/feed-comments'
|
|
import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-time'
|
|
import { useRouter } from 'next/router'
|
|
import { User } from 'common/user'
|
|
import { useEvent } from 'web/hooks/use-event'
|
|
import { CommentTipMap } from 'web/hooks/use-tip-txns'
|
|
import { UserLink } from 'web/components/user-link'
|
|
|
|
export function FeedAnswerCommentGroup(props: {
|
|
contract: FreeResponseContract
|
|
answer: Answer
|
|
answerComments: ContractComment[]
|
|
tips: CommentTipMap
|
|
}) {
|
|
const { answer, contract, answerComments, tips } = props
|
|
const { username, avatarUrl, name, text } = answer
|
|
|
|
const [replyToUser, setReplyToUser] =
|
|
useState<Pick<User, 'id' | 'username'>>()
|
|
const [showReply, setShowReply] = useState(false)
|
|
const [highlighted, setHighlighted] = useState(false)
|
|
const router = useRouter()
|
|
|
|
const answerElementId = `answer-${answer.id}`
|
|
|
|
const scrollAndOpenReplyInput = useEvent(
|
|
(comment?: ContractComment, answer?: Answer) => {
|
|
setReplyToUser(
|
|
comment
|
|
? { id: comment.userId, username: comment.userUsername }
|
|
: answer
|
|
? { id: answer.userId, username: answer.username }
|
|
: undefined
|
|
)
|
|
setShowReply(true)
|
|
}
|
|
)
|
|
|
|
useEffect(() => {
|
|
if (router.asPath.endsWith(`#${answerElementId}`)) {
|
|
setHighlighted(true)
|
|
}
|
|
}, [answerElementId, router.asPath])
|
|
|
|
return (
|
|
<Col className="relative flex-1 items-stretch gap-3">
|
|
<Row
|
|
className={clsx(
|
|
'gap-3 space-x-3 pt-4 transition-all duration-1000',
|
|
highlighted ? `-m-2 my-3 rounded bg-indigo-500/[0.2] p-2` : ''
|
|
)}
|
|
id={answerElementId}
|
|
>
|
|
<Avatar username={username} avatarUrl={avatarUrl} />
|
|
|
|
<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-2 sm:flex-row">
|
|
<span className="whitespace-pre-line text-lg">
|
|
<Linkify text={text} />
|
|
</span>
|
|
<div className="sm:hidden">
|
|
<button
|
|
className="text-xs font-bold text-gray-500 hover:underline"
|
|
onClick={() => scrollAndOpenReplyInput(undefined, answer)}
|
|
>
|
|
Reply
|
|
</button>
|
|
</div>
|
|
</Col>
|
|
<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>
|
|
<Col className="gap-3 pl-1">
|
|
{answerComments.map((comment) => (
|
|
<FeedComment
|
|
key={comment.id}
|
|
indent={true}
|
|
contract={contract}
|
|
comment={comment}
|
|
tips={tips[comment.id] ?? {}}
|
|
onReplyClick={scrollAndOpenReplyInput}
|
|
/>
|
|
))}
|
|
</Col>
|
|
{showReply && (
|
|
<div className="relative ml-7">
|
|
<span
|
|
className="absolute -left-1 -ml-[1px] mt-[1.25rem] h-2 w-0.5 rotate-90 bg-gray-200"
|
|
aria-hidden="true"
|
|
/>
|
|
<ContractCommentInput
|
|
contract={contract}
|
|
parentAnswerOutcome={answer.number.toString()}
|
|
replyToUser={replyToUser}
|
|
onSubmitComment={() => setShowReply(false)}
|
|
/>
|
|
</div>
|
|
)}
|
|
</Col>
|
|
)
|
|
}
|