Trim activity feed (#60)

* Trim activity feed: show only items from last 24 hours, remove contract description, shorter width.

* Preserve feed ordering based on initial fetch of bets

* Add see more button, description to explore items
This commit is contained in:
James Grugett 2022-03-04 18:06:11 -06:00 committed by GitHub
parent e49b64ee9f
commit d7d8fb94c4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 238 additions and 141 deletions

View File

@ -1,9 +1,12 @@
import _ from 'lodash' import _ from 'lodash'
import { ContractFeed, ContractSummaryFeed } from '../components/contract-feed' import {
import { Page } from '../components/page' ContractActivityFeed,
ContractFeed,
ContractSummaryFeed,
} from './contract-feed'
import { Contract } from '../lib/firebase/contracts' import { Contract } from '../lib/firebase/contracts'
import { Comment } from '../lib/firebase/comments' import { Comment } from '../lib/firebase/comments'
import { Col } from '../components/layout/col' import { Col } from './layout/col'
import { Bet } from '../../common/bet' import { Bet } from '../../common/bet'
const MAX_ACTIVE_CONTRACTS = 75 const MAX_ACTIVE_CONTRACTS = 75
@ -72,30 +75,44 @@ export function findActiveContracts(
export function ActivityFeed(props: { export function ActivityFeed(props: {
contracts: Contract[] contracts: Contract[]
contractBets: Bet[][] recentBets: Bet[]
contractComments: Comment[][] recentComments: Comment[]
loadBetAndCommentHistory?: boolean
}) { }) {
const { contracts, contractBets, contractComments } = props const { contracts, recentBets, recentComments, loadBetAndCommentHistory } =
props
return contracts.length > 0 ? ( const groupedBets = _.groupBy(recentBets, (bet) => bet.contractId)
const groupedComments = _.groupBy(
recentComments,
(comment) => comment.contractId
)
return (
<Col className="items-center"> <Col className="items-center">
<Col className="w-full max-w-3xl"> <Col className="w-full">
<Col className="w-full divide-y divide-gray-300 self-center bg-white"> <Col className="w-full divide-y divide-gray-300 self-center bg-white">
{contracts.map((contract, i) => ( {contracts.map((contract) => (
<div key={contract.id} className="py-6 px-2 sm:px-4"> <div key={contract.id} className="py-6 px-2 sm:px-4">
{loadBetAndCommentHistory ? (
<ContractFeed <ContractFeed
contract={contract} contract={contract}
bets={contractBets[i]} bets={groupedBets[contract.id] ?? []}
comments={contractComments[i]} comments={groupedComments[contract.id] ?? []}
feedType="activity" feedType="activity"
/> />
) : (
<ContractActivityFeed
contract={contract}
bets={groupedBets[contract.id] ?? []}
comments={groupedComments[contract.id] ?? []}
/>
)}
</div> </div>
))} ))}
</Col> </Col>
</Col> </Col>
</Col> </Col>
) : (
<></>
) )
} }
@ -116,11 +133,3 @@ export function SummaryActivityFeed(props: { contracts: Contract[] }) {
</Col> </Col>
) )
} }
export default function ActivityPage() {
return (
<Page>
<ActivityFeed contracts={[]} contractBets={[]} contractComments={[]} />
</Page>
)
}

View File

