manifold/web/hooks/use-contracts.ts
James Grugett 996b4795ea
Cache user bets tab with react query!! (#813)
* Convert useUserBets to react query

* Fix duplicate key warnings

* Fix react-query workaround to use refetchOnMount: always'

* Use react query for portfolio history

* Fix useUserBet workaround

* Script to back fill unique bettors in all contracts

* React query for user bet contracts, using uniqueBettorsId!

* Prefetch user bets / portfolio data
2022-08-28 18:03:00 -05:00

106 lines
2.8 KiB
TypeScript

import { useFirestoreQueryData } from '@react-query-firebase/firestore'
import { isEqual } from 'lodash'
import { useEffect, useRef, useState } from 'react'
import {
Contract,
listenForActiveContracts,
listenForContract,
listenForContracts,
listenForHotContracts,
listenForInactiveContracts,
listenForNewContracts,
getUserBetContractsQuery,
} from 'web/lib/firebase/contracts'
export const useContracts = () => {
const [contracts, setContracts] = useState<Contract[] | undefined>()
useEffect(() => {
return listenForContracts(setContracts)
}, [])
return contracts
}
export const useActiveContracts = () => {
const [activeContracts, setActiveContracts] = useState<
Contract[] | undefined
>()
const [newContracts, setNewContracts] = useState<Contract[] | undefined>()
useEffect(() => {
return listenForActiveContracts(setActiveContracts)
}, [])
useEffect(() => {
return listenForNewContracts(setNewContracts)
}, [])
if (!activeContracts || !newContracts) return undefined
return [...activeContracts, ...newContracts]
}
export const useInactiveContracts = () => {
const [contracts, setContracts] = useState<Contract[] | undefined>()
useEffect(() => {
return listenForInactiveContracts(setContracts)
}, [])
return contracts
}
export const useHotContracts = () => {
const [hotContracts, setHotContracts] = useState<Contract[] | undefined>()
useEffect(() => listenForHotContracts(setHotContracts), [])
return hotContracts
}
export const useUpdatedContracts = (contracts: Contract[] | undefined) => {
const [__, triggerUpdate] = useState(0)
const contractDict = useRef<{ [id: string]: Contract }>({})
useEffect(() => {
if (contracts === undefined) return
contractDict.current = Object.fromEntries(contracts.map((c) => [c.id, c]))
const disposes = contracts.map((contract) => {
const { id } = contract
return listenForContract(id, (contract) => {
const curr = contractDict.current[id]
if (!isEqual(curr, contract)) {
contractDict.current[id] = contract as Contract
triggerUpdate((n) => n + 1)
}
})
})
triggerUpdate((n) => n + 1)
return () => {
disposes.forEach((dispose) => dispose())
}
}, [!!contracts])
return contracts && Object.keys(contractDict.current).length > 0
? contracts.map((c) => contractDict.current[c.id])
: undefined
}
export const useUserBetContracts = (userId: string) => {
const result = useFirestoreQueryData(
['contracts', 'bets', userId],
getUserBetContractsQuery(userId),
{ subscribe: true, includeMetadataChanges: true },
// Temporary workaround for react-query bug:
// https://github.com/invertase/react-query-firebase/issues/25
{ refetchOnMount: 'always' }
)
return result.data
}