Improve contract leaderboard computation (#918)

* Fix and clean up top comment stuff

* Make leaderboard code generic on entry type

* No need to look up users on contract leaderboard

web/components/contract/contract-leaderboard.tsx

@@ -3,9 +3,8 @@ import { resolvedPayout } from 'common/calculate'
 import { Contract } from 'common/contract'
 import { formatMoney } from 'common/util/format'
 import { groupBy, mapValues, sumBy, sortBy, keyBy } from 'lodash'
-import { useState, useMemo, useEffect } from 'react'
+import { memo } from 'react'
 import { useComments } from 'web/hooks/use-comments'
-import { listUsers, User } from 'web/lib/firebase/users'
 import { FeedBet } from '../feed/feed-bets'
 import { FeedComment } from '../feed/feed-comments'
 import { Spacer } from '../layout/spacer'
@@ -13,59 +12,48 @@ import { Leaderboard } from '../leaderboard'
 import { Title } from '../title'
 import { BETTORS } from 'common/user'
 
-export function ContractLeaderboard(props: {
+export const ContractLeaderboard = memo(function ContractLeaderboard(props: {
   contract: Contract
   bets: Bet[]
 }) {
   const { contract, bets } = props
-  const [users, setUsers] = useState<User[]>()
 
-  const { userProfits, top5Ids } = useMemo(() => {
-    // Create a map of userIds to total profits (including sales)
-    const openBets = bets.filter((bet) => !bet.isSold && !bet.sale)
-    const betsByUser = groupBy(openBets, 'userId')
-
-    const userProfits = mapValues(betsByUser, (bets) =>
-      sumBy(bets, (bet) => resolvedPayout(contract, bet) - bet.amount)
-    )
-    // Find the 5 users with the most profits
-    const top5Ids = Object.entries(userProfits)
-      .sort(([_i1, p1], [_i2, p2]) => p2 - p1)
-      .filter(([, p]) => p > 0)
-      .slice(0, 5)
-      .map(([id]) => id)
-    return { userProfits, top5Ids }
-  }, [contract, bets])
-
-  useEffect(() => {
-    if (top5Ids.length > 0) {
-      listUsers(top5Ids).then((users) => {
-        const sortedUsers = sortBy(users, (user) => -userProfits[user.id])
-        setUsers(sortedUsers)
-      })
+  // Create a map of userIds to total profits (including sales)
+  const openBets = bets.filter((bet) => !bet.isSold && !bet.sale)
+  const betsByUser = groupBy(openBets, 'userId')
+  const userProfits = mapValues(betsByUser, (bets) => {
+    return {
+      name: bets[0].userName,
+      username: bets[0].userUsername,
+      avatarUrl: bets[0].userAvatarUrl,
+      total: sumBy(bets, (bet) => resolvedPayout(contract, bet) - bet.amount),
     }
-  }, [userProfits, top5Ids])
+  })
+  // Find the 5 users with the most profits
+  const top5 = Object.values(userProfits)
+    .sort((p1, p2) => p2.total - p1.total)
+    .filter((p) => p.total > 0)
+    .slice(0, 5)
 
-  return users && users.length > 0 ? (
+  return top5 && top5.length > 0 ? (
     <Leaderboard
       title={`🏅 Top ${BETTORS}`}
-      users={users || []}
+      entries={top5 || []}
       columns={[
         {
           header: 'Total profit',
-          renderCell: (user) => formatMoney(userProfits[user.id] || 0),
+          renderCell: (entry) => formatMoney(entry.total),
         },
       ]}
       className="mt-12 max-w-sm"
     />
   ) : null
-}
+})
 
 export function ContractTopTrades(props: { contract: Contract; bets: Bet[] }) {
   const { contract, bets } = props
   // todo: this stuff should be calced in DB at resolve time
   const comments = useComments(contract.id)
-  const commentsById = keyBy(comments, 'id')
   const betsById = keyBy(bets, 'id')
 
   // If 'id2' is the sale of 'id1', both are logged with (id2 - id1) of profit
@@ -86,29 +74,23 @@ export function ContractTopTrades(props: { contract: Contract; bets: Bet[] }) {
   const topBetId = sortBy(bets, (b) => -profitById[b.id])[0]?.id
   const topBettor = betsById[topBetId]?.userName
 
-  // And also the commentId of the comment with the highest profit
-  const topCommentId = sortBy(
-    comments,
-    (c) => c.betId && -profitById[c.betId]
-  )[0]?.id
+  // And also the comment with the highest profit
+  const topComment = sortBy(comments, (c) => c.betId && -profitById[c.betId])[0]
 
   return (
     <div className="mt-12 max-w-sm">
-      {topCommentId && profitById[topCommentId] > 0 && (
+      {topComment && profitById[topComment.id] > 0 && (
         <>
           <Title text="💬 Proven correct" className="!mt-0" />
           <div className="relative flex items-start space-x-3 rounded-md bg-gray-50 px-2 py-4">
-            <FeedComment
-              contract={contract}
-              comment={commentsById[topCommentId]}
-            />
+            <FeedComment contract={contract} comment={topComment} />
           </div>
           <Spacer h={16} />
         </>
       )}
 
       {/* If they're the same, only show the comment; otherwise show both */}
-      {topBettor && topBetId !== topCommentId && profitById[topBetId] > 0 && (
+      {topBettor && topBetId !== topComment?.betId && profitById[topBetId] > 0 && (
         <>
           <Title text="💸 Best bet" className="!mt-0" />
           <div className="relative flex items-start space-x-3 rounded-md bg-gray-50 px-2 py-4">

web/components/leaderboard.tsx

@@ -1,28 +1,33 @@
 import clsx from 'clsx'
-import { User } from 'common/user'
 import { Avatar } from './avatar'
 import { Row } from './layout/row'
 import { SiteLink } from './site-link'
 import { Title } from './title'
 
-export function Leaderboard(props: {
+interface LeaderboardEntry {
+  username: string
+  name: string
+  avatarUrl?: string
+}
+
+export function Leaderboard<T extends LeaderboardEntry>(props: {
   title: string
-  users: User[]
+  entries: T[]
   columns: {
     header: string
-    renderCell: (user: User) => any
+    renderCell: (entry: T) => any
   }[]
   className?: string
   maxToShow?: number
 }) {
   // TODO: Ideally, highlight your own entry on the leaderboard
   const { title, columns, className } = props
-  const maxToShow = props.maxToShow ?? props.users.length
-  const users = props.users.slice(0, maxToShow)
+  const maxToShow = props.maxToShow ?? props.entries.length
+  const entries = props.entries.slice(0, maxToShow)
   return (
     <div className={clsx('w-full px-1', className)}>
       <Title text={title} className="!mt-0" />
-      {users.length === 0 ? (
+      {entries.length === 0 ? (
         <div className="ml-2 text-gray-500">None yet</div>
       ) : (
         <div className="overflow-x-auto">
@@ -37,19 +42,19 @@ export function Leaderboard(props: {
               </tr>
             </thead>
             <tbody>
-              {users.map((user, index) => (
-                <tr key={user.id}>
+              {entries.map((entry, index) => (
+                <tr key={index}>
                   <td>{index + 1}</td>
                   <td className="max-w-[190px]">
-                    <SiteLink className="relative" href={`/${user.username}`}>
+                    <SiteLink className="relative" href={`/${entry.username}`}>
                       <Row className="items-center gap-4">
-                        <Avatar avatarUrl={user.avatarUrl} size={8} />
-                        <div className="truncate">{user.name}</div>
+                        <Avatar avatarUrl={entry.avatarUrl} size={8} />
+                        <div className="truncate">{entry.name}</div>
                       </Row>
                     </SiteLink>
                   </td>
                   {columns.map((column) => (
-                    <td key={column.header}>{column.renderCell(user)}</td>
+                    <td key={column.header}>{column.renderCell(entry)}</td>
                   ))}
                 </tr>
               ))}

web/pages/group/[...slugs]/index.tsx

@@ -403,7 +403,7 @@ function GroupLeaderboard(props: {
   return (
     <Leaderboard
       className="max-w-xl"
-      users={topUsers.map((t) => t.user)}
+      entries={topUsers.map((t) => t.user)}
       title={title}
       columns={[
         { header, renderCell: (user) => formatMoney(scoresByUser[user.id]) },

web/pages/leaderboards.tsx

@@ -81,7 +81,7 @@ export default function Leaderboards(_props: {
         <Col className="mx-4 items-center gap-10 lg:flex-row">
           <Leaderboard
             title={`🏅 Top ${BETTORS}`}
-            users={topTraders}
+            entries={topTraders}
             columns={[
               {
                 header: 'Total profit',
@@ -92,7 +92,7 @@ export default function Leaderboards(_props: {
 
           <Leaderboard
             title="🏅 Top creators"
-            users={topCreators}
+            entries={topCreators}
             columns={[
               {
                 header: 'Total bet',
@@ -106,7 +106,7 @@ export default function Leaderboards(_props: {
           <Col className="mx-4 my-10 items-center gap-10 lg:mx-0 lg:w-1/2 lg:flex-row">
             <Leaderboard
               title="🏅 Top followed"
-              users={topFollowed}
+              entries={topFollowed}
               columns={[
                 {
                   header: 'Total followers',