From 679871dbc570cbd59de96a626cc73ce8f15b553e Mon Sep 17 00:00:00 2001 From: James Grugett Date: Fri, 11 Mar 2022 18:48:32 -0600 Subject: [PATCH] Use feed "mode". Clean up cases. --- web/components/answers/answer-item.tsx | 3 +- web/components/contract-overview.tsx | 1 + web/components/feed/activity-feed.tsx | 34 +++++-------- web/components/feed/activity-items.ts | 21 ++++---- web/components/feed/contract-activity.tsx | 60 +++++++++-------------- web/components/feed/feed-items.tsx | 30 ++---------- web/pages/fold/[...slugs]/index.tsx | 2 +- web/pages/home.tsx | 1 + 8 files changed, 54 insertions(+), 98 deletions(-) diff --git a/web/components/answers/answer-item.tsx b/web/components/answers/answer-item.tsx index 8424c3ef..b4ac8f44 100644 --- a/web/components/answers/answer-item.tsx +++ b/web/components/answers/answer-item.tsx @@ -90,7 +90,8 @@ export function AnswerItem(props: { bets={[]} comments={[]} user={user} - outcome={answer.id} + filterToOutcome={answer.id} + mode="all" /> )} diff --git a/web/components/contract-overview.tsx b/web/components/contract-overview.tsx index c012bd9b..d5a14573 100644 --- a/web/components/contract-overview.tsx +++ b/web/components/contract-overview.tsx @@ -124,6 +124,7 @@ export const ContractOverview = (props: { bets={bets} comments={comments} user={user} + mode="all" betRowClassName="!mt-0" /> diff --git a/web/components/feed/activity-feed.tsx b/web/components/feed/activity-feed.tsx index 784f6317..92d1c5dc 100644 --- a/web/components/feed/activity-feed.tsx +++ b/web/components/feed/activity-feed.tsx @@ -8,16 +8,15 @@ import { Bet } from '../../../common/bet' import { useUser } from '../../hooks/use-user' import BetRow from '../bet-row' import { FeedQuestion } from './feed-items' -import { ContractActivity, RecentContractActivity } from './contract-activity' +import { ContractActivity } from './contract-activity' export function ActivityFeed(props: { contracts: Contract[] recentBets: Bet[] recentComments: Comment[] - loadBetAndCommentHistory?: boolean + mode: 'only-recent' | 'abbreviated' | 'all' }) { - const { contracts, recentBets, recentComments, loadBetAndCommentHistory } = - props + const { contracts, recentBets, recentComments, mode } = props const user = useUser() @@ -30,24 +29,15 @@ export function ActivityFeed(props: { return ( - loadBetAndCommentHistory ? ( - - ) : ( - - ) - } + renderContract={(contract) => ( + + )} /> ) } diff --git a/web/components/feed/activity-items.ts b/web/components/feed/activity-items.ts index 58edca9d..8380bbcd 100644 --- a/web/components/feed/activity-items.ts +++ b/web/components/feed/activity-items.ts @@ -87,7 +87,8 @@ function groupBets( comments: Comment[], windowMs: number, contract: Contract, - userId?: string + userId: string | undefined, + hideOutcome: boolean ) { const commentsMap = mapCommentsByBetId(comments) const items: ActivityItem[] = [] @@ -103,7 +104,7 @@ function groupBets( bets: [...group], id: group[0].id, contract, - hideOutcome: false, + hideOutcome, }) } group = [] @@ -118,10 +119,10 @@ function groupBets( comment, bet, contract, - showOutcomeLabel: true, + showOutcomeLabel: !hideOutcome, truncate: true, } - : { type: 'bet' as const, id: bet.id, bet, contract, hideOutcome: false } + : { type: 'bet' as const, id: bet.id, bet, contract, hideOutcome } } for (const bet of bets) { @@ -227,7 +228,9 @@ export function getAllContractActivityItems( ? [{ type: 'createanswer', id: answer.id, contract, answer }] : [{ type: 'description', id: '0', contract }] - items.push(...groupBets(bets, comments, DAY_IN_MS, contract, user?.id)) + items.push( + ...groupBets(bets, comments, DAY_IN_MS, contract, user?.id, !!outcome) + ) if (contract.closeTime && contract.closeTime <= Date.now()) { items.push({ type: 'close', id: `${contract.closeTime}`, contract }) @@ -248,12 +251,10 @@ export function getRecentContractActivityItems( bets = bets.sort((b1, b2) => b1.createdTime - b2.createdTime) comments = comments.sort((c1, c2) => c1.createdTime - c2.createdTime) - const items: ActivityItem[] = [] - items.push( - ...(contract.outcomeType === 'FREE_RESPONSE' + const items: ActivityItem[] = + contract.outcomeType === 'FREE_RESPONSE' ? getAnswerGroups(contract, bets, comments, user) - : groupBets(bets, comments, DAY_IN_MS, contract, user?.id)) - ) + : groupBets(bets, comments, DAY_IN_MS, contract, user?.id, false) // Remove all but last bet group. const betGroups = items.filter((item) => item.type === 'betgroup') diff --git a/web/components/feed/contract-activity.tsx b/web/components/feed/contract-activity.tsx index df55b17b..10690b35 100644 --- a/web/components/feed/contract-activity.tsx +++ b/web/components/feed/contract-activity.tsx @@ -1,4 +1,4 @@ -import _ from 'lodash' +import _, { update } from 'lodash' import { Contract } from '../../lib/firebase/contracts' import { Comment } from '../../lib/firebase/comments' @@ -17,24 +17,33 @@ export function ContractActivity(props: { bets: Bet[] comments: Comment[] user: User | null | undefined - outcome?: string // Which multi-category outcome to filter - abbreviated?: boolean + mode: 'only-recent' | 'abbreviated' | 'all' + filterToOutcome?: string // Which multi-category outcome to filter betRowClassName?: string }) { - const { contract, user, outcome, abbreviated, betRowClassName } = props + const { contract, user, filterToOutcome, mode, betRowClassName } = props - const comments = useComments(contract.id) ?? props.comments - const bets = useBets(contract.id) ?? props.bets + const updatedComments = + // eslint-disable-next-line react-hooks/rules-of-hooks + mode === 'only-recent' ? undefined : useComments(contract.id) + const comments = updatedComments ?? props.comments - let items = getAllContractActivityItems( - contract, - bets, - comments, - user, - outcome - ) + // eslint-disable-next-line react-hooks/rules-of-hooks + const updatedBets = mode === 'only-recent' ? undefined : useBets(contract.id) + const bets = updatedBets ?? props.bets - if (abbreviated) { + let items = + mode === 'only-recent' + ? getRecentContractActivityItems(contract, bets, comments, user) + : getAllContractActivityItems( + contract, + bets, + comments, + user, + filterToOutcome + ) + + if (mode === 'abbreviated') { items = [items[0], ...items.slice(-3)] } @@ -42,29 +51,6 @@ export function ContractActivity(props: { - ) -} - -export function RecentContractActivity(props: { - contract: Contract - bets: Bet[] - comments: Comment[] - user: User | null | undefined - betRowClassName?: string -}) { - const { contract, bets, comments, user, betRowClassName } = props - - const items = getRecentContractActivityItems(contract, bets, comments, user) - - return ( - ) diff --git a/web/components/feed/feed-items.tsx b/web/components/feed/feed-items.tsx index 82c2907f..1edd78eb 100644 --- a/web/components/feed/feed-items.tsx +++ b/web/components/feed/feed-items.tsx @@ -48,24 +48,13 @@ import { Answer } from '../../../common/answer' import { ActivityItem } from './activity-items' import { User } from '../../../common/user' -export type FeedType = - // Main homepage/fold feed, - | 'activity' - // Comments feed on a market - | 'market' - // Grouped for a multi-category outcome - | 'multi' - export function FeedItems(props: { contract: Contract items: ActivityItem[] - feedType: FeedType - outcome?: string // Which multi-category outcome to filter betRowClassName?: string }) { - const { contract, items, feedType, outcome, betRowClassName } = props + const { contract, items, betRowClassName } = props const { outcomeType } = contract - const isBinary = outcomeType === 'BINARY' return (
@@ -102,7 +91,7 @@ export function FeedItems(props: {
))} - {isBinary && tradingAllowed(contract) && ( + {outcomeType === 'BINARY' && tradingAllowed(contract) && ( )} @@ -529,8 +518,7 @@ function FeedCreateAnswer(props: { contract: Contract; answer: Answer }) { name={answer.name} username={answer.username} />{' '} - submitted answer {' '} - + submitted this answer @@ -731,15 +719,3 @@ function FeedExpand(props: { setExpanded: (expanded: boolean) => void }) { ) } - -// On 'multi' feeds, the outcome is redundant, so we hide it -function MaybeOutcomeLabel(props: { outcome: string; feedType: FeedType }) { - const { outcome, feedType } = props - return feedType === 'multi' ? null : ( - - {' '} - of - {/* TODO: Link to the correct e.g. #23 */} - - ) -} diff --git a/web/pages/fold/[...slugs]/index.tsx b/web/pages/fold/[...slugs]/index.tsx index 81226006..55e2de4c 100644 --- a/web/pages/fold/[...slugs]/index.tsx +++ b/web/pages/fold/[...slugs]/index.tsx @@ -246,7 +246,7 @@ export default function FoldPage(props: { contracts={activeContracts} recentBets={recentBets ?? []} recentComments={recentComments ?? []} - loadBetAndCommentHistory + mode="abbreviated" /> {activeContracts.length === 0 && (
diff --git a/web/pages/home.tsx b/web/pages/home.tsx index 85cd5b5f..7cf2126a 100644 --- a/web/pages/home.tsx +++ b/web/pages/home.tsx @@ -131,6 +131,7 @@ const Home = (props: { contracts={activeContracts} recentBets={recentBets} recentComments={recentComments} + mode="only-recent" /> ) : (