From c8d2e19c3e9ec88a0326e9ecd698dfd8129d3860 Mon Sep 17 00:00:00 2001 From: ingawei Date: Thu, 6 Oct 2022 17:51:58 -0700 Subject: [PATCH] made a custom component, beautiful curve thingy --- web/components/contract/contract-tabs.tsx | 43 +------ .../feed/feed-answer-comment-group.tsx | 110 +++--------------- web/public/custom-components/curve.tsx | 19 +++ 3 files changed, 35 insertions(+), 137 deletions(-) create mode 100644 web/public/custom-components/curve.tsx diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx index e07a6380..3dde15be 100644 --- a/web/components/contract/contract-tabs.tsx +++ b/web/components/contract/contract-tabs.tsx @@ -3,7 +3,7 @@ import { getOutcomeProbability } from 'common/calculate' import { Pagination } from 'web/components/pagination' import { FeedBet } from '../feed/feed-bets' import { FeedLiquidity } from '../feed/feed-liquidity' -import { FeedAnswerCommentGroup } from '../feed/feed-answer-comment-group' +import { CommentsAnswer } from '../feed/feed-answer-comment-group' import { FeedCommentThread, ContractCommentInput } from '../feed/feed-comments' import { groupBy, sortBy, sum } from 'lodash' import { Bet } from 'common/bet' @@ -157,59 +157,22 @@ const CommentsTabContent = memo(function CommentsTabContent(props: { ) if (contract.outcomeType === 'FREE_RESPONSE') { - const sortedAnswers = sortBy( - contract.answers, - (a) => -getOutcomeProbability(contract, a.id) - ) - const commentsByOutcome = groupBy( - sortedComments, - (c) => c.answerOutcome ?? c.betOutcome ?? '_' - ) - // const generalTopLevelComments = topLevelComments.filter( - // (c) => c.answerOutcome === undefined && c.betId === undefined - // ) - // console.log('answer: ', sortedAnswers) - // console.log('comments by outcome:', commentsByOutcome) return ( <> {sortRow} {topLevelComments.map((parent) => { if (parent.answerOutcome != undefined) { - const answer = sortedAnswers.find( + const answer = contract.answers.find( (answer) => answer.id === parent.answerOutcome ) if (answer === undefined) { console.error('Could not find answer that matches ID') return <> } else { - const { username, avatarUrl, name, text } = answer - const answerElementId = `answer-${answer.id}` return ( <> - -
- -
- - -
- answered - -
-
-
{text}
- -
+
diff --git a/web/components/feed/feed-answer-comment-group.tsx b/web/components/feed/feed-answer-comment-group.tsx index 2e3868bf..d923ba1b 100644 --- a/web/components/feed/feed-answer-comment-group.tsx +++ b/web/components/feed/feed-answer-comment-group.tsx @@ -1,5 +1,5 @@ import { Answer } from 'common/answer' -import { FreeResponseContract } from 'common/contract' +import { Contract, FreeResponseContract } from 'common/contract' import { ContractComment } from 'common/comment' import React, { useEffect, useRef, useState } from 'react' import { Col } from 'web/components/layout/col' @@ -20,40 +20,17 @@ import TriangleDownFillIcon from 'web/lib/icons/triangle-down-fill-icon' import { ReplyToggle } from '../comments/comments' import { ReplyIcon } from '@heroicons/react/solid' -export function FeedAnswerCommentGroup(props: { - contract: FreeResponseContract - answer: Answer - answerComments: ContractComment[] - tips: CommentTipMap -}) { - const { answer, contract, answerComments, tips } = props +export function CommentsAnswer(props: { answer: Answer; contract: Contract }) { + const { answer, contract } = props const { username, avatarUrl, name, text } = answer - - const [seeReplies, setSeeReplies] = useState(false) - - const [replyTo, setReplyTo] = useState() - const router = useRouter() const answerElementId = `answer-${answer.id}` - const highlighted = router.asPath.endsWith(`#${answerElementId}`) - const answerRef = useRef(null) - - useEffect(() => { - if (highlighted && answerRef.current != null) { - answerRef.current.scrollIntoView(true) - } - }, [highlighted]) return ( - - - - + +
+ +
+ +
answered
- {/* */} - - - - {/*
- -
*/} - {/*
*/} - - setSeeReplies(!seeReplies)} - /> -
- -
-
- -
- {seeReplies && ( - - {answerComments.map((comment) => ( - - setReplyTo({ id: comment.id, username: comment.userUsername }) - } - /> - ))} - - )} - {replyTo && ( -
-
- )} - +
+
{text}
+ +
) } diff --git a/web/public/custom-components/curve.tsx b/web/public/custom-components/curve.tsx new file mode 100644 index 00000000..62681a88 --- /dev/null +++ b/web/public/custom-components/curve.tsx @@ -0,0 +1,19 @@ +export default function Curve({ + size = 24, + color = '#B1B1C7', + strokeWidth = 2, +}) { + return ( + + + + ) +}