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: {
- {parentComments.map((parent, idx) => (
+ {topLevelComments.map((parent, idx) => (
- {idx !== parentComments.length - 1 ? (
+ {idx !== topLevelComments.length - 1 ? (
) : null}
))}
@@ -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) => (