diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx index 5a9da163..2ba6cde8 100644 --- a/web/components/contract/contract-tabs.tsx +++ b/web/components/contract/contract-tabs.tsx @@ -21,13 +21,24 @@ export function ContractTabs(props: { bets.sort((bet1, bet2) => bet2.createdTime - bet1.createdTime) const userBets = user && bets.filter((bet) => bet.userId === user.id) - const activity = ( + const betActivity = ( + ) + + const commentActivity = ( + ) @@ -48,7 +59,8 @@ export function ContractTabs(props: { return ( } export type DescriptionItem = BaseActivityItem & { @@ -82,6 +80,7 @@ export type ResolveItem = BaseActivityItem & { } const DAY_IN_MS = 24 * 60 * 60 * 1000 +const ABBREVIATED_NUM_COMMENTS_OR_BETS_TO_SHOW = 3 // Group together bets that are: // - Within a day of the first in the group @@ -173,7 +172,9 @@ function groupBets( if (group.length > 0) { pushGroup() } - const abbrItems = abbreviated ? items.slice(-3) : items + const abbrItems = abbreviated + ? items.slice(-ABBREVIATED_NUM_COMMENTS_OR_BETS_TO_SHOW) + : items if (reversed) abbrItems.reverse() return abbrItems } @@ -240,7 +241,8 @@ function getAnswerGroups( reversed, }) - if (abbreviated) items = items.slice(-2) + if (abbreviated) + items = items.slice(-ABBREVIATED_NUM_COMMENTS_OR_BETS_TO_SHOW) return { id: outcome, @@ -253,6 +255,8 @@ function getAnswerGroups( }) .filter((group) => group.answer) + if (reversed) answerGroups.reverse() + return answerGroups } @@ -268,6 +272,7 @@ function groupBetsAndComments( reversed: boolean } ) { + const { smallAvatar, abbreviated, reversed } = options const commentsWithoutBets = comments .filter((comment) => !comment.betId) .map((comment) => ({ @@ -276,16 +281,16 @@ function groupBetsAndComments( contract: contract, comment, bet: undefined, - truncate: false, + truncate: abbreviated, hideOutcome: true, - smallAvatar: false, + smallAvatar, })) const groupedBets = groupBets(bets, comments, contract, userId, options) // iterate through the bets and comment activity items and add them to the items in order of comment creation time: const unorderedBetsAndComments = [...commentsWithoutBets, ...groupedBets] - const sortedBetsAndComments = _.sortBy(unorderedBetsAndComments, (item) => { + let sortedBetsAndComments = _.sortBy(unorderedBetsAndComments, (item) => { if (item.type === 'comment') { return item.comment.createdTime } else if (item.type === 'bet') { @@ -294,7 +299,13 @@ function groupBetsAndComments( return item.bets[0].createdTime } }) - return sortedBetsAndComments + + const abbrItems = abbreviated + ? sortedBetsAndComments.slice(-ABBREVIATED_NUM_COMMENTS_OR_BETS_TO_SHOW) + : sortedBetsAndComments + + if (reversed) abbrItems.reverse() + return abbrItems } export function getAllContractActivityItems( @@ -308,8 +319,7 @@ export function getAllContractActivityItems( ) { const { abbreviated } = options const { outcomeType } = contract - - const reversed = !abbreviated + const reversed = true bets = outcomeType === 'BINARY' @@ -347,12 +357,9 @@ export function getAllContractActivityItems( } ) ) - const commentsByBetId = mapCommentsByBetId(comments) items.push({ type: 'commentInput', id: 'commentInput', - bets, - commentsByBetId, contract, }) } else { @@ -374,12 +381,9 @@ export function getAllContractActivityItems( } if (outcomeType === 'BINARY') { - const commentsByBetId = mapCommentsByBetId(comments) items.push({ type: 'commentInput', id: 'commentInput', - bets, - commentsByBetId, contract, }) } @@ -412,25 +416,95 @@ export function getRecentContractActivityItems( contractPath, } - const items = - contract.outcomeType === 'FREE_RESPONSE' - ? getAnswerGroups( - contract as FullContract, - bets, - comments, - user, - { - sortByProb: false, - abbreviated: true, - reversed: false, - } - ) - : groupBetsAndComments(bets, comments, contract, user?.id, { + const items = [] + if (contract.outcomeType === 'FREE_RESPONSE') { + items.push( + ...getAnswerGroups( + contract as FullContract, + bets, + comments, + user, + { + sortByProb: false, + abbreviated: true, + reversed: true, + } + ) + ) + } else { + const onlyUsersBetsOrBetsWithComments = bets.filter((bet) => + comments.some( + (comment) => comment.betId === bet.id || bet.userId === user?.id + ) + ) + items.push( + ...groupBetsAndComments( + onlyUsersBetsOrBetsWithComments, + comments, + contract, + user?.id, + { hideOutcome: false, abbreviated: true, smallAvatar: false, - reversed: false, - }) + reversed: true, + } + ) + ) + } return [questionItem, ...items] } + +export function getSpecificContractActivityItems( + contract: Contract, + bets: Bet[], + comments: Comment[], + user: User | null | undefined, + options: { + mode: 'comments' | 'bets' + } +) { + const { mode } = options + let items = [] as ActivityItem[] + + switch (mode) { + case 'bets': + items.push( + ...groupBets(bets, comments, contract, user?.id, { + hideOutcome: false, + abbreviated: false, + smallAvatar: false, + reversed: false, + }) + ) + break + + case 'comments': + const onlyBetsWithComments = bets.filter((bet) => + comments.some((comment) => comment.betId === bet.id) + ) + items.push( + ...groupBetsAndComments( + onlyBetsWithComments, + comments, + contract, + user?.id, + { + hideOutcome: false, + abbreviated: false, + smallAvatar: false, + reversed: false, + } + ) + ) + items.push({ + type: 'commentInput', + id: 'commentInput', + contract, + }) + break + } + + return items.reverse() +} diff --git a/web/components/feed/contract-activity.tsx b/web/components/feed/contract-activity.tsx index d79b462a..f65c6716 100644 --- a/web/components/feed/contract-activity.tsx +++ b/web/components/feed/contract-activity.tsx @@ -1,5 +1,3 @@ -import _ from 'lodash' - import { Contract } from '../../lib/firebase/contracts' import { Comment } from '../../lib/firebase/comments' import { Bet } from '../../../common/bet' @@ -8,6 +6,7 @@ import { useComments } from '../../hooks/use-comments' import { getAllContractActivityItems, getRecentContractActivityItems, + getSpecificContractActivityItems, } from './activity-items' import { FeedItems } from './feed-items' import { User } from '../../../common/user' @@ -17,7 +16,7 @@ export function ContractActivity(props: { bets: Bet[] comments: Comment[] user: User | null | undefined - mode: 'only-recent' | 'abbreviated' | 'all' + mode: 'only-recent' | 'abbreviated' | 'all' | 'comments' | 'bets' contractPath?: string className?: string betRowClassName?: string @@ -39,7 +38,12 @@ export function ContractActivity(props: { ? getRecentContractActivityItems(contract, bets, comments, user, { contractPath, }) - : getAllContractActivityItems(contract, bets, comments, user, { + : mode === 'comments' || mode === 'bets' + ? getSpecificContractActivityItems(contract, bets, comments, user, { + mode, + }) + : // only used in abbreviated mode with folds/communities, all mode isn't used + getAllContractActivityItems(contract, bets, comments, user, { abbreviated: mode === 'abbreviated', }) diff --git a/web/components/feed/feed-items.tsx b/web/components/feed/feed-items.tsx index f9dc9ac7..7518c998 100644 --- a/web/components/feed/feed-items.tsx +++ b/web/components/feed/feed-items.tsx @@ -191,31 +191,12 @@ function RelativeTimestamp(props: { time: number }) { ) } -export function CommentInput(props: { - contract: Contract - commentsByBetId: Record - bets: Bet[] -}) { +export function CommentInput(props: { contract: Contract }) { // see if we can comment input on any bet: - const { contract, bets, commentsByBetId } = props - const { outcomeType } = contract + const { contract } = props const user = useUser() const [comment, setComment] = useState('') - let canCommentOnABet = false - bets.some((bet) => { - // make sure there is not already a comment with a matching bet id: - const matchingComment = commentsByBetId[bet.id] - if (matchingComment) { - return false - } - const { createdTime, userId } = bet - canCommentOnABet = canCommentOnBet(userId, createdTime, user) - return canCommentOnABet - }) - - if (canCommentOnABet) return
- async function submitComment() { if (!comment) return if (!user) { @@ -342,7 +323,7 @@ export function FeedBet(props: { }} />