Revert "Fix "500 internal error" in large groups (#856)" (#871)

This reverts commit a6ed8c9228.

common/group.ts

@@ -12,22 +12,7 @@ export type Group = {
   aboutPostId?: string
   chatDisabled?: boolean
   mostRecentContractAddedTime?: number
-  /** @deprecated - members and contracts now stored as subcollections*/
-  memberIds?: string[] // Deprecated
-  /** @deprecated - members and contracts now stored as subcollections*/
-  contractIds?: string[] // Deprecated
-  cachedLeaderboard?: {
-    topTraders: {
-      userId: string
-      score: number
-    }[]
-    topCreators: {
-      userId: string
-      score: number
-    }[]
 }
-}
-
 export const MAX_GROUP_NAME_LENGTH = 75
 export const MAX_ABOUT_LENGTH = 140
 export const MAX_ID_LENGTH = 60

functions/src/update-metrics.ts

@@ -4,11 +4,9 @@ import { groupBy, isEmpty, keyBy, last, sortBy } from 'lodash'
 import { getValues, log, logMemory, writeAsync } from './utils'
 import { Bet } from '../../common/bet'
 import { Contract, CPMM } from '../../common/contract'
-
 import { PortfolioMetrics, User } from '../../common/user'
 import { DAY_MS } from '../../common/util/time'
 import { getLoanUpdates } from '../../common/loans'
-import { scoreTraders, scoreCreators } from '../../common/scoring'
 import {
   calculateCreatorVolume,
   calculateNewPortfolioMetrics,
@@ -17,7 +15,6 @@ import {
   computeVolume,
 } from '../../common/calculate-metrics'
 import { getProbability } from '../../common/calculate'
-import { Group } from 'common/group'
 
 const firestore = admin.firestore()
 
@@ -27,8 +24,7 @@ export const updateMetrics = functions
   .onRun(updateMetricsCore)
 
 export async function updateMetricsCore() {
-  const [users, contracts, bets, allPortfolioHistories, groups] =
+  const [users, contracts, bets, allPortfolioHistories] = await Promise.all([
-    await Promise.all([
     getValues<User>(firestore.collection('users')),
     getValues<Contract>(firestore.collection('contracts')),
     getValues<Bet>(firestore.collectionGroup('bets')),
@@ -37,19 +33,7 @@ export async function updateMetricsCore() {
         .collectionGroup('portfolioHistory')
         .where('timestamp', '>', Date.now() - 31 * DAY_MS) // so it includes just over a month ago
     ),
-      getValues<Group>(firestore.collection('groups')),
   ])
-
-  const contractsByGroup = await Promise.all(
-    groups.map((group) => {
-      return getValues(
-        firestore
-          .collection('groups')
-          .doc(group.id)
-          .collection('groupContracts')
-      )
-    })
-  )
   log(
     `Loaded ${users.length} users, ${contracts.length} contracts, and ${bets.length} bets.`
   )
@@ -178,40 +162,4 @@ export async function updateMetricsCore() {
     'set'
   )
   log(`Updated metrics for ${users.length} users.`)
-
-  const groupUpdates = groups.map((group, index) => {
-    const groupContractIds = contractsByGroup[index] as GroupContractDoc[]
-    const groupContracts = groupContractIds.map(
-      (e) => contractsById[e.contractId]
-    )
-    const bets = groupContracts.map((e) => {
-      return betsByContract[e.id] ?? []
-    })
-
-    const creatorScores = scoreCreators(groupContracts)
-    const traderScores = scoreTraders(groupContracts, bets)
-
-    const topTraderScores = topUserScores(traderScores)
-    const topCreatorScores = topUserScores(creatorScores)
-
-    return {
-      doc: firestore.collection('groups').doc(group.id),
-      fields: {
-        cachedLeaderboard: {
-          topTraders: topTraderScores,
-          topCreators: topCreatorScores,
-        },
-      },
 }
-  })
-  await writeAsync(firestore, groupUpdates)
-}
-
-const topUserScores = (scores: { [userId: string]: number }) => {
-  const top50 = Object.entries(scores)
-    .sort(([, scoreA], [, scoreB]) => scoreB - scoreA)
-    .slice(0, 50)
-  return top50.map(([userId, score]) => ({ userId, score }))
-}
-
-type GroupContractDoc = { contractId: string; createdTime: number }

web/lib/firebase/groups.ts

@@ -24,6 +24,7 @@ import { Contract } from 'common/contract'
 import { getContractFromId, updateContract } from 'web/lib/firebase/contracts'
 import { db } from 'web/lib/firebase/init'
 import { filterDefined } from 'common/util/array'
+import { getUser } from 'web/lib/firebase/users'
 
 export const groups = coll<Group>('groups')
 export const groupMembers = (groupId: string) =>
@@ -252,7 +253,7 @@ export function getGroupLinkToDisplay(contract: Contract) {
   return groupToDisplay
 }
 
-export async function listMemberIds(group: Group) {
+export async function listMembers(group: Group) {
   const members = await getValues<GroupMemberDoc>(groupMembers(group.id))
-  return members.map((m) => m.userId)
+  return await Promise.all(members.map((m) => m.userId).map(getUser))
 }

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

@@ -1,28 +1,28 @@
 import React, { useState } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import { debounce, sortBy, take } from 'lodash'
+import { SearchIcon } from '@heroicons/react/outline'
 import { toast } from 'react-hot-toast'
 
 import { Group, GROUP_CHAT_SLUG } from 'common/group'
 import { Page } from 'web/components/page'
+import { listAllBets } from 'web/lib/firebase/bets'
 import { Contract, listContractsByGroupSlug } from 'web/lib/firebase/contracts'
 import {
   addContractToGroup,
   getGroupBySlug,
   groupPath,
   joinGroup,
-  listMemberIds,
+  listMembers,
   updateGroup,
 } from 'web/lib/firebase/groups'
 import { Row } from 'web/components/layout/row'
 import { firebaseLogin, getUser, User } from 'web/lib/firebase/users'
 import { Col } from 'web/components/layout/col'
 import { useUser } from 'web/hooks/use-user'
-import {
+import { useGroup, useGroupContractIds, useMembers } from 'web/hooks/use-group'
-  useGroup,
+import { scoreCreators, scoreTraders } from 'common/scoring'
-  useGroupContractIds,
-  useMemberIds,
-} from 'web/hooks/use-group'
 import { Leaderboard } from 'web/components/leaderboard'
 import { formatMoney } from 'common/util/format'
 import { EditGroupButton } from 'web/components/groups/edit-group-button'
@@ -35,7 +35,9 @@ import { LoadingIndicator } from 'web/components/loading-indicator'
 import { Modal } from 'web/components/layout/modal'
 import { ChoicesToggleGroup } from 'web/components/choices-toggle-group'
 import { ContractSearch } from 'web/components/contract-search'
+import { FollowList } from 'web/components/follow-list'
 import { JoinOrLeaveGroupButton } from 'web/components/groups/groups-button'
+import { searchInAny } from 'common/util/parse'
 import { CopyLinkButton } from 'web/components/copy-link-button'
 import { ENV_CONFIG } from 'common/envs/constants'
 import { useSaveReferral } from 'web/hooks/use-save-referral'
@@ -57,7 +59,7 @@ export async function getStaticPropz(props: { params: { slugs: string[] } }) {
   const { slugs } = props.params
 
   const group = await getGroupBySlug(slugs[0])
-  const memberIds = group && (await listMemberIds(group))
+  const members = group && (await listMembers(group))
   const creatorPromise = group ? getUser(group.creatorId) : null
 
   const contracts =
@@ -69,15 +71,19 @@ export async function getStaticPropz(props: { params: { slugs: string[] } }) {
       : 'open'
   const aboutPost =
     group && group.aboutPostId != null && (await getPost(group.aboutPostId))
+  const bets = await Promise.all(
+    contracts.map((contract: Contract) => listAllBets(contract.id))
+  )
   const messages = group && (await listAllCommentsOnGroup(group.id))
 
-  const cachedTopTraderIds =
+  const creatorScores = scoreCreators(contracts)
-    (group && group.cachedLeaderboard?.topTraders) ?? []
+  const traderScores = scoreTraders(contracts, bets)
-  const cachedTopCreatorIds =
+  const [topCreators, topTraders] =
-    (group && group.cachedLeaderboard?.topCreators) ?? []
+    (members && [
-  const topTraders = await toTopUsers(cachedTopTraderIds)
+      toTopUsers(creatorScores, members),
-
+      toTopUsers(traderScores, members),
-  const topCreators = await toTopUsers(cachedTopCreatorIds)
+    ]) ??
+    []
 
   const creator = await creatorPromise
   // Only count unresolved markets
@@ -87,9 +93,11 @@ export async function getStaticPropz(props: { params: { slugs: string[] } }) {
     props: {
       contractsCount,
       group,
-      memberIds,
+      members,
       creator,
+      traderScores,
       topTraders,
+      creatorScores,
       topCreators,
       messages,
       aboutPost,
@@ -99,6 +107,19 @@ export async function getStaticPropz(props: { params: { slugs: string[] } }) {
     revalidate: 60, // regenerate after a minute
   }
 }
+
+function toTopUsers(userScores: { [userId: string]: number }, users: User[]) {
+  const topUserPairs = take(
+    sortBy(Object.entries(userScores), ([_, score]) => -1 * score),
+    10
+  ).filter(([_, score]) => score >= 0.5)
+
+  const topUsers = topUserPairs.map(
+    ([userId]) => users.filter((user) => user.id === userId)[0]
+  )
+  return topUsers.filter((user) => user)
+}
+
 export async function getStaticPaths() {
   return { paths: [], fallback: 'blocking' }
 }
@@ -113,10 +134,12 @@ const groupSubpages = [
 export default function GroupPage(props: {
   contractsCount: number
   group: Group | null
-  memberIds: string[]
+  members: User[]
   creator: User
-  topTraders: { user: User; score: number }[]
+  traderScores: { [userId: string]: number }
-  topCreators: { user: User; score: number }[]
+  topTraders: User[]
+  creatorScores: { [userId: string]: number }
+  topCreators: User[]
   messages: GroupComment[]
   aboutPost: Post
   suggestedFilter: 'open' | 'all'
@@ -124,15 +147,24 @@ export default function GroupPage(props: {
   props = usePropz(props, getStaticPropz) ?? {
     contractsCount: 0,
     group: null,
-    memberIds: [],
+    members: [],
     creator: null,
+    traderScores: {},
     topTraders: [],
+    creatorScores: {},
     topCreators: [],
     messages: [],
     suggestedFilter: 'open',
   }
-  const { contractsCount, creator, topTraders, topCreators, suggestedFilter } =
+  const {
-    props
+    contractsCount,
+    creator,
+    traderScores,
+    topTraders,
+    creatorScores,
+    topCreators,
+    suggestedFilter,
+  } = props
 
   const router = useRouter()
   const { slugs } = router.query as { slugs: string[] }
@@ -143,7 +175,7 @@ export default function GroupPage(props: {
 
   const user = useUser()
   const isAdmin = useAdmin()
-  const memberIds = useMemberIds(group?.id ?? null) ?? props.memberIds
+  const members = useMembers(group?.id) ?? props.members
 
   useSaveReferral(user, {
     defaultReferrerUsername: creator.username,
@@ -154,25 +186,18 @@ export default function GroupPage(props: {
     return <Custom404 />
   }
   const isCreator = user && group && user.id === group.creatorId
-  const isMember = user && memberIds.includes(user.id)
+  const isMember = user && members.map((m) => m.id).includes(user.id)
-  const maxLeaderboardSize = 50
 
   const leaderboard = (
     <Col>
-      <div className="mt-4 flex flex-col gap-8 px-4 md:flex-row">
+      <GroupLeaderboards
-        <GroupLeaderboard
+        traderScores={traderScores}
-          topUsers={topTraders}
+        creatorScores={creatorScores}
-          title="🏅 Top traders"
+        topTraders={topTraders}
-          header="Profit"
+        topCreators={topCreators}
-          maxToShow={maxLeaderboardSize}
+        members={members}
+        user={user}
       />
-        <GroupLeaderboard
-          topUsers={topCreators}
-          title="🏅 Top creators"
-          header="Market volume"
-          maxToShow={maxLeaderboardSize}
-        />
-      </div>
     </Col>
   )
 
@@ -191,7 +216,7 @@ export default function GroupPage(props: {
         creator={creator}
         isCreator={!!isCreator}
         user={user}
-        memberIds={memberIds}
+        members={members}
       />
     </Col>
   )
@@ -287,9 +312,9 @@ function GroupOverview(props: {
   creator: User
   user: User | null | undefined
   isCreator: boolean
-  memberIds: string[]
+  members: User[]
 }) {
-  const { group, creator, isCreator, user, memberIds } = props
+  const { group, creator, isCreator, user, members } = props
   const anyoneCanJoinChoices: { [key: string]: string } = {
     Closed: 'false',
     Open: 'true',
@@ -308,7 +333,7 @@ function GroupOverview(props: {
   const shareUrl = `https://${ENV_CONFIG.domain}${groupPath(
     group.slug
   )}${postFix}`
-  const isMember = user ? memberIds.includes(user.id) : false
+  const isMember = user ? members.map((m) => m.id).includes(user.id) : false
 
   return (
     <>
@@ -374,37 +399,155 @@ function GroupOverview(props: {
             />
           </Col>
         )}
+
+        <Col className={'mt-2'}>
+          <div className="mb-2 text-lg">Members</div>
+          <GroupMemberSearch members={members} group={group} />
+        </Col>
       </Col>
     </>
   )
 }
 
-function GroupLeaderboard(props: {
+function SearchBar(props: { setQuery: (query: string) => void }) {
-  topUsers: { user: User; score: number }[]
+  const { setQuery } = props
+  const debouncedQuery = debounce(setQuery, 50)
+  return (
+    <div className={'relative'}>
+      <SearchIcon className={'absolute left-5 top-3.5 h-5 w-5 text-gray-500'} />
+      <input
+        type="text"
+        onChange={(e) => debouncedQuery(e.target.value)}
+        placeholder="Find a member"
+        className="input input-bordered mb-4 w-full pl-12"
+      />
+    </div>
+  )
+}
+
+function GroupMemberSearch(props: { members: User[]; group: Group }) {
+  const [query, setQuery] = useState('')
+  const { group } = props
+  let { members } = props
+
+  // Use static members on load, but also listen to member changes:
+  const listenToMembers = useMembers(group.id)
+  if (listenToMembers) {
+    members = listenToMembers
+  }
+
+  // TODO use find-active-contracts to sort by?
+  const matches = sortBy(members, [(member) => member.name]).filter((m) =>
+    searchInAny(query, m.name, m.username)
+  )
+  const matchLimit = 25
+
+  return (
+    <div>
+      <SearchBar setQuery={setQuery} />
+      <Col className={'gap-2'}>
+        {matches.length > 0 && (
+          <FollowList userIds={matches.slice(0, matchLimit).map((m) => m.id)} />
+        )}
+        {matches.length > 25 && (
+          <div className={'text-center'}>
+            And {matches.length - matchLimit} more...
+          </div>
+        )}
+      </Col>
+    </div>
+  )
+}
+
+function SortedLeaderboard(props: {
+  users: User[]
+  scoreFunction: (user: User) => number
   title: string
-  maxToShow: number
   header: string
+  maxToShow?: number
 }) {
-  const { topUsers, title, maxToShow, header } = props
+  const { users, scoreFunction, title, header, maxToShow } = props
-
+  const sortedUsers = users.sort((a, b) => scoreFunction(b) - scoreFunction(a))
-  const scoresByUser = topUsers.reduce((acc, { user, score }) => {
-    acc[user.id] = score
-    return acc
-  }, {} as { [key: string]: number })
-
   return (
     <Leaderboard
       className="max-w-xl"
-      users={topUsers.map((t) => t.user)}
+      users={sortedUsers}
       title={title}
       columns={[
-        { header, renderCell: (user) => formatMoney(scoresByUser[user.id]) },
+        { header, renderCell: (user) => formatMoney(scoreFunction(user)) },
       ]}
       maxToShow={maxToShow}
     />
   )
 }
 
+function GroupLeaderboards(props: {
+  traderScores: { [userId: string]: number }
+  creatorScores: { [userId: string]: number }
+  topTraders: User[]
+  topCreators: User[]
+  members: User[]
+  user: User | null | undefined
+}) {
+  const { traderScores, creatorScores, members, topTraders, topCreators } =
+    props
+  const maxToShow = 50
+  // Consider hiding M$0
+  // If it's just one member (curator), show all bettors, otherwise just show members
+  return (
+    <Col>
+      <div className="mt-4 flex flex-col gap-8 px-4 md:flex-row">
+        {members.length > 1 ? (
+          <>
+            <SortedLeaderboard
+              users={members}
+              scoreFunction={(user) => traderScores[user.id] ?? 0}
+              title="🏅 Top traders"
+              header="Profit"
+              maxToShow={maxToShow}
+            />
+            <SortedLeaderboard
+              users={members}
+              scoreFunction={(user) => creatorScores[user.id] ?? 0}
+              title="🏅 Top creators"
+              header="Market volume"
+              maxToShow={maxToShow}
+            />
+          </>
+        ) : (
+          <>
+            <Leaderboard
+              className="max-w-xl"
+              title="🏅 Top traders"
+              users={topTraders}
+              columns={[
+                {
+                  header: 'Profit',
+                  renderCell: (user) => formatMoney(traderScores[user.id] ?? 0),
+                },
+              ]}
+              maxToShow={maxToShow}
+            />
+            <Leaderboard
+              className="max-w-xl"
+              title="🏅 Top creators"
+              users={topCreators}
+              columns={[
+                {
+                  header: 'Market volume',
+                  renderCell: (user) =>
+                    formatMoney(creatorScores[user.id] ?? 0),
+                },
+              ]}
+              maxToShow={maxToShow}
+            />
+          </>
+        )}
+      </div>
+    </Col>
+  )
+}
+
 function AddContractButton(props: { group: Group; user: User }) {
   const { group, user } = props
   const [open, setOpen] = useState(false)
@@ -541,15 +684,3 @@ function JoinGroupButton(props: {
     </div>
   )
 }
-
-const toTopUsers = async (
-  cachedUserIds: { userId: string; score: number }[]
-): Promise<{ user: User; score: number }[]> =>
-  (
-    await Promise.all(
-      cachedUserIds.map(async (e) => {
-        const user = await getUser(e.userId)
-        return { user, score: e.score ?? 0 }
-      })
-    )
-  ).filter((e) => e.user != null)