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
2022-08-30 20:28:30 -07:00 · 2022-08-30 20:28:30 -07:00 · 7dddff52b8
commit 7dddff52b8
parent 40f1c09002
8 changed files with 198 additions and 64 deletions
--- a/firestore.indexes.json
+++ b/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",
--- a/web/components/contract/contract-overview.tsx
+++ b/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') && (
--- a/web/components/feed/feed-liquidity.tsx
+++ b/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">
-        {isSelf ? (
-          <Avatar avatarUrl={user.avatarUrl} username={user.username} />
-        ) : bettor ? (
-          <Avatar avatarUrl={bettor.avatarUrl} username={bettor.username} />
-        ) : (
-          <div className="relative px-1">
-            <EmptyAvatar />
-          </div>
-        )}
-        <div className={'min-w-0 flex-1 py-1.5'}>
-          <LiquidityStatusText
-            liquidity={liquidity}
-            isSelf={isSelf}
-            bettor={bettor}
-          />
+    <Row className="flex w-full gap-2 pt-3">
+      {isSelf ? (
+        <Avatar avatarUrl={user.avatarUrl} username={user.username} />
+      ) : bettor ? (
+        <Avatar avatarUrl={bettor.avatarUrl} username={bettor.username} />
+      ) : (
+        <div className="relative px-1">
+          <EmptyAvatar />
        </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} />
      ) : (
--- a/web/components/user-link.tsx
+++ b/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>
  )
 }
--- a/web/lib/firebase/bets.ts
+++ b/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))
-  bets.sort((bet1, bet2) => bet1.createdTime - bet2.createdTime)
-  return bets
+  return await getValues<Bet>(
+    query(getBetsCollection(contractId), orderBy('createdTime', 'desc'))
+  )
 }

 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) => {
-    bets.sort((bet1, bet2) => bet1.createdTime - bet2.createdTime)
-    setBets(bets)
-  })
+  return listenForValues<Bet>(
+    query(getBetsCollection(contractId), orderBy('createdTime', 'desc')),
+    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) => {
-    bets.sort((bet1, bet2) => bet1.createdTime - bet2.createdTime)
-    setBets(bets)
-  })
+  return listenForValues<Bet>(betsQuery, setBets)
 }

 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) => {
-    bets.sort((bet1, bet2) => bet1.createdTime - bet2.createdTime)
-    setBets(bets)
-  })
+  return listenForValues<LimitBet>(betsQuery, setBets)
 }

 export function withoutAnteBets(contract: Contract, bets?: Bet[]) {
--- a/web/lib/firebase/comments.ts
+++ b/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))
-  comments.sort((c1, c2) => c1.createdTime - c2.createdTime)
-  return comments
+  return await getValues<Comment>(
+    query(getCommentsCollection(contractId), orderBy('createdTime', 'desc'))
+  )
 }

 export async function listAllCommentsOnGroup(groupId: string) {
-  const comments = await getValues<GroupComment>(
-    getCommentsOnGroupCollection(groupId)
+  return await getValues<GroupComment>(
+    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),
-    (comments) => {
-      comments.sort((c1, c2) => c1.createdTime - c2.createdTime)
-      setComments(comments)
-    }
+    query(getCommentsCollection(contractId), orderBy('createdTime', 'desc')),
+    setComments
  )
 }
+
 export function listenForCommentsOnGroup(
  groupId: string,
  setComments: (comments: GroupComment[]) => void
 ) {
  return listenForValues<GroupComment>(
-    getCommentsOnGroupCollection(groupId),
-    (comments) => {
-      comments.sort((c1, c2) => c1.createdTime - c2.createdTime)
-      setComments(comments)
-    }
+    query(
+      getCommentsOnGroupCollection(groupId),
+      orderBy('createdTime', 'desc')
+    ),
+    setComments
  )
 }

--- a/web/pages/[username]/[contractSlug].tsx
+++ b/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)
--- a/web/pages/embed/[username]/[contractSlug].tsx
+++ b/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 />
  }