@ -290,7 +290,10 @@ function TruncatedComment(props: {
} }
return ( return (
<div className="mt-2 whitespace-pre-line break-words text-gray-700"> <div
className="mt-2 whitespace-pre-line break-words text-gray-700"
style={{ fontSize: 15 }}
>
<Linkify text={truncated} /> <Linkify text={truncated} />
{truncated != comment && ( {truncated != comment && (
<SiteLink href={moreHref} className="text-indigo-700"> <SiteLink href={moreHref} className="text-indigo-700">
@ -301,8 +304,11 @@ function TruncatedComment(props: {
) )
} }
function FeedQuestion(props: { contract: Contract }) { function FeedQuestion(props: {
const { contract } = props contract: Contract
showDescription?: boolean
}) {
const { contract, showDescription } = props
const { creatorName, creatorUsername, question, resolution, outcomeType } = const { creatorName, creatorUsername, question, resolution, outcomeType } =
contract contract
const { truePool } = contractMetrics(contract) const { truePool } = contractMetrics(contract)
@ -337,22 +343,34 @@ function FeedQuestion(props: { contract: Contract }) {
{closeMessage} {closeMessage}
</span> </span>
</div> </div>
<Col className="mb-4 items-start justify-between gap-2 sm:flex-row sm:gap-4"> <Col className="items-start justify-between gap-2 sm:flex-row sm:gap-4">
<Col>
<SiteLink <SiteLink
href={contractPath(contract)} href={contractPath(contract)}
className="text-lg text-indigo-700 sm:text-xl" className="text-lg text-indigo-700 sm:text-xl"
> >
{question} {question}
</SiteLink> </SiteLink>
{!showDescription && (
<SiteLink
href={contractPath(contract)}
className="text-sm relative top-4"
>
<div className="text-gray-500 pb-1.5">See more...</div>
</SiteLink>
)}
</Col>
{(isBinary || resolution) && ( {(isBinary || resolution) && (
<ResolutionOrChance className="items-center" contract={contract} /> <ResolutionOrChance className="items-center" contract={contract} />
)} )}
</Col> </Col>
{showDescription && (
<TruncatedComment <TruncatedComment
comment={contract.description} comment={contract.description}
moreHref={contractPath(contract)} moreHref={contractPath(contract)}
shouldTruncate shouldTruncate
/> />
)}
</div> </div>
</> </>
) )
@ -681,6 +699,7 @@ type ActivityItem = {
| 'close' | 'close'
| 'resolve' | 'resolve'
| 'expand' | 'expand'
| undefined
} }
type FeedType = type FeedType =
@ -691,64 +710,24 @@ type FeedType =
// Grouped for a multi-category outcome // Grouped for a multi-category outcome
| 'multi' | 'multi'
export function ContractFeed(props: { function FeedItems(props: {
contract: Contract contract: Contract
bets: Bet[] items: ActivityItem[]
comments: Comment[]
feedType: FeedType feedType: FeedType
setExpanded: (expanded: boolean) => void
outcome?: string // Which multi-category outcome to filter outcome?: string // Which multi-category outcome to filter
betRowClassName?: string betRowClassName?: string
}) { }) {
const { contract, feedType, outcome, betRowClassName } = props const { contract, items, feedType, outcome, setExpanded, betRowClassName } =
const { id, outcomeType } = contract props
const { outcomeType } = contract
const isBinary = outcomeType === 'BINARY' const isBinary = outcomeType === 'BINARY'
const [expanded, setExpanded] = useState(false)
const user = useUser()
let bets = useBets(contract.id) ?? props.bets
bets = isBinary
? bets.filter((bet) => !bet.isAnte)
: bets.filter((bet) => !(bet.isAnte && (bet.outcome as string) === '0'))
if (feedType === 'multi') {
bets = bets.filter((bet) => bet.outcome === outcome)
}
const comments = useComments(id) ?? props.comments
const groupWindow = feedType == 'activity' ? 10 * DAY_IN_MS : DAY_IN_MS
const allItems = [
{ type: 'start', id: 0 },
...groupBets(bets, comments, groupWindow, user?.id),
]
if (contract.closeTime && contract.closeTime <= Date.now()) {
allItems.push({ type: 'close', id: `${contract.closeTime}` })
}
if (contract.resolution) {
allItems.push({ type: 'resolve', id: `${contract.resolutionTime}` })
}
if (feedType === 'multi') {
// Hack to add some more padding above the 'multi' feedType, by adding a null item
allItems.unshift({ type: '', id: -1 })
}
// If there are more than 5 items, only show the first, an expand item, and last 3
let items = allItems
if (!expanded && allItems.length > 5 && feedType == 'activity') {
items = [
allItems[0],
{ type: 'expand', id: 'expand' },
...allItems.slice(-3),
]
}
return ( return (
<div className="flow-root pr-2 md:pr-0"> <div className="flow-root pr-2 md:pr-0">
<div className={clsx(tradingAllowed(contract) ? '' : '-mb-8')}> <div className={clsx(tradingAllowed(contract) ? '' : '-mb-6')}>
{items.map((activityItem, activityItemIdx) => ( {items.map((activityItem, activityItemIdx) => (
<div key={activityItem.id} className="relative pb-8"> <div key={activityItem.id} className="relative pb-6">
{activityItemIdx !== items.length - 1 ? ( {activityItemIdx !== items.length - 1 ? (
<span <span
className="absolute top-5 left-5 -ml-px h-[calc(100%-2rem)] w-0.5 bg-gray-200" className="absolute top-5 left-5 -ml-px h-[calc(100%-2rem)] w-0.5 bg-gray-200"
@ -792,6 +771,117 @@ export function ContractFeed(props: {
) )
} }
export function ContractFeed(props: {
contract: Contract
bets: Bet[]
comments: Comment[]
feedType: FeedType
outcome?: string // Which multi-category outcome to filter
betRowClassName?: string
}) {
const { contract, feedType, outcome, betRowClassName } = props
const { id, outcomeType } = contract
const isBinary = outcomeType === 'BINARY'
const [expanded, setExpanded] = useState(false)
const user = useUser()
let bets = useBets(contract.id) ?? props.bets
bets = isBinary
? bets.filter((bet) => !bet.isAnte)
: bets.filter((bet) => !(bet.isAnte && (bet.outcome as string) === '0'))
if (feedType === 'multi') {
bets = bets.filter((bet) => bet.outcome === outcome)
}
const comments = useComments(id) ?? props.comments
const groupWindow = feedType == 'activity' ? 10 * DAY_IN_MS : DAY_IN_MS
const allItems: ActivityItem[] = [
{ type: 'start', id: '0' },
...groupBets(bets, comments, groupWindow, user?.id),
]
if (contract.closeTime && contract.closeTime <= Date.now()) {
allItems.push({ type: 'close', id: `${contract.closeTime}` })
}
if (contract.resolution) {
allItems.push({ type: 'resolve', id: `${contract.resolutionTime}` })
}
if (feedType === 'multi') {
// Hack to add some more padding above the 'multi' feedType, by adding a null item
allItems.unshift({ type: undefined, id: '-1' })
}
// If there are more than 5 items, only show the first, an expand item, and last 3
let items = allItems
if (!expanded && allItems.length > 5 && feedType == 'activity') {
items = [
allItems[0],
{ type: 'expand', id: 'expand' },
...allItems.slice(-3),
]
}
return (
<FeedItems
contract={contract}
items={items}
feedType={feedType}
setExpanded={setExpanded}
betRowClassName={betRowClassName}
outcome={outcome}
/>
)
}
export function ContractActivityFeed(props: {
contract: Contract
bets: Bet[]
comments: Comment[]
betRowClassName?: string
}) {
const { contract, betRowClassName, bets, comments } = props
const user = useUser()
bets.sort((b1, b2) => b1.createdTime - b2.createdTime)
comments.sort((c1, c2) => c1.createdTime - c2.createdTime)
const allItems: ActivityItem[] = [
{ type: 'start', id: '0' },
...groupBets(bets, comments, DAY_IN_MS, user?.id),
]
if (contract.closeTime && contract.closeTime <= Date.now()) {
allItems.push({ type: 'close', id: `${contract.closeTime}` })
}
if (contract.resolution) {
allItems.push({ type: 'resolve', id: `${contract.resolutionTime}` })
}
// Remove all but last bet group.
const betGroups = allItems.filter((item) => item.type === 'betgroup')
const lastBetGroup = betGroups[betGroups.length - 1]
const filtered = allItems.filter(
(item) => item.type !== 'betgroup' || item.id === lastBetGroup?.id
)
// Only show the first item plus the last three items.
const items =
filtered.length > 3 ? [filtered[0], ...filtered.slice(-3)] : filtered
return (
<FeedItems
contract={contract}
items={items}
feedType="activity"
setExpanded={() => {}}
betRowClassName={betRowClassName}
/>
)
}
export function ContractSummaryFeed(props: { export function ContractSummaryFeed(props: {
contract: Contract contract: Contract
betRowClassName?: string betRowClassName?: string
@ -805,7 +895,7 @@ export function ContractSummaryFeed(props: {
<div className={clsx(tradingAllowed(contract) ? '' : '-mb-8')}> <div className={clsx(tradingAllowed(contract) ? '' : '-mb-8')}>
<div className="relative pb-8"> <div className="relative pb-8">
<div className="relative flex items-start space-x-3"> <div className="relative flex items-start space-x-3">
<FeedQuestion contract={contract} /> <FeedQuestion contract={contract} showDescription />
</div> </div>
</div> </div>
</div> </div>

View File

@ -4,11 +4,11 @@ import { useMemo, useRef } from 'react'
import { Fold } from '../../common/fold' import { Fold } from '../../common/fold'
import { User } from '../../common/user' import { User } from '../../common/user'
import { filterDefined } from '../../common/util/array' import { filterDefined } from '../../common/util/array'
import { Bet, getRecentBets } from '../lib/firebase/bets' import { Bet } from '../lib/firebase/bets'
import { Comment, getRecentComments } from '../lib/firebase/comments' import { Comment, getRecentComments } from '../lib/firebase/comments'
import { Contract, getActiveContracts } from '../lib/firebase/contracts' import { Contract, getActiveContracts } from '../lib/firebase/contracts'
import { listAllFolds } from '../lib/firebase/folds' import { listAllFolds } from '../lib/firebase/folds'
import { findActiveContracts } from '../pages/activity' import { findActiveContracts } from '../components/activity-feed'
import { useInactiveContracts } from './use-contracts' import { useInactiveContracts } from './use-contracts'
import { useFollowedFolds } from './use-fold' import { useFollowedFolds } from './use-fold'
import { useUserBetContracts } from './use-user-bets' import { useUserBetContracts } from './use-user-bets'
@ -20,12 +20,9 @@ export const getAllContractInfo = async () => {
listAllFolds().catch(() => []), listAllFolds().catch(() => []),
]) ])
const [recentBets, recentComments] = await Promise.all([ const recentComments = await getRecentComments()
getRecentBets(),
getRecentComments(),
])
return { contracts, recentBets, recentComments, folds } return { contracts, recentComments, folds }
} }
export const useFilterYourContracts = ( export const useFilterYourContracts = (

View File

@ -12,7 +12,10 @@ import {
getFoldBySlug, getFoldBySlug,
getFoldContracts, getFoldContracts,
} from '../../../lib/firebase/folds' } from '../../../lib/firebase/folds'
import { ActivityFeed, findActiveContracts } from '../../activity' import {
ActivityFeed,
findActiveContracts,
} from '../../../components/activity-feed'
import { TagsList } from '../../../components/tags-list' import { TagsList } from '../../../components/tags-list'
import { Row } from '../../../components/layout/row' import { Row } from '../../../components/layout/row'
import { UserLink } from '../../../components/user-page' import { UserLink } from '../../../components/user-page'
@ -36,6 +39,9 @@ import { SEO } from '../../../components/SEO'
import { useTaggedContracts } from '../../../hooks/use-contracts' import { useTaggedContracts } from '../../../hooks/use-contracts'
import { Linkify } from '../../../components/linkify' import { Linkify } from '../../../components/linkify'
import { filterDefined } from '../../../../common/util/array' import { filterDefined } from '../../../../common/util/array'
import { useRecentBets } from '../../../hooks/use-bets'
import { useRecentComments } from '../../../hooks/use-comments'
import { LoadingIndicator } from '../../../components/loading-indicator'
export async function getStaticProps(props: { params: { slugs: string[] } }) { export async function getStaticProps(props: { params: { slugs: string[] } }) {
const { slugs } = props.params const { slugs } = props.params
@ -48,7 +54,6 @@ export async function getStaticProps(props: { params: { slugs: string[] } }) {
const bets = await Promise.all( const bets = await Promise.all(
contracts.map((contract) => listAllBets(contract.id)) contracts.map((contract) => listAllBets(contract.id))
) )
const betsByContract = _.fromPairs(contracts.map((c, i) => [c.id, bets[i]]))
let activeContracts = findActiveContracts(contracts, [], _.flatten(bets)) let activeContracts = findActiveContracts(contracts, [], _.flatten(bets))
const [resolved, unresolved] = _.partition( const [resolved, unresolved] = _.partition(
@ -57,10 +62,6 @@ export async function getStaticProps(props: { params: { slugs: string[] } }) {
) )
activeContracts = [...unresolved, ...resolved] activeContracts = [...unresolved, ...resolved]
const activeContractBets = activeContracts.map(
(contract) => betsByContract[contract.id] ?? []
)
const creatorScores = scoreCreators(contracts, bets) const creatorScores = scoreCreators(contracts, bets)
const traderScores = scoreTraders(contracts, bets) const traderScores = scoreTraders(contracts, bets)
const [topCreators, topTraders] = await Promise.all([ const [topCreators, topTraders] = await Promise.all([
@ -76,8 +77,6 @@ export async function getStaticProps(props: { params: { slugs: string[] } }) {
curator, curator,
contracts, contracts,
activeContracts, activeContracts,
activeContractBets,
activeContractComments: activeContracts.map(() => []),
traderScores, traderScores,
topTraders, topTraders,
creatorScores, creatorScores,
@ -117,15 +116,8 @@ export default function FoldPage(props: {
creatorScores: { [userId: string]: number } creatorScores: { [userId: string]: number }
topCreators: User[] topCreators: User[]
}) { }) {
const { const { curator, traderScores, topTraders, creatorScores, topCreators } =
curator, props
activeContractBets,
activeContractComments,
traderScores,
topTraders,
creatorScores,
topCreators,
} = props
const router = useRouter() const router = useRouter()
const { slugs } = router.query as { slugs: string[] } const { slugs } = router.query as { slugs: string[] }
@ -151,6 +143,9 @@ export default function FoldPage(props: {
props.activeContracts.map((contract) => contractsMap[contract.id]) props.activeContracts.map((contract) => contractsMap[contract.id])
) )
const recentBets = useRecentBets()
const recentComments = useRecentComments()
if (fold === null || !foldSubpages.includes(page) || slugs[2]) { if (fold === null || !foldSubpages.includes(page) || slugs[2]) {
return <Custom404 /> return <Custom404 />
} }
@ -233,11 +228,13 @@ export default function FoldPage(props: {
/> />
)} )}
{page === 'activity' ? ( {page === 'activity' ? (
recentBets && recentComments ? (
<> <>
<ActivityFeed <ActivityFeed
contracts={activeContracts} contracts={activeContracts}
contractBets={activeContractBets} recentBets={recentBets ?? []}
contractComments={activeContractComments} recentComments={recentComments ?? []}
loadBetAndCommentHistory
/> />
{activeContracts.length === 0 && ( {activeContracts.length === 0 && (
<div className="mx-2 mt-4 text-gray-500 lg:mx-0"> <div className="mx-2 mt-4 text-gray-500 lg:mx-0">
@ -246,6 +243,9 @@ export default function FoldPage(props: {
</div> </div>
)} )}
</> </>
) : (
<LoadingIndicator className="mt-4" />
)
) : ( ) : (
<SearchableGrid <SearchableGrid
contracts={contracts} contracts={contracts}

View File

@ -6,9 +6,8 @@ import _ from 'lodash'
import { Contract } from '../lib/firebase/contracts' import { Contract } from '../lib/firebase/contracts'
import { Page } from '../components/page' import { Page } from '../components/page'
import { ActivityFeed, SummaryActivityFeed } from './activity' import { ActivityFeed, SummaryActivityFeed } from '../components/activity-feed'
import { Comment } from '../lib/firebase/comments' import { Comment } from '../lib/firebase/comments'
import { Bet } from '../lib/firebase/bets'
import FeedCreate from '../components/feed-create' import FeedCreate from '../components/feed-create'
import { Spacer } from '../components/layout/spacer' import { Spacer } from '../components/layout/spacer'
import { Col } from '../components/layout/col' import { Col } from '../components/layout/col'
@ -23,8 +22,9 @@ import {
useFilterYourContracts, useFilterYourContracts,
useFindActiveContracts, useFindActiveContracts,
} from '../hooks/use-find-active-contracts' } from '../hooks/use-find-active-contracts'
import { useGetRecentBets } from '../hooks/use-bets' import { useGetRecentBets, useRecentBets } from '../hooks/use-bets'
import { useActiveContracts } from '../hooks/use-contracts' import { useActiveContracts } from '../hooks/use-contracts'
import { useRecentComments } from '../hooks/use-comments'
export async function getStaticProps() { export async function getStaticProps() {
const contractInfo = await getAllContractInfo() const contractInfo = await getAllContractInfo()
@ -38,10 +38,9 @@ export async function getStaticProps() {
const Home = (props: { const Home = (props: {
contracts: Contract[] contracts: Contract[]
folds: Fold[] folds: Fold[]
recentBets: Bet[]
recentComments: Comment[] recentComments: Comment[]
}) => { }) => {
const { folds, recentComments } = props const { folds } = props
const user = useUser() const user = useUser()
const contracts = useActiveContracts() ?? props.contracts const contracts = useActiveContracts() ?? props.contracts
@ -51,12 +50,14 @@ const Home = (props: {
contracts contracts
) )
const recentBets = useGetRecentBets() const initialRecentBets = useGetRecentBets()
const { activeContracts, activeBets, activeComments } = const recentBets = useRecentBets() ?? initialRecentBets
useFindActiveContracts({ const recentComments = useRecentComments() ?? props.recentComments
const { activeContracts } = useFindActiveContracts({
contracts: yourContracts, contracts: yourContracts,
recentBets: recentBets ?? [], recentBets: initialRecentBets ?? [],
recentComments, recentComments: props.recentComments,
}) })
const exploreContracts = useExploreContracts() const exploreContracts = useExploreContracts()
@ -71,7 +72,7 @@ const Home = (props: {
return ( return (
<Page assertUser="signed-in"> <Page assertUser="signed-in">
<Col className="items-center"> <Col className="items-center">
<Col className="w-full max-w-3xl"> <Col className="w-full max-w-[700px]">
<FeedCreate user={user ?? undefined} /> <FeedCreate user={user ?? undefined} />
<Spacer h={6} /> <Spacer h={6} />
@ -116,8 +117,8 @@ const Home = (props: {
(recentBets ? ( (recentBets ? (
<ActivityFeed <ActivityFeed
contracts={activeContracts} contracts={activeContracts}
contractBets={activeBets} recentBets={recentBets}
contractComments={activeComments} recentComments={recentComments}
/> />
) : ( ) : (
<LoadingIndicator className="mt-4" /> <LoadingIndicator className="mt-4" />