From 1b1634ce8b63efcb24d3cc1f07c2d8e4ceb88119 Mon Sep 17 00:00:00 2001 From: ingawei Date: Thu, 6 Oct 2022 18:55:34 -0700 Subject: [PATCH] i don't even know --- web/components/contract/contract-tabs.tsx | 14 +- .../feed/feed-answer-comment-group.tsx | 16 +- web/components/feed/feed-comments.tsx | 153 ++++++++++++++---- 3 files changed, 131 insertions(+), 52 deletions(-) diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx index 3dde15be..18c0861c 100644 --- a/web/components/contract/contract-tabs.tsx +++ b/web/components/contract/contract-tabs.tsx @@ -4,7 +4,11 @@ import { Pagination } from 'web/components/pagination' import { FeedBet } from '../feed/feed-bets' import { FeedLiquidity } from '../feed/feed-liquidity' import { CommentsAnswer } from '../feed/feed-answer-comment-group' -import { FeedCommentThread, ContractCommentInput } from '../feed/feed-comments' +import { + FeedCommentThread, + ContractCommentInput, + CommentActions, +} from '../feed/feed-comments' import { groupBy, sortBy, sum } from 'lodash' import { Bet } from 'common/bet' import { Contract } from 'common/contract' @@ -42,7 +46,7 @@ import { Avatar } from '../avatar' import { UserLink } from '../user-link' import { CopyLinkDateTimeComponent } from '../feed/copy-link-date-time' import { Linkify } from '../linkify' -import { ArrowRightIcon } from '@heroicons/react/solid' +import { ArrowRightIcon, ReplyIcon } from '@heroicons/react/solid' import Curve from 'web/public/custom-components/curve' export function ContractTabs(props: { @@ -172,9 +176,11 @@ const CommentsTabContent = memo(function CommentsTabContent(props: { } else { return ( <> - + + + -
+
diff --git a/web/components/feed/feed-answer-comment-group.tsx b/web/components/feed/feed-answer-comment-group.tsx index d923ba1b..e83d4590 100644 --- a/web/components/feed/feed-answer-comment-group.tsx +++ b/web/components/feed/feed-answer-comment-group.tsx @@ -1,24 +1,10 @@ import { Answer } from 'common/answer' -import { Contract, FreeResponseContract } from 'common/contract' -import { ContractComment } from 'common/comment' -import React, { useEffect, useRef, useState } from 'react' +import { Contract } from 'common/contract' 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, - ReplyTo, -} from 'web/components/feed/feed-comments' import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-time' -import { useRouter } from 'next/router' -import { CommentTipMap } from 'web/hooks/use-tip-txns' import { UserLink } from 'web/components/user-link' -import TriangleDownFillIcon from 'web/lib/icons/triangle-down-fill-icon' -import { ReplyToggle } from '../comments/comments' -import { ReplyIcon } from '@heroicons/react/solid' export function CommentsAnswer(props: { answer: Answer; contract: Contract }) { const { answer, contract } = props diff --git a/web/components/feed/feed-comments.tsx b/web/components/feed/feed-comments.tsx index 0fdea8ed..ea755cd5 100644 --- a/web/components/feed/feed-comments.tsx +++ b/web/components/feed/feed-comments.tsx @@ -22,6 +22,7 @@ import { CommentInput } from '../comment-input' import { AwardBountyButton } from 'web/components/award-bounty-button' import { ReplyIcon } from '@heroicons/react/solid' import { Button } from '../button' +import { ReplyToggle } from '../comments/comments' export type ReplyTo = { id: string; username: string } @@ -33,21 +34,39 @@ export function FeedCommentThread(props: { }) { const { contract, threadComments, tips, parentComment } = props const [replyTo, setReplyTo] = useState() + const [seeReplies, setSeeReplies] = useState(false) return ( - {[parentComment].concat(threadComments).map((comment, commentIdx) => ( - + setSeeReplies(!seeReplies)} onReplyClick={() => - setReplyTo({ id: comment.id, username: comment.userUsername }) + setReplyTo({ + id: parentComment.id, + username: parentComment.userUsername, + }) } /> - ))} + + {seeReplies && + threadComments.map((comment, commentIdx) => ( + + setReplyTo({ id: comment.id, username: comment.userUsername }) + } + /> + ))} {replyTo && ( ) } - -export function FeedComment(props: { +export function ParentFeedComment(props: { contract: Contract comment: ContractComment tips?: CommentTips - indent?: boolean + seeReplies: boolean + numComments: number onReplyClick?: () => void + onSeeReplyClick: () => void }) { - const { contract, comment, tips, indent, onReplyClick } = props + const { + contract, + comment, + tips, + onReplyClick, + onSeeReplyClick, + seeReplies, + numComments, + } = props const { text, content, userUsername, userAvatarUrl } = comment const router = useRouter() @@ -93,25 +121,14 @@ export function FeedComment(props: { ref={commentRef} id={comment.id} className={clsx( - 'hover:bg-greyscale-1 gap-2 transition-colors', - indent ? 'ml-8' : '', + 'hover:bg-greyscale-1 ml-3 gap-2 transition-colors', highlighted ? `-m-1.5 rounded bg-indigo-500/[0.2] p-1.5` : '' )} onMouseOver={() => setShowActions(true)} onMouseLeave={() => setShowActions(false)} > - - - {indent && ( -