From 015e3ef24c8ffd59cddf8113b903fe70c48fb1c8 Mon Sep 17 00:00:00 2001 From: ingawei Date: Tue, 11 Oct 2022 20:29:17 -0700 Subject: [PATCH] I've merged and now it's a mess --- .../feed/feed-answer-comment-group.tsx | 86 ++--------- web/components/feed/feed-comments.tsx | 140 ++++++++++-------- 2 files changed, 87 insertions(+), 139 deletions(-) diff --git a/web/components/feed/feed-answer-comment-group.tsx b/web/components/feed/feed-answer-comment-group.tsx index 8d13919e..eedc90ed 100644 --- a/web/components/feed/feed-answer-comment-group.tsx +++ b/web/components/feed/feed-answer-comment-group.tsx @@ -13,6 +13,7 @@ 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 { ReplyTo } from './feed-comments' export function CommentsAnswer(props: { answer: Answer; contract: Contract }) { const { answer, contract } = props @@ -21,15 +22,9 @@ export function CommentsAnswer(props: { answer: Answer; contract: Contract }) { const [replyTo, setReplyTo] = useState() const user = useUser() const router = useRouter() - const answerElementId = `answer-${answer.id}` const highlighted = router.asPath.endsWith(`#${answerElementId}`) const answerRef = useRef(null) - const onSubmitComment = useEvent(() => setReplyTo(undefined)) - const onReplyClick = useEvent((comment: ContractComment) => { - setReplyTo({ id: comment.id, username: comment.userUsername }) - }) - useEffect(() => { if (highlighted && answerRef.current != null) { answerRef.current.scrollIntoView(true) @@ -37,77 +32,20 @@ export function CommentsAnswer(props: { answer: Answer; contract: Contract }) { }, [highlighted]) return ( - -
+ + -
- - -
- answered - -
- - - - - -
- -
- -
- -
- -
- - {answerComments.map((comment) => ( - - ))} - - {replyTo && ( -
-
- )} +
+
{answer.text}
) } diff --git a/web/components/feed/feed-comments.tsx b/web/components/feed/feed-comments.tsx index 4419c13e..06346422 100644 --- a/web/components/feed/feed-comments.tsx +++ b/web/components/feed/feed-comments.tsx @@ -6,8 +6,6 @@ import clsx from 'clsx' import { ContractComment } from 'common/comment' import { AnyContractType, Contract } from 'common/contract' -import React, { useEffect, useRef, useState } from 'react' -import { Contract } from 'common/contract' import { useUser } from 'web/hooks/use-user' import { formatMoney } from 'common/util/format' import { Row } from 'web/components/layout/row' @@ -49,35 +47,33 @@ export function FeedCommentThread(props: { return ( - - setSeeReplies(!seeReplies)} - onReplyClick={() => - setReplyTo({ - id: parentComment.id, - username: parentComment.userUsername, - }) - } - /> - + setSeeReplies(!seeReplies)} + onReplyClick={() => + setReplyTo({ + id: parentComment.id, + username: parentComment.userUsername, + }) + } + /> {seeReplies && threadComments.map((comment, _commentIdx) => ( - setReplyTo({ id: comment.id, username: comment.userUsername }) - } + myTip={user ? tips[comment.id]?.[user.id] : undefined} + totalTip={sum(Object.values(tips[comment.id] ?? {}))} + showTip={true} + onReplyClick={onReplyClick} /> ))} {replyTo && ( @@ -97,19 +93,24 @@ export function FeedCommentThread(props: { ) } + export function ParentFeedComment(props: { contract: Contract comment: ContractComment - tips?: CommentTips + showTip?: boolean + myTip?: number + totalTip?: number seeReplies: boolean numComments: number - onReplyClick?: () => void + onReplyClick?: (comment: ContractComment) => void onSeeReplyClick: () => void }) { const { contract, comment, - tips, + myTip, + totalTip, + showTip, onReplyClick, onSeeReplyClick, seeReplies, @@ -154,12 +155,24 @@ export function ParentFeedComment(props: { onClick={onSeeReplyClick} /> - + {onReplyClick && ( + + )} + {showTip && ( + + )} + {(contract.openCommentBounties ?? 0) > 0 && ( + + )} @@ -173,11 +186,9 @@ export const FeedComment = memo(function FeedComment(props: { showTip?: boolean myTip?: number totalTip?: number - indent?: boolean onReplyClick?: (comment: ContractComment) => void }) { - const { contract, comment, myTip, totalTip, showTip, indent, onReplyClick } = - props + const { contract, comment, myTip, totalTip, showTip, onReplyClick } = props const { text, content, @@ -233,7 +244,6 @@ export const FeedComment = memo(function FeedComment(props: { - {/* TODO: bug where if this is iFrame, it does not scroll */} ) -} - -export function CommentActions(props: { - onReplyClick?: () => void - tips?: CommentTips | undefined - comment: ContractComment - contract: Contract -}) { - const { onReplyClick, tips, comment, contract } = props - return ( - - {onReplyClick && ( - - )} - {tips && } - {(contract.openCommentBounties ?? 0) > 0 && ( - - )} - - ) }) +// export function CommentActions(props: { +// onReplyClick?: () => void +// tips?: CommentTips | undefined +// comment: ContractComment +// contract: Contract +// }) { +// const { onReplyClick, tips, comment, contract } = props +// return ( +// +// {onReplyClick && ( +// +// )} +// {tips && } +// {(contract.openCommentBounties ?? 0) > 0 && ( +// +// )} +// +// ) +// }) + function CommentStatus(props: { contract: Contract outcome: string