Tidying some feed code up (#818)

* Clean up some markup & dead code

* Order comments in Firestore instead of on client

* Order bets in Firestore instead of on client

* Make indexes file up to date with production

firestore.indexes.json

@@ -26,9 +26,55 @@
       "collectionGroup": "bets",
       "queryScope": "COLLECTION_GROUP",
       "fields": [
+        {
+          "fieldPath": "isFilled",
+          "order": "ASCENDING"
+        },
         {
           "fieldPath": "userId",
           "order": "ASCENDING"
+        }
+      ]
+    },
+    {
+      "collectionGroup": "bets",
+      "queryScope": "COLLECTION_GROUP",
+      "fields": [
+        {
+          "fieldPath": "userId",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "createdTime",
+          "order": "DESCENDING"
+        }
+      ]
+    },
+    {
+      "collectionGroup": "bets",
+      "queryScope": "COLLECTION",
+      "fields": [
+        {
+          "fieldPath": "isCancelled",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "isFilled",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "createdTime",
+          "order": "DESCENDING"
+        }
+      ]
+    },
+    {
+      "collectionGroup": "challenges",
+      "queryScope": "COLLECTION_GROUP",
+      "fields": [
+        {
+          "fieldPath": "creatorId",
+          "order": "ASCENDING"
         },
         {
           "fieldPath": "createdTime",
@@ -54,6 +100,34 @@
         }
       ]
     },
+    {
+      "collectionGroup": "comments",
+      "queryScope": "COLLECTION_GROUP",
+      "fields": [
+        {
+          "fieldPath": "userId",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "createdTime",
+          "order": "ASCENDING"
+        }
+      ]
+    },
+    {
+      "collectionGroup": "comments",
+      "queryScope": "COLLECTION_GROUP",
+      "fields": [
+        {
+          "fieldPath": "userId",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "createdTime",
+          "order": "DESCENDING"
+        }
+      ]
+    },
     {
       "collectionGroup": "contracts",
       "queryScope": "COLLECTION",
@@ -82,6 +156,42 @@
         }
       ]
     },
+    {
+      "collectionGroup": "contracts",
+      "queryScope": "COLLECTION",
+      "fields": [
+        {
+          "fieldPath": "creatorId",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "isResolved",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "popularityScore",
+          "order": "DESCENDING"
+        }
+      ]
+    },
+    {
+      "collectionGroup": "contracts",
+      "queryScope": "COLLECTION",
+      "fields": [
+        {
+          "fieldPath": "groupSlugs",
+          "arrayConfig": "CONTAINS"
+        },
+        {
+          "fieldPath": "isResolved",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "popularityScore",
+          "order": "DESCENDING"
+        }
+      ]
+    },
     {
       "collectionGroup": "contracts",
       "queryScope": "COLLECTION",
@@ -128,6 +238,46 @@
         }
       ]
     },
