From 895eba45536fec804054d498a65e3efff3cd22b4 Mon Sep 17 00:00:00 2001 From: jahooma Date: Fri, 14 Jan 2022 18:16:25 -0600 Subject: [PATCH] Get static props of just data for feed: active contracts, their bets & comments. --- web/components/contract-feed.tsx | 8 ++--- web/components/contract-overview.tsx | 13 +++++-- web/components/contract-prob-graph.tsx | 3 +- web/hooks/use-bets.ts | 2 +- web/hooks/use-comments.ts | 2 +- web/lib/firebase/bets.ts | 7 ++++ web/lib/firebase/comments.ts | 8 ++++- web/pages/[username]/[contractSlug].tsx | 21 ++++++++++-- web/pages/activity.tsx | 45 ++++++++++++++++++------- web/pages/index.tsx | 40 +++++++++++++++++----- 10 files changed, 116 insertions(+), 33 deletions(-) diff --git a/web/components/contract-feed.tsx b/web/components/contract-feed.tsx index 68c333b2..c74efbb2 100644 --- a/web/components/contract-feed.tsx +++ b/web/components/contract-feed.tsx @@ -505,6 +505,8 @@ type ActivityItem = { export function ContractFeed(props: { contract: Contract + bets: Bet[] + comments: Comment[] // Feed types: 'activity' = Activity feed, 'market' = Comments feed on a market feedType: 'activity' | 'market' }) { @@ -512,12 +514,10 @@ export function ContractFeed(props: { const { id } = contract const user = useUser() - let bets = useBets(id) - if (bets === 'loading') bets = [] + let bets = useBets(id) ?? props.bets bets = withoutAnteBets(contract, bets) - let comments = useComments(id) - if (comments === 'loading') comments = [] + const comments = useComments(id) ?? props.comments const groupWindow = feedType == 'activity' ? 10 * DAY_IN_MS : DAY_IN_MS diff --git a/web/components/contract-overview.tsx b/web/components/contract-overview.tsx index 964f70f0..4c82594d 100644 --- a/web/components/contract-overview.tsx +++ b/web/components/contract-overview.tsx @@ -15,12 +15,16 @@ import clsx from 'clsx' import { ContractDetails, ResolutionOrChance } from './contract-card' import { ContractFeed } from './contract-feed' import { TweetButton } from './tweet-button' +import { Bet } from '../../common/bet' +import { Comment } from '../../common/comment' export const ContractOverview = (props: { contract: Contract + bets: Bet[] + comments: Comment[] className?: string }) => { - const { contract, className } = props + const { contract, bets, comments, className } = props const { resolution, creatorId, creatorName } = contract const { probPercent, truePool } = contractMetrics(contract) @@ -91,7 +95,12 @@ export const ContractOverview = (props: { )} - + ) } diff --git a/web/components/contract-prob-graph.tsx b/web/components/contract-prob-graph.tsx index 6276314f..3be73c6b 100644 --- a/web/components/contract-prob-graph.tsx +++ b/web/components/contract-prob-graph.tsx @@ -11,8 +11,7 @@ export function ContractProbGraph(props: { contract: Contract }) { const { contract } = props const { id, phantomShares, resolutionTime } = contract - let bets = useBets(id) - if (bets === 'loading') bets = [] + let bets = useBets(id) ?? [] bets = withoutAnteBets(contract, bets) const startProb = getProbability(phantomShares) diff --git a/web/hooks/use-bets.ts b/web/hooks/use-bets.ts index 0a35ba53..6ab9eb21 100644 --- a/web/hooks/use-bets.ts +++ b/web/hooks/use-bets.ts @@ -2,7 +2,7 @@ import { useEffect, useState } from 'react' import { Bet, listenForBets } from '../lib/firebase/bets' export const useBets = (contractId: string) => { - const [bets, setBets] = useState('loading') + const [bets, setBets] = useState() useEffect(() => { if (contractId) return listenForBets(contractId, setBets) diff --git a/web/hooks/use-comments.ts b/web/hooks/use-comments.ts index bedc7598..37f001dd 100644 --- a/web/hooks/use-comments.ts +++ b/web/hooks/use-comments.ts @@ -6,7 +6,7 @@ import { } from '../lib/firebase/comments' export const useComments = (contractId: string) => { - const [comments, setComments] = useState('loading') + const [comments, setComments] = useState() useEffect(() => { if (contractId) return listenForComments(contractId, setComments) diff --git a/web/lib/firebase/bets.ts b/web/lib/firebase/bets.ts index 0c7b1394..287a98a2 100644 --- a/web/lib/firebase/bets.ts +++ b/web/lib/firebase/bets.ts @@ -10,12 +10,19 @@ import _ from 'lodash' import { db } from './init' import { Bet } from '../../../common/bet' import { Contract } from '../../../common/contract' +import { getValues } from './utils' export type { Bet } function getBetsCollection(contractId: string) { return collection(db, 'contracts', contractId, 'bets') } +export async function listAllBets(contractId: string) { + const bets = await getValues(getBetsCollection(contractId)) + bets.sort((bet1, bet2) => bet1.createdTime - bet2.createdTime) + return bets +} + export function listenForBets( contractId: string, setBets: (bets: Bet[]) => void diff --git a/web/lib/firebase/comments.ts b/web/lib/firebase/comments.ts index 071dab7d..e58d8a1c 100644 --- a/web/lib/firebase/comments.ts +++ b/web/lib/firebase/comments.ts @@ -9,7 +9,7 @@ import { where, orderBy, } from 'firebase/firestore' -import { listenForValues } from './utils' +import { getValues, listenForValues } from './utils' import { db } from './init' import { User } from '../../../common/user' import { Comment } from '../../../common/comment' @@ -37,6 +37,12 @@ function getCommentsCollection(contractId: string) { return collection(db, 'contracts', contractId, 'comments') } +export async function listAllComments(contractId: string) { + const comments = await getValues(getCommentsCollection(contractId)) + comments.sort((c1, c2) => c1.createdTime - c2.createdTime) + return comments +} + export function listenForComments( contractId: string, setComments: (comments: Comment[]) => void diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx index 57ceb4f0..105ec9c3 100644 --- a/web/pages/[username]/[contractSlug].tsx +++ b/web/pages/[username]/[contractSlug].tsx @@ -19,16 +19,26 @@ import { import { SEO } from '../../components/SEO' import { Page } from '../../components/page' import { contractTextDetails } from '../../components/contract-card' +import { Bet, listAllBets } from '../../lib/firebase/bets' +import { Comment, listAllComments } from '../../lib/firebase/comments' export async function getStaticProps(props: { params: any }) { const { username, contractSlug } = props.params const contract = (await getContractFromSlug(contractSlug)) || null + const contractId = contract?.id + + const [bets, comments] = await Promise.all([ + contractId ? listAllBets(contractId) : null, + contractId ? listAllComments(contractId) : null, + ]) return { props: { username, slug: contractSlug, contract, + bets, + comments, }, revalidate: 60, // regenerate after a minute @@ -41,12 +51,15 @@ export async function getStaticPaths() { export default function ContractPage(props: { contract: Contract | null + bets: Bet[] | null + comments: Comment[] | null slug: string username: string }) { const user = useUser() const contract = useContractWithPreload(props.slug, props.contract) + const { bets, comments } = props if (!contract) { return
Contract not found...
@@ -83,7 +96,11 @@ export default function ContractPage(props: {
- +
@@ -108,7 +125,7 @@ function BetsSection(props: { contract: Contract; user: User | null }) { const { contract, user } = props const bets = useBets(contract.id) - if (bets === 'loading' || bets.length === 0) return <> + if (!bets || bets.length === 0) return <> // Decending creation time. bets.sort((bet1, bet2) => bet2.createdTime - bet1.createdTime) diff --git a/web/pages/activity.tsx b/web/pages/activity.tsx index 4d4d1766..62d0026c 100644 --- a/web/pages/activity.tsx +++ b/web/pages/activity.tsx @@ -7,10 +7,24 @@ import { useContracts } from '../hooks/use-contracts' import { Contract } from '../lib/firebase/contracts' import { Comment } from '../lib/firebase/comments' import { Col } from '../components/layout/col' +import { Bet } from '../../common/bet' -function FeedCard(props: { contract: Contract }) { - const { contract } = props - return +const MAX_ACTIVE_CONTRACTS = 75 + +function FeedCard(props: { + contract: Contract + bets: Bet[] + comments: Comment[] +}) { + const { contract, bets, comments } = props + return ( + + ) } // This does NOT include comment times, since those aren't part of the contract atm. @@ -28,7 +42,7 @@ function lastActivityTime(contract: Contract) { // - Comment on a market // - New market created // - Market resolved -function findActiveContracts( +export function findActiveContracts( allContracts: Contract[], recentComments: Comment[] ) { @@ -63,26 +77,33 @@ function findActiveContracts( contracts = _.uniqBy(contracts, (c) => c.id) contracts = contracts.filter((contract) => contract.visibility === 'public') contracts = _.sortBy(contracts, (c) => -(idToActivityTime.get(c.id) ?? 0)) - return contracts + return contracts.slice(0, MAX_ACTIVE_CONTRACTS) } export function ActivityFeed(props: { contracts: Contract[] - recentComments: Comment[] + contractBets: Bet[][] + contractComments: Comment[][] }) { + const { contractBets, contractComments } = props const contracts = useContracts() ?? props.contracts - const recentComments = useRecentComments() ?? props.recentComments - // TODO: Handle static props correctly? - const activeContracts = findActiveContracts(contracts, recentComments) + const recentComments = useRecentComments() + const activeContracts = recentComments + ? findActiveContracts(contracts, recentComments) + : contracts return contracts.length > 0 ? ( <Col className="w-full bg-white self-center divide-gray-300 divide-y"> - {activeContracts.map((contract) => ( + {activeContracts.map((contract, i) => ( <div className="py-6 px-2 sm:px-4"> - <FeedCard contract={contract} /> + <FeedCard + contract={contract} + bets={contractBets[i]} + comments={contractComments[i]} + /> </div> ))} </Col> @@ -96,7 +117,7 @@ export function ActivityFeed(props: { export default function ActivityPage() { return ( <Page> - <ActivityFeed contracts={[]} recentComments={[]} /> + <ActivityFeed contracts={[]} contractBets={[]} contractComments={[]} /> </Page> ) } diff --git a/web/pages/index.tsx b/web/pages/index.tsx index 2c8d0ba8..0959ab43 100644 --- a/web/pages/index.tsx +++ b/web/pages/index.tsx @@ -8,10 +8,15 @@ import { import { Spacer } from '../components/layout/spacer' import { Page } from '../components/page' import { Title } from '../components/title' -import { ActivityFeed } from './activity' -import { getRecentComments, Comment } from '../lib/firebase/comments' +import { ActivityFeed, findActiveContracts } from './activity' +import { + getRecentComments, + Comment, + listAllComments, +} from '../lib/firebase/comments' import { Col } from '../components/layout/col' import { ContractCard } from '../components/contract-card' +import { Bet, listAllBets } from '../lib/firebase/bets' export async function getStaticProps() { const [contracts, hotContracts, recentComments] = await Promise.all([ @@ -20,11 +25,20 @@ export async function getStaticProps() { getRecentComments().catch(() => []), ]) + const activeContracts = findActiveContracts(contracts, recentComments) + const activeContractBets = await Promise.all( + activeContracts.map((contract) => listAllBets(contract.id)) + ) + const activeContractComments = await Promise.all( + activeContracts.map((contract) => listAllComments(contract.id)) + ) + return { props: { - contracts, + activeContracts, + activeContractBets, + activeContractComments, hotContracts, - recentComments, }, revalidate: 60, // regenerate after a minute @@ -32,17 +46,27 @@ export async function getStaticProps() { } const Home = (props: { - contracts: Contract[] + activeContracts: Contract[] + activeContractBets: Bet[][] + activeContractComments: Comment[][] hotContracts: Contract[] - recentComments: Comment[] }) => { - const { contracts, hotContracts, recentComments } = props + const { + hotContracts, + activeContracts, + activeContractBets, + activeContractComments, + } = props return ( <Page> <HotMarkets hotContracts={hotContracts} /> <Spacer h={10} /> - <ActivityFeed contracts={contracts} recentComments={recentComments} /> + <ActivityFeed + contracts={activeContracts} + contractBets={activeContractBets} + contractComments={activeContractComments} + /> </Page> ) }