From 74a046f6d6c2d0995f7a21cad785ff49019f5f24 Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Wed, 21 Sep 2022 15:02:18 -0700
Subject: [PATCH] Make leaderboard code generic on entry type

---
 .../contract/contract-leaderboard.tsx         |  2 +-
 web/components/leaderboard.tsx                | 32 +++++++++++--------
 web/pages/group/[...slugs]/index.tsx          |  2 +-
 web/pages/leaderboards.tsx                    |  6 ++--
 4 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/web/components/contract/contract-leaderboard.tsx b/web/components/contract/contract-leaderboard.tsx
index ae3b8e56..25c4323a 100644
--- a/web/components/contract/contract-leaderboard.tsx
+++ b/web/components/contract/contract-leaderboard.tsx
@@ -49,7 +49,7 @@ export function ContractLeaderboard(props: {
   return users && users.length > 0 ? (
     <Leaderboard
       title={`🏅 Top ${BETTORS}`}
-      users={users || []}
+      entries={users || []}
       columns={[
         {
           header: 'Total profit',
diff --git a/web/components/leaderboard.tsx b/web/components/leaderboard.tsx
index a0670795..237dd002 100644
--- a/web/components/leaderboard.tsx
+++ b/web/components/leaderboard.tsx
@@ -1,28 +1,34 @@
 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 {
+  id: string
+  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 +43,19 @@ export function Leaderboard(props: {
               </tr>
             </thead>
             <tbody>
-              {users.map((user, index) => (
-                <tr key={user.id}>
+              {entries.map((entry, index) => (
+                <tr key={entry.id}>
                   <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>
               ))}
diff --git a/web/pages/group/[...slugs]/index.tsx b/web/pages/group/[...slugs]/index.tsx
index 3adb01c1..29f491cb 100644
--- a/web/pages/group/[...slugs]/index.tsx
+++ b/web/pages/group/[...slugs]/index.tsx
@@ -451,7 +451,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]) },
diff --git a/web/pages/leaderboards.tsx b/web/pages/leaderboards.tsx
index 4f1e9437..99e55ba4 100644
--- a/web/pages/leaderboards.tsx
+++ b/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',