Daily movers table in experimental/home

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 (
+    <div className="grid max-w-xl gap-x-2 gap-y-2 rounded bg-white p-4 text-gray-700">
+      <div className="text-xl text-gray-800">Daily movers</div>
+      <div className="text-right">% pts</div>
+      {positiveChanges.slice(0, count).map((contract) => (
+        <>
+          <div className="line-clamp-2">
+            <SiteLink href={contractPath(contract)}>
+              {contract.question}
+            </SiteLink>
+          </div>
+          <ProbChange className="text-right" contract={contract} />
+        </>
+      ))}
+      <div className="col-span-2 my-2" />
+      {negativeChanges.slice(0, count).map((contract) => (
+        <>
+          <div className="line-clamp-2">
+            <SiteLink href={contractPath(contract)}>
+              {contract.question}
+            </SiteLink>
+          </div>
+          <ProbChange className="text-right" contract={contract} />
+        </>
+      ))}
+    </div>
+  )
+}
+
+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 <div className={clsx(className, color)}>{str}</div>
+}

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 }
+}

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<CPMMContract>
+
+export const getProbChangesNegative = (userId: string) =>
+  query(
+    contracts,
+    where('uniqueBettorIds', 'array-contains', userId),
+    where('probChanges.day', '<', 0),
+    orderBy('probChanges.day', 'asc'),
+    limit(10)
+  ) as Query<CPMMContract>

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 (
-                <SearchSection
-                  key={id}
-                  label={'Your bets'}
-                  sort={'prob-change-day'}
-                  user={user}
-                  yourBets
-                />
-              )
-            }
-            const sort = SORTS.find((sort) => sort.value === id)
-            if (sort)
-              return (
-                <SearchSection
-                  key={id}
-                  label={sort.label}
-                  sort={sort.value}
-                  user={user}
-                />
-              )
+          <>
+            <ProbChangeTable userId={user?.id} />
 
-            const group = groups.find((g) => g.id === id)
-            if (group)
-              return <GroupSection key={id} group={group} user={user} />
+            {visibleItems.map((item) => {
+              const { id } = item
+              if (id === 'your-bets') {
+                return (
+                  <SearchSection
+                    key={id}
+                    label={'Your bets'}
+                    sort={'prob-change-day'}
+                    user={user}
+                    yourBets
+                  />
+                )
+              }
+              const sort = SORTS.find((sort) => sort.value === id)
+              if (sort)
+                return (
+                  <SearchSection
+                    key={id}
+                    label={sort.label}
+                    sort={sort.value}
+                    user={user}
+                  />
+                )
 
-            return null
-          })
+              const group = groups.find((g) => g.id === id)
+              if (group)
+                return <GroupSection key={id} group={group} user={user} />
+
+              return null
+            })}
+          </>
         )}
       </Col>
       <button
@@ -151,6 +156,7 @@ function SearchSection(props: {
                   ? sort
                   : undefined
               }
+              showProbChange={sort === 'prob-change-day'}
               loadMore={loadMore}
             />
           ) : (