From 8017e3411099b705a9e45e77c0cfe3dea1f627db Mon Sep 17 00:00:00 2001 From: Marshall Polaris Date: Sat, 27 Aug 2022 13:30:01 -0700 Subject: [PATCH] Clean up a bunch of duplicated work in the comments list stuff --- web/components/contract/contract-tabs.tsx | 11 ++++- web/components/feed/contract-activity.tsx | 46 ++++++++---------- .../feed/feed-answer-comment-group.tsx | 27 +++++++---- web/components/feed/feed-comments.tsx | 48 +++++++++---------- 4 files changed, 70 insertions(+), 62 deletions(-) diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx index 47dcfd15..77c3df83 100644 --- a/web/components/contract/contract-tabs.tsx +++ b/web/components/contract/contract-tabs.tsx @@ -54,6 +54,13 @@ export function ContractTabs(props: { /> ) + const generalBets = outcomeType === 'FREE_RESPONSE' ? [] : visibleBets + const generalComments = comments.filter( + (comment) => + comment.answerOutcome === undefined && + (outcomeType === 'FREE_RESPONSE' ? comment.betId === undefined : true) + ) + const commentActivity = outcomeType === 'FREE_RESPONSE' ? ( <> @@ -69,8 +76,8 @@ export function ContractTabs(props: {
diff --git a/web/components/feed/contract-activity.tsx b/web/components/feed/contract-activity.tsx index 4dd5d76a..6c62cd29 100644 --- a/web/components/feed/contract-activity.tsx +++ b/web/components/feed/contract-activity.tsx @@ -10,7 +10,7 @@ import { FeedCommentThread, CommentInput } from './feed-comments' import { User } from 'common/user' import { CommentTipMap } from 'web/hooks/use-tip-txns' import { LiquidityProvision } from 'common/liquidity-provision' -import { sortBy, uniq } from 'lodash' +import { groupBy, sortBy, uniq } from 'lodash' import { Col } from 'web/components/layout/col' export function ContractBetsActivity(props: { @@ -62,47 +62,35 @@ export function ContractCommentsActivity(props: { user: User | null | undefined }) { const { bets, contract, comments, user, tips } = props - - const nonFreeResponseComments = comments.filter( - (comment) => - comment.answerOutcome === undefined && - (contract.outcomeType === 'FREE_RESPONSE' - ? comment.betId === undefined - : true) - ) - const nonFreeResponseBets = - contract.outcomeType === 'FREE_RESPONSE' ? [] : bets - - const betsByCurrentUser = nonFreeResponseBets.filter( - (bet) => bet.userId === user?.id - ) - const commentsByCurrentUser = nonFreeResponseComments.filter( - (comment) => comment.userId === user?.id - ) - - const parentComments = comments.filter((comment) => !comment.replyToCommentId) + const betsByUserId = groupBy(bets, (bet) => bet.userId) + const commentsByUserId = groupBy(comments, (c) => c.userId) + const commentsByParentId = groupBy(comments, (c) => c.replyToCommentId ?? '_') + const topLevelComments = commentsByParentId['_'] ?? [] return (
- {parentComments.map((parent, idx) => ( + {topLevelComments.map((parent, idx) => (
- {idx !== parentComments.length - 1 ? ( + {idx !== topLevelComments.length - 1 ? (
))} @@ -130,6 +118,10 @@ export function FreeResponseContractCommentsActivity(props: { }) .filter((answer) => answer != null) + const betsByUserId = groupBy(bets, (bet) => bet.userId) + const commentsByUserId = groupBy(comments, (c) => c.userId) + const commentsByOutcome = groupBy(comments, (c) => c.answerOutcome ?? '_') + return (
{answers.map((answer) => ( @@ -142,9 +134,11 @@ export function FreeResponseContractCommentsActivity(props: { contract={contract} user={user} answer={answer} - comments={comments} + answerComments={commentsByOutcome[answer.number.toString()]} tips={tips} bets={bets} + betsByUserId={betsByUserId} + commentsByUserId={commentsByUserId} />
))} diff --git a/web/components/feed/feed-answer-comment-group.tsx b/web/components/feed/feed-answer-comment-group.tsx index e57ad40d..0f30d807 100644 --- a/web/components/feed/feed-answer-comment-group.tsx +++ b/web/components/feed/feed-answer-comment-group.tsx @@ -1,5 +1,6 @@ import { Answer } from 'common/answer' import { Bet } from 'common/bet' +import { FreeResponseContract } from 'common/contract' import { ContractComment } from 'common/comment' import React, { useEffect, useState } from 'react' import { Col } from 'web/components/layout/col' @@ -15,20 +16,31 @@ import { } from 'web/components/feed/feed-comments' import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-time' import { useRouter } from 'next/router' -import { groupBy } from 'lodash' +import { Dictionary } from 'lodash' import { User } from 'common/user' import { useEvent } from 'web/hooks/use-event' import { CommentTipMap } from 'web/hooks/use-tip-txns' export function FeedAnswerCommentGroup(props: { - contract: any + contract: FreeResponseContract user: User | undefined | null answer: Answer - comments: ContractComment[] + answerComments: ContractComment[] tips: CommentTipMap bets: Bet[] + betsByUserId: Dictionary + commentsByUserId: Dictionary }) { - const { answer, contract, comments, tips, bets, user } = props + const { + answer, + contract, + answerComments, + tips, + bets, + betsByUserId, + commentsByUserId, + user, + } = props const { username, avatarUrl, name, text } = answer const [replyToUser, setReplyToUser] = @@ -38,11 +50,6 @@ export function FeedAnswerCommentGroup(props: { const router = useRouter() const answerElementId = `answer-${answer.id}` - const betsByUserId = groupBy(bets, (bet) => bet.userId) - const commentsByUserId = groupBy(comments, (comment) => comment.userId) - const commentsList = comments.filter( - (comment) => comment.answerOutcome === answer.number.toString() - ) const betsByCurrentUser = (user && betsByUserId[user.id]) ?? [] const commentsByCurrentUser = (user && commentsByUserId[user.id]) ?? [] const isFreeResponseContractPage = !!commentsByCurrentUser @@ -155,7 +162,7 @@ export function FeedAnswerCommentGroup(props: { + commentsByUserId: Dictionary }) { - const { contract, comments, bets, tips, parentComment } = props + const { + user, + contract, + threadComments, + commentsByUserId, + bets, + betsByUserId, + tips, + parentComment, + } = props const [showReply, setShowReply] = useState(false) - const [replyToUser, setReplyToUser] = useState<{ - id: string - username: string - }>() - const betsByUserId = groupBy(bets, (bet) => bet.userId) - const user = useUser() - const commentsList = comments.filter( - (comment) => - parentComment.id && comment.replyToCommentId === parentComment.id - ) - commentsList.unshift(parentComment) + const [replyTo, setReplyTo] = useState<{ id: string; username: string }>() function scrollAndOpenReplyInput(comment: ContractComment) { - setReplyToUser({ id: comment.userId, username: comment.userUsername }) + setReplyTo({ id: comment.userId, username: comment.userUsername }) setShowReply(true) } @@ -64,7 +66,7 @@ export function FeedCommentThread(props: { /> c.userId === user?.id - )} + commentsByCurrentUser={(user && commentsByUserId[user.id]) ?? []} parentCommentId={parentComment.id} - replyToUser={replyToUser} - parentAnswerOutcome={comments[0].answerOutcome} + replyToUser={replyTo} + parentAnswerOutcome={parentComment.answerOutcome} onSubmitComment={() => setShowReply(false)} /> @@ -95,7 +95,7 @@ export function FeedCommentThread(props: { export function CommentRepliesList(props: { contract: Contract - commentsList: ContractComment[] + comments: ContractComment[] betsByUserId: Dictionary tips: CommentTipMap scrollAndOpenReplyInput: (comment: ContractComment) => void @@ -105,7 +105,7 @@ export function CommentRepliesList(props: { }) { const { contract, - commentsList, + comments, betsByUserId, tips, smallAvatar, @@ -115,7 +115,7 @@ export function CommentRepliesList(props: { } = props return ( <> - {commentsList.map((comment, commentIdx) => ( + {comments.map((comment, commentIdx) => (