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
GitHub
parent
e49b64ee9f
commit
d7d8fb94c4
|
|
@ -1,9 +1,12 @@
|
|||
import _ from 'lodash'
|
||||
import { ContractFeed, ContractSummaryFeed } from '../components/contract-feed'
|
||||
import { Page } from '../components/page'
|
||||
import {
|
||||
ContractActivityFeed,
|
||||
ContractFeed,
|
||||
ContractSummaryFeed,
|
||||
} from './contract-feed'
|
||||
import { Contract } from '../lib/firebase/contracts'
|
||||
import { Comment } from '../lib/firebase/comments'
|
||||
import { Col } from '../components/layout/col'
|
||||
import { Col } from './layout/col'
|
||||
import { Bet } from '../../common/bet'
|
||||
|
||||
const MAX_ACTIVE_CONTRACTS = 75
|
||||
|
|
@ -72,30 +75,44 @@ export function findActiveContracts(
|
|||
|
||||
export function ActivityFeed(props: {
|
||||
contracts: Contract[]
|
||||
contractBets: Bet[][]
|
||||
contractComments: Comment[][]
|
||||
recentBets: Bet[]
|
||||
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="w-full max-w-3xl">
|
||||
<Col className="w-full">
|
||||
<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">
|
||||
{loadBetAndCommentHistory ? (
|
||||
<ContractFeed
|
||||
contract={contract}
|
||||
bets={contractBets[i]}
|
||||
comments={contractComments[i]}
|
||||
bets={groupedBets[contract.id] ?? []}
|
||||
comments={groupedComments[contract.id] ?? []}
|
||||
feedType="activity"
|
||||
/>
|
||||
) : (
|
||||
<ContractActivityFeed
|
||||
contract={contract}
|
||||
bets={groupedBets[contract.id] ?? []}
|
||||
comments={groupedComments[contract.id] ?? []}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</Col>
|
||||
</Col>
|
||||
</Col>
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -116,11 +133,3 @@ export function SummaryActivityFeed(props: { contracts: Contract[] }) {
|
|||
</Col>
|
||||
)
|
||||
}
|
||||
|
||||
export default function ActivityPage() {
|
||||
return (
|
||||
<Page>
|
||||
<ActivityFeed contracts={[]} contractBets={[]} contractComments={[]} />
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
|
|
@ -290,7 +290,10 @@ function TruncatedComment(props: {
|
|||
}
|
||||
|
||||
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} />
|
||||
{truncated != comment && (
|
||||
<SiteLink href={moreHref} className="text-indigo-700">
|
||||
|
|
@ -301,8 +304,11 @@ function TruncatedComment(props: {
|
|||
)
|
||||
}
|
||||
|
||||
function FeedQuestion(props: { contract: Contract }) {
|
||||
const { contract } = props
|
||||
function FeedQuestion(props: {
|
||||
contract: Contract
|
||||
showDescription?: boolean
|
||||
}) {
|
||||
const { contract, showDescription } = props
|
||||
const { creatorName, creatorUsername, question, resolution, outcomeType } =
|
||||
contract
|
||||
const { truePool } = contractMetrics(contract)
|
||||
|
|
@ -337,22 +343,34 @@ function FeedQuestion(props: { contract: Contract }) {
|
|||
{closeMessage}
|
||||
</span>
|
||||
</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
|
||||
href={contractPath(contract)}
|
||||
className="text-lg text-indigo-700 sm:text-xl"
|
||||
>
|
||||
{question}
|
||||
</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) && (
|
||||
<ResolutionOrChance className="items-center" contract={contract} />
|
||||
)}
|
||||
</Col>
|
||||
{showDescription && (
|
||||
<TruncatedComment
|
||||
comment={contract.description}
|
||||
moreHref={contractPath(contract)}
|
||||
shouldTruncate
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
|
@ -681,6 +699,7 @@ type ActivityItem = {
|
|||
| 'close'
|
||||
| 'resolve'
|
||||
| 'expand'
|
||||
| undefined
|
||||
}
|
||||
|
||||
type FeedType =
|
||||
|
|
@ -691,64 +710,24 @@ type FeedType =
|
|||
// Grouped for a multi-category outcome
|
||||
| 'multi'
|
||||
|
||||
export function ContractFeed(props: {
|
||||
function FeedItems(props: {
|
||||
contract: Contract
|
||||
bets: Bet[]
|
||||
comments: Comment[]
|
||||
items: ActivityItem[]
|
||||
feedType: FeedType
|
||||
setExpanded: (expanded: boolean) => void
|
||||
outcome?: string // Which multi-category outcome to filter
|
||||
betRowClassName?: string
|
||||
}) {
|
||||
const { contract, feedType, outcome, betRowClassName } = props
|
||||
const { id, outcomeType } = contract
|
||||
const { contract, items, feedType, outcome, setExpanded, betRowClassName } =
|
||||
props
|
||||
const { 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 = [
|
||||
{ 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 (
|
||||
<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) => (
|
||||
<div key={activityItem.id} className="relative pb-8">
|
||||
<div key={activityItem.id} className="relative pb-6">
|
||||
{activityItemIdx !== items.length - 1 ? (
|
||||
<span
|
||||
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: {
|
||||
contract: Contract
|
||||
betRowClassName?: string
|
||||
|
|
@ -805,7 +895,7 @@ export function ContractSummaryFeed(props: {
|
|||
<div className={clsx(tradingAllowed(contract) ? '' : '-mb-8')}>
|
||||
<div className="relative pb-8">
|
||||
<div className="relative flex items-start space-x-3">
|
||||
<FeedQuestion contract={contract} />
|
||||
<FeedQuestion contract={contract} showDescription />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@ import { useMemo, useRef } from 'react'
|
|||
import { Fold } from '../../common/fold'
|
||||
import { User } from '../../common/user'
|
||||
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 { Contract, getActiveContracts } from '../lib/firebase/contracts'
|
||||
import { listAllFolds } from '../lib/firebase/folds'
|
||||
import { findActiveContracts } from '../pages/activity'
|
||||
import { findActiveContracts } from '../components/activity-feed'
|
||||
import { useInactiveContracts } from './use-contracts'
|
||||
import { useFollowedFolds } from './use-fold'
|
||||
import { useUserBetContracts } from './use-user-bets'
|
||||
|
|
@ -20,12 +20,9 @@ export const getAllContractInfo = async () => {
|
|||
listAllFolds().catch(() => []),
|
||||
])
|
||||
|
||||
const [recentBets, recentComments] = await Promise.all([
|
||||
getRecentBets(),
|
||||
getRecentComments(),
|
||||
])
|
||||
const recentComments = await getRecentComments()
|
||||
|
||||
return { contracts, recentBets, recentComments, folds }
|
||||
return { contracts, recentComments, folds }
|
||||
}
|
||||
|
||||
export const useFilterYourContracts = (
|
||||
|
|
|
|||
|
|
@ -12,7 +12,10 @@ import {
|
|||
getFoldBySlug,
|
||||
getFoldContracts,
|
||||
} from '../../../lib/firebase/folds'
|
||||
import { ActivityFeed, findActiveContracts } from '../../activity'
|
||||
import {
|
||||
ActivityFeed,
|
||||
findActiveContracts,
|
||||
} from '../../../components/activity-feed'
|
||||
import { TagsList } from '../../../components/tags-list'
|
||||
import { Row } from '../../../components/layout/row'
|
||||
import { UserLink } from '../../../components/user-page'
|
||||
|
|
@ -36,6 +39,9 @@ import { SEO } from '../../../components/SEO'
|
|||
import { useTaggedContracts } from '../../../hooks/use-contracts'
|
||||
import { Linkify } from '../../../components/linkify'
|
||||
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[] } }) {
|
||||
const { slugs } = props.params
|
||||
|
|
@ -48,7 +54,6 @@ export async function getStaticProps(props: { params: { slugs: string[] } }) {
|
|||
const bets = await Promise.all(
|
||||
contracts.map((contract) => listAllBets(contract.id))
|
||||
)
|
||||
const betsByContract = _.fromPairs(contracts.map((c, i) => [c.id, bets[i]]))
|
||||
|
||||
let activeContracts = findActiveContracts(contracts, [], _.flatten(bets))
|
||||
const [resolved, unresolved] = _.partition(
|
||||
|
|
@ -57,10 +62,6 @@ export async function getStaticProps(props: { params: { slugs: string[] } }) {
|
|||
)
|
||||
activeContracts = [...unresolved, ...resolved]
|
||||
|
||||
const activeContractBets = activeContracts.map(
|
||||
(contract) => betsByContract[contract.id] ?? []
|
||||
)
|
||||
|
||||
const creatorScores = scoreCreators(contracts, bets)
|
||||
const traderScores = scoreTraders(contracts, bets)
|
||||
const [topCreators, topTraders] = await Promise.all([
|
||||
|
|
@ -76,8 +77,6 @@ export async function getStaticProps(props: { params: { slugs: string[] } }) {
|
|||
curator,
|
||||
contracts,
|
||||
activeContracts,
|
||||
activeContractBets,
|
||||
activeContractComments: activeContracts.map(() => []),
|
||||
traderScores,
|
||||
topTraders,
|
||||
creatorScores,
|
||||
|
|
@ -117,15 +116,8 @@ export default function FoldPage(props: {
|
|||
creatorScores: { [userId: string]: number }
|
||||
topCreators: User[]
|
||||
}) {
|
||||
const {
|
||||
curator,
|
||||
activeContractBets,
|
||||
activeContractComments,
|
||||
traderScores,
|
||||
topTraders,
|
||||
creatorScores,
|
||||
topCreators,
|
||||
} = props
|
||||
const { curator, traderScores, topTraders, creatorScores, topCreators } =
|
||||
props
|
||||
|
||||
const router = useRouter()
|
||||
const { slugs } = router.query as { slugs: string[] }
|
||||
|
|
@ -151,6 +143,9 @@ export default function FoldPage(props: {
|
|||
props.activeContracts.map((contract) => contractsMap[contract.id])
|
||||
)
|
||||
|
||||
const recentBets = useRecentBets()
|
||||
const recentComments = useRecentComments()
|
||||
|
||||
if (fold === null || !foldSubpages.includes(page) || slugs[2]) {
|
||||
return <Custom404 />
|
||||
}
|
||||
|
|
@ -233,11 +228,13 @@ export default function FoldPage(props: {
|
|||
/>
|
||||
)}
|
||||
{page === 'activity' ? (
|
||||
recentBets && recentComments ? (
|
||||
<>
|
||||
<ActivityFeed
|
||||
contracts={activeContracts}
|
||||
contractBets={activeContractBets}
|
||||
contractComments={activeContractComments}
|
||||
recentBets={recentBets ?? []}
|
||||
recentComments={recentComments ?? []}
|
||||
loadBetAndCommentHistory
|
||||
/>
|
||||
{activeContracts.length === 0 && (
|
||||
<div className="mx-2 mt-4 text-gray-500 lg:mx-0">
|
||||
|
|
@ -246,6 +243,9 @@ export default function FoldPage(props: {
|
|||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<LoadingIndicator className="mt-4" />
|
||||
)
|
||||
) : (
|
||||
<SearchableGrid
|
||||
contracts={contracts}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,8 @@ import _ from 'lodash'
|
|||
|
||||
import { Contract } from '../lib/firebase/contracts'
|
||||
import { Page } from '../components/page'
|
||||
import { ActivityFeed, SummaryActivityFeed } from './activity'
|
||||
import { ActivityFeed, SummaryActivityFeed } from '../components/activity-feed'
|
||||
import { Comment } from '../lib/firebase/comments'
|
||||
import { Bet } from '../lib/firebase/bets'
|
||||
import FeedCreate from '../components/feed-create'
|
||||
import { Spacer } from '../components/layout/spacer'
|
||||
import { Col } from '../components/layout/col'
|
||||
|
|
@ -23,8 +22,9 @@ import {
|
|||
useFilterYourContracts,
|
||||
useFindActiveContracts,
|
||||
} 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 { useRecentComments } from '../hooks/use-comments'
|
||||
|
||||
export async function getStaticProps() {
|
||||
const contractInfo = await getAllContractInfo()
|
||||
|
|
@ -38,10 +38,9 @@ export async function getStaticProps() {
|
|||
const Home = (props: {
|
||||
contracts: Contract[]
|
||||
folds: Fold[]
|
||||
recentBets: Bet[]
|
||||
recentComments: Comment[]
|
||||
}) => {
|
||||
const { folds, recentComments } = props
|
||||
const { folds } = props
|
||||
const user = useUser()
|
||||
|
||||
const contracts = useActiveContracts() ?? props.contracts
|
||||
|
|
@ -51,12 +50,14 @@ const Home = (props: {
|
|||
contracts
|
||||
)
|
||||
|
||||
const recentBets = useGetRecentBets()
|
||||
const { activeContracts, activeBets, activeComments } =
|
||||
useFindActiveContracts({
|
||||
const initialRecentBets = useGetRecentBets()
|
||||
const recentBets = useRecentBets() ?? initialRecentBets
|
||||
const recentComments = useRecentComments() ?? props.recentComments
|
||||
|
||||
const { activeContracts } = useFindActiveContracts({
|
||||
contracts: yourContracts,
|
||||
recentBets: recentBets ?? [],
|
||||
recentComments,
|
||||
recentBets: initialRecentBets ?? [],
|
||||
recentComments: props.recentComments,
|
||||
})
|
||||
|
||||
const exploreContracts = useExploreContracts()
|
||||
|
|
@ -71,7 +72,7 @@ const Home = (props: {
|
|||
return (
|
||||
<Page assertUser="signed-in">
|
||||
<Col className="items-center">
|
||||
<Col className="w-full max-w-3xl">
|
||||
<Col className="w-full max-w-[700px]">
|
||||
<FeedCreate user={user ?? undefined} />
|
||||
<Spacer h={6} />
|
||||
|
||||
|
|
@ -116,8 +117,8 @@ const Home = (props: {
|
|||
(recentBets ? (
|
||||
<ActivityFeed
|
||||
contracts={activeContracts}
|
||||
contractBets={activeBets}
|
||||
contractComments={activeComments}
|
||||
recentBets={recentBets}
|
||||
recentComments={recentComments}
|
||||
/>
|
||||
) : (
|
||||
<LoadingIndicator className="mt-4" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user