+    {
+      "collectionGroup": "contracts",
+      "queryScope": "COLLECTION",
+      "fields": [
+        {
+          "fieldPath": "isResolved",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "visibility",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "closeTime",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "popularityScore",
+          "order": "DESCENDING"
+        }
+      ]
+    },
+    {
+      "collectionGroup": "contracts",
+      "queryScope": "COLLECTION",
+      "fields": [
+        {
+          "fieldPath": "isResolved",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "visibility",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "popularityScore",
+          "order": "DESCENDING"
+        }
+      ]
+    },
     {
       "collectionGroup": "contracts",
       "queryScope": "COLLECTION",

web/components/contract/contract-overview.tsx

@@ -126,7 +126,7 @@ export const ContractOverview = (props: {
       </Col>
       <div className={'my-1 md:my-2'}></div>
       {(isBinary || isPseudoNumeric) && (
-        <ContractProbGraph contract={contract} bets={bets} />
+        <ContractProbGraph contract={contract} bets={[...bets].reverse()} />
       )}{' '}
       {(outcomeType === 'FREE_RESPONSE' ||
         outcomeType === 'MULTIPLE_CHOICE') && (

web/components/feed/feed-liquidity.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import dayjs from 'dayjs'
 import { User } from 'common/user'
 import { useUser, useUserById } from 'web/hooks/use-user'
@@ -24,26 +25,23 @@ export function FeedLiquidity(props: {
   const isSelf = user?.id === userId
 
   return (
-    <>
+    <Row className="flex w-full gap-2 pt-3">
-      <Row className="flex w-full gap-2 pt-3">
+      {isSelf ? (
-        {isSelf ? (
+        <Avatar avatarUrl={user.avatarUrl} username={user.username} />
-          <Avatar avatarUrl={user.avatarUrl} username={user.username} />
+      ) : bettor ? (
-        ) : bettor ? (
+        <Avatar avatarUrl={bettor.avatarUrl} username={bettor.username} />
-          <Avatar avatarUrl={bettor.avatarUrl} username={bettor.username} />
+      ) : (
-        ) : (
+        <div className="relative px-1">
-          <div className="relative px-1">
+          <EmptyAvatar />
-            <EmptyAvatar />
-          </div>
-        )}
-        <div className={'min-w-0 flex-1 py-1.5'}>
-          <LiquidityStatusText
-            liquidity={liquidity}
-            isSelf={isSelf}
-            bettor={bettor}
-          />
         </div>
-      </Row>
+      )}
-    </>
+      <LiquidityStatusText
+        liquidity={liquidity}
+        isSelf={isSelf}
+        bettor={bettor}
+        className={'flex-1'}
+      />
+    </Row>
   )
 }
 
@@ -51,8 +49,9 @@ export function LiquidityStatusText(props: {
   liquidity: LiquidityProvision
   isSelf: boolean
   bettor?: User
+  className?: string
 }) {
-  const { liquidity, bettor, isSelf } = props
+  const { liquidity, bettor, isSelf, className } = props
   const { amount, createdTime } = liquidity
 
   // TODO: Withdrawn liquidity will never be shown, since liquidity amounts currently are zeroed out upon withdrawal.
@@ -60,7 +59,7 @@ export function LiquidityStatusText(props: {
   const money = formatMoney(Math.abs(amount))
 
   return (
-    <div className="text-sm text-gray-500">
+    <div className={clsx(className, 'text-sm text-gray-500')}>
       {bettor ? (
         <UserLink name={bettor.name} username={bettor.username} />
       ) : (

web/components/user-link.tsx

@@ -24,11 +24,10 @@ function shortenName(name: string) {
 export function UserLink(props: {
   name: string
   username: string
-  showUsername?: boolean
   className?: string
   short?: boolean
 }) {
-  const { name, username, showUsername, className, short } = props
+  const { name, username, className, short } = props
   const shortName = short ? shortenName(name) : name
   return (
     <SiteLink
@@ -36,7 +35,6 @@ export function UserLink(props: {
       className={clsx('z-10 truncate', className)}
     >
       {shortName}
-      {showUsername && ` (@${username})`}
     </SiteLink>
   )
 }

web/lib/firebase/bets.ts

@@ -28,9 +28,9 @@ function getBetsCollection(contractId: string) {
 }
 
 export async function listAllBets(contractId: string) {
-  const bets = await getValues<Bet>(getBetsCollection(contractId))
+  return await getValues<Bet>(
-  bets.sort((bet1, bet2) => bet1.createdTime - bet2.createdTime)
+    query(getBetsCollection(contractId), orderBy('createdTime', 'desc'))
-  return bets
+  )
 }
 
 const DAY_IN_MS = 24 * 60 * 60 * 1000
@@ -64,10 +64,10 @@ export function listenForBets(
   contractId: string,
   setBets: (bets: Bet[]) => void
 ) {
-  return listenForValues<Bet>(getBetsCollection(contractId), (bets) => {
+  return listenForValues<Bet>(
-    bets.sort((bet1, bet2) => bet1.createdTime - bet2.createdTime)
+    query(getBetsCollection(contractId), orderBy('createdTime', 'desc')),
-    setBets(bets)
+    setBets
-  })
+  )
 }
 
 export async function getUserBets(
@@ -147,12 +147,10 @@ export function listenForUserContractBets(
 ) {
   const betsQuery = query(
     collection(db, 'contracts', contractId, 'bets'),
-    where('userId', '==', userId)
+    where('userId', '==', userId),
+    orderBy('createdTime', 'desc')
   )
-  return listenForValues<Bet>(betsQuery, (bets) => {
+  return listenForValues<Bet>(betsQuery, setBets)
-    bets.sort((bet1, bet2) => bet1.createdTime - bet2.createdTime)
-    setBets(bets)
-  })
 }
 
 export function listenForUnfilledBets(
@@ -162,12 +160,10 @@ export function listenForUnfilledBets(
   const betsQuery = query(
     collection(db, 'contracts', contractId, 'bets'),
     where('isFilled', '==', false),
-    where('isCancelled', '==', false)
+    where('isCancelled', '==', false),
+    orderBy('createdTime', 'desc')
   )
-  return listenForValues<LimitBet>(betsQuery, (bets) => {
+  return listenForValues<LimitBet>(betsQuery, setBets)
-    bets.sort((bet1, bet2) => bet1.createdTime - bet2.createdTime)
-    setBets(bets)
-  })
 }
 
 export function withoutAnteBets(contract: Contract, bets?: Bet[]) {

web/lib/firebase/comments.ts

@@ -92,17 +92,15 @@ function getCommentsOnGroupCollection(groupId: string) {
 }
 
 export async function listAllComments(contractId: string) {
-  const comments = await getValues<Comment>(getCommentsCollection(contractId))
+  return await getValues<Comment>(
-  comments.sort((c1, c2) => c1.createdTime - c2.createdTime)
+    query(getCommentsCollection(contractId), orderBy('createdTime', 'desc'))
-  return comments
+  )
 }
 
 export async function listAllCommentsOnGroup(groupId: string) {
-  const comments = await getValues<GroupComment>(
+  return await getValues<GroupComment>(
-    getCommentsOnGroupCollection(groupId)
+    query(getCommentsOnGroupCollection(groupId), orderBy('createdTime', 'desc'))
   )
-  comments.sort((c1, c2) => c1.createdTime - c2.createdTime)
-  return comments
 }
 
 export function listenForCommentsOnContract(
@@ -110,23 +108,21 @@ export function listenForCommentsOnContract(
   setComments: (comments: ContractComment[]) => void
 ) {
   return listenForValues<ContractComment>(
-    getCommentsCollection(contractId),
+    query(getCommentsCollection(contractId), orderBy('createdTime', 'desc')),
-    (comments) => {
+    setComments
-      comments.sort((c1, c2) => c1.createdTime - c2.createdTime)
-      setComments(comments)
-    }
   )
 }
+
 export function listenForCommentsOnGroup(
   groupId: string,
   setComments: (comments: GroupComment[]) => void
 ) {
   return listenForValues<GroupComment>(
-    getCommentsOnGroupCollection(groupId),
+    query(
-    (comments) => {
+      getCommentsOnGroupCollection(groupId),
-      comments.sort((c1, c2) => c1.createdTime - c2.createdTime)
+      orderBy('createdTime', 'desc')
-      setComments(comments)
+    ),
-    }
+    setComments
   )
 }
 

web/pages/[username]/[contractSlug].tsx

@@ -168,9 +168,6 @@ export function ContractPageContent(
     [bets]
   )
 
-  // Sort for now to see if bug is fixed.
-  comments.sort((c1, c2) => c1.createdTime - c2.createdTime)
-
   const tips = useTipTxns({ contractId: contract.id })
 
   const [showConfetti, setShowConfetti] = useState(false)

web/pages/embed/[username]/[contractSlug].tsx

@@ -71,8 +71,6 @@ export default function ContractEmbedPage(props: {
   const contract = useContractWithPreload(props.contract)
   const { bets } = props
 
-  bets.sort((bet1, bet2) => bet1.createdTime - bet2.createdTime)
-
   if (!contract) {
     return <Custom404 />
   }