Use feed "mode". Clean up cases.

This commit is contained in:
James Grugett 2022-03-11 18:48:32 -06:00
parent 29e33bc0ac
commit 679871dbc5
8 changed files with 54 additions and 98 deletions

View File

@ -90,7 +90,8 @@ export function AnswerItem(props: {
bets={[]}
comments={[]}
user={user}
outcome={answer.id}
filterToOutcome={answer.id}
mode="all"
/>
)}
</Col>

View File

@ -124,6 +124,7 @@ export const ContractOverview = (props: {
bets={bets}
comments={comments}
user={user}
mode="all"
betRowClassName="!mt-0"
/>
</Col>

View File

@ -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 (
<FeedContainer
contracts={contracts}
renderContract={(contract) =>
loadBetAndCommentHistory ? (
<ContractActivity
user={user}
contract={contract}
bets={groupedBets[contract.id] ?? []}
comments={groupedComments[contract.id] ?? []}
abbreviated
/>
) : (
<RecentContractActivity
user={user}
contract={contract}
bets={groupedBets[contract.id] ?? []}
comments={groupedComments[contract.id] ?? []}
/>
)
}
renderContract={(contract) => (
<ContractActivity
user={user}
contract={contract}
bets={groupedBets[contract.id] ?? []}
comments={groupedComments[contract.id] ?? []}
mode={mode}
/>
)}
/>
)
}

View File

@ -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')

View File

@ -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: {
<FeedItems
contract={contract}
items={items}
feedType={abbreviated ? 'activity' : 'market'}
betRowClassName={betRowClassName}
outcome={outcome}
/>
)
}
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 (
<FeedItems
contract={contract}
items={items}
feedType="activity"
betRowClassName={betRowClassName}
/>
)

View File

@ -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 (
<div className="flow-root pr-2 md:pr-0">
@ -102,7 +91,7 @@ export function FeedItems(props: {
</div>
))}
</div>
{isBinary && tradingAllowed(contract) && (
{outcomeType === 'BINARY' && tradingAllowed(contract) && (
<BetRow contract={contract} className={clsx('mb-2', betRowClassName)} />
)}
</div>
@ -529,8 +518,7 @@ function FeedCreateAnswer(props: { contract: Contract; answer: Answer }) {
name={answer.name}
username={answer.username}
/>{' '}
submitted answer <OutcomeLabel outcome={answer.id} />{' '}
<Timestamp time={contract.createdTime} />
submitted this answer <Timestamp time={answer.createdTime} />
</div>
</div>
</>
@ -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 : (
<span>
{' '}
of <OutcomeLabel outcome={outcome} />
{/* TODO: Link to the correct e.g. #23 */}
</span>
)
}

View File

@ -246,7 +246,7 @@ export default function FoldPage(props: {
contracts={activeContracts}
recentBets={recentBets ?? []}
recentComments={recentComments ?? []}
loadBetAndCommentHistory
mode="abbreviated"
/>
{activeContracts.length === 0 && (
<div className="mx-2 mt-4 text-gray-500 lg:mx-0">

View File

@ -131,6 +131,7 @@ const Home = (props: {
contracts={activeContracts}
recentBets={recentBets}
recentComments={recentComments}
mode="only-recent"
/>
) : (
<LoadingIndicator className="mt-4" />