Convert useUserBets to react query

web/components/bets-list.tsx

@@ -72,7 +72,7 @@ export function BetsList(props: { user: User }) {
   const signedInUser = useUser()
   const isYourBets = user.id === signedInUser?.id
   const hideBetsBefore = isYourBets ? 0 : JUNE_1_2022
-  const userBets = useUserBets(user.id, { includeRedemptions: true })
+  const userBets = useUserBets(user.id)
   const [contractsById, setContractsById] = useState<
     Dictionary<Contract> | undefined
   >()
@@ -80,7 +80,10 @@ export function BetsList(props: { user: User }) {
   // Hide bets before 06-01-2022 if this isn't your own profile
   // NOTE: This means public profits also begin on 06-01-2022 as well.
   const bets = useMemo(
-    () => userBets?.filter((bet) => bet.createdTime >= (hideBetsBefore ?? 0)),
+    () =>
+      userBets?.filter(
+        (bet) => !bet.isAnte && bet.createdTime >= (hideBetsBefore ?? 0)
+      ),
     [userBets, hideBetsBefore]
   )
 

web/hooks/use-user-bets.ts

@@ -1,22 +1,21 @@
-import { uniq } from 'lodash'
+import { useFirestoreQueryData } from '@react-query-firebase/firestore'
 import { useEffect, useState } from 'react'
 import {
   Bet,
-  listenForUserBets,
+  getUserBetsQuery,
   listenForUserContractBets,
 } from 'web/lib/firebase/bets'
 
-export const useUserBets = (
-  userId: string | undefined,
-  options: { includeRedemptions: boolean }
-) => {
-  const [bets, setBets] = useState<Bet[] | undefined>(undefined)
-
-  useEffect(() => {
-    if (userId) return listenForUserBets(userId, setBets, options)
-  }, [userId])
-
-  return bets
+export const useUserBets = (userId: string) => {
+  const result = useFirestoreQueryData(
+    ['bets', userId],
+    getUserBetsQuery(userId),
+    { subscribe: true, includeMetadataChanges: true },
+    // Temporary workaround for react-query bug:
+    // https://github.com/invertase/react-query-firebase/issues/25
+    { cacheTime: 0 }
+  )
+  return result.data
 }
 
 export const useUserContractBets = (
@@ -33,36 +32,6 @@ export const useUserContractBets = (
   return bets
 }
 
-export const useUserBetContracts = (
-  userId: string | undefined,
-  options: { includeRedemptions: boolean }
-) => {
-  const [contractIds, setContractIds] = useState<string[] | undefined>()
-
-  useEffect(() => {
-    if (userId) {
-      const key = `user-bet-contractIds-${userId}`
-
-      const userBetContractJson = localStorage.getItem(key)
-      if (userBetContractJson) {
-        setContractIds(JSON.parse(userBetContractJson))
-      }
-
-      return listenForUserBets(
-        userId,
-        (bets) => {
-          const contractIds = uniq(bets.map((bet) => bet.contractId))
-          setContractIds(contractIds)
-          localStorage.setItem(key, JSON.stringify(contractIds))
-        },
-        options
-      )
-    }
-  }, [userId])
-
-  return contractIds
-}
-
 export const useGetUserBetContractIds = (userId: string | undefined) => {
   const [contractIds, setContractIds] = useState<string[] | undefined>()
 

web/lib/firebase/bets.ts

@@ -11,6 +11,7 @@ import {
   getDocs,
   getDoc,
   DocumentSnapshot,
+  Query,
 } from 'firebase/firestore'
 import { uniq } from 'lodash'
 
@@ -131,24 +132,12 @@ export async function getContractsOfUserBets(userId: string) {
   return filterDefined(contracts)
 }
 
-export function listenForUserBets(
-  userId: string,
-  setBets: (bets: Bet[]) => void,
-  options: { includeRedemptions: boolean }
-) {
-  const { includeRedemptions } = options
-  const userQuery = query(
+export function getUserBetsQuery(userId: string) {
+  return query(
     collectionGroup(db, 'bets'),
     where('userId', '==', userId),
     orderBy('createdTime', 'desc')
-  )
-  return listenForValues<Bet>(userQuery, (bets) => {
-    setBets(
-      bets.filter(
-        (bet) => (includeRedemptions || !bet.isRedemption) && !bet.isAnte
-      )
-    )
-  })
+  ) as Query<Bet>
 }
 
 export function listenForUserContractBets(