diff --git a/web/components/contract/prob-change-table.tsx b/web/components/contract/prob-change-table.tsx new file mode 100644 index 00000000..9f1f171d --- /dev/null +++ b/web/components/contract/prob-change-table.tsx @@ -0,0 +1,72 @@ +import clsx from 'clsx' +import { contractPath } from 'web/lib/firebase/contracts' +import { CPMMContract } from 'common/contract' +import { formatPercent } from 'common/util/format' +import { useProbChanges } from 'web/hooks/use-prob-changes' +import { SiteLink } from '../site-link' + +export function ProbChangeTable(props: { userId: string | undefined }) { + const { userId } = props + + const changes = useProbChanges(userId ?? '') + console.log('changes', changes) + + if (!changes) { + return null + } + + const { positiveChanges, negativeChanges } = changes + + const count = 3 + + return ( +
+
Daily movers
+
% pts
+ {positiveChanges.slice(0, count).map((contract) => ( + <> +
+ + {contract.question} + +
+ + + ))} +
+ {negativeChanges.slice(0, count).map((contract) => ( + <> +
+ + {contract.question} + +
+ + + ))} +
+ ) +} + +export function ProbChange(props: { + contract: CPMMContract + className?: string +}) { + const { contract, className } = props + const { + probChanges: { day: change }, + } = contract + + const color = + change > 0 + ? 'text-green-500' + : change < 0 + ? 'text-red-500' + : 'text-gray-500' + + const str = + change === 0 + ? '+0%' + : `${change > 0 ? '+' : '-'}${formatPercent(Math.abs(change))}` + return
{str}
+} diff --git a/web/hooks/use-prob-changes.tsx b/web/hooks/use-prob-changes.tsx new file mode 100644 index 00000000..c5e2c9bd --- /dev/null +++ b/web/hooks/use-prob-changes.tsx @@ -0,0 +1,22 @@ +import { useFirestoreQueryData } from '@react-query-firebase/firestore' +import { + getProbChangesNegative, + getProbChangesPositive, +} from 'web/lib/firebase/contracts' + +export const useProbChanges = (userId: string) => { + const { data: positiveChanges } = useFirestoreQueryData( + ['prob-changes-day-positive', userId], + getProbChangesPositive(userId) + ) + const { data: negativeChanges } = useFirestoreQueryData( + ['prob-changes-day-negative', userId], + getProbChangesNegative(userId) + ) + + if (!positiveChanges || !negativeChanges) { + return undefined + } + + return { positiveChanges, negativeChanges } +} diff --git a/web/lib/firebase/contracts.ts b/web/lib/firebase/contracts.ts index 5c65b23f..702f1c99 100644 --- a/web/lib/firebase/contracts.ts +++ b/web/lib/firebase/contracts.ts @@ -16,7 +16,7 @@ import { import { partition, sortBy, sum, uniqBy } from 'lodash' import { coll, getValues, listenForValue, listenForValues } from './utils' -import { BinaryContract, Contract } from 'common/contract' +import { BinaryContract, Contract, CPMMContract } from 'common/contract' import { createRNG, shuffle } from 'common/util/random' import { formatMoney, formatPercent } from 'common/util/format' import { DAY_MS } from 'common/util/time' @@ -402,3 +402,21 @@ export async function getRecentBetsAndComments(contract: Contract) { recentComments, } } + +export const getProbChangesPositive = (userId: string) => + query( + contracts, + where('uniqueBettorIds', 'array-contains', userId), + where('probChanges.day', '>', 0), + orderBy('probChanges.day', 'desc'), + limit(10) + ) as Query + +export const getProbChangesNegative = (userId: string) => + query( + contracts, + where('uniqueBettorIds', 'array-contains', userId), + where('probChanges.day', '<', 0), + orderBy('probChanges.day', 'asc'), + limit(10) + ) as Query diff --git a/web/pages/experimental/home/index.tsx b/web/pages/experimental/home/index.tsx index 2164e280..9e393d4f 100644 --- a/web/pages/experimental/home/index.tsx +++ b/web/pages/experimental/home/index.tsx @@ -25,6 +25,7 @@ import { Button } from 'web/components/button' import { ArrangeHome, getHomeItems } from '../../../components/arrange-home' import { Title } from 'web/components/title' import { Row } from 'web/components/layout/row' +import { ProbChangeTable } from 'web/components/contract/prob-change-table' export const getServerSideProps: GetServerSideProps = async (ctx) => { const creds = await authenticateOnServer(ctx) @@ -75,36 +76,40 @@ const Home = (props: { auth: { user: User } | null }) => { /> ) : ( - visibleItems.map((item) => { - const { id } = item - if (id === 'your-bets') { - return ( - - ) - } - const sort = SORTS.find((sort) => sort.value === id) - if (sort) - return ( - - ) + <> + - const group = groups.find((g) => g.id === id) - if (group) - return + {visibleItems.map((item) => { + const { id } = item + if (id === 'your-bets') { + return ( + + ) + } + const sort = SORTS.find((sort) => sort.value === id) + if (sort) + return ( + + ) - return null - }) + const group = groups.find((g) => g.id === id) + if (group) + return + + return null + })} + )}