From 9b50d6731375b6aa10b3c401a72e2c169ade9e0b Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Thu, 10 Feb 2022 14:36:15 -0600
Subject: [PATCH] Render graph with bets from static props immediately

---
 web/components/contract-overview.tsx   |  2 +-
 web/components/contract-prob-graph.tsx | 22 +++++++++++-----------
 web/hooks/use-bets.ts                  | 20 +++++++++++++++++++-
 3 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/web/components/contract-overview.tsx b/web/components/contract-overview.tsx
index 3528a727..abee76f2 100644
--- a/web/components/contract-overview.tsx
+++ b/web/components/contract-overview.tsx
@@ -86,7 +86,7 @@ export const ContractOverview = (props: {
 
       <Spacer h={4} />
 
-      <ContractProbGraph contract={contract} />
+      <ContractProbGraph contract={contract} bets={bets} />
 
       <Row className="hidden sm:flex justify-between items-center mt-6 ml-4 gap-4">
         {folds.length === 0 ? (
diff --git a/web/components/contract-prob-graph.tsx b/web/components/contract-prob-graph.tsx
index fceffd97..13e6c48d 100644
--- a/web/components/contract-prob-graph.tsx
+++ b/web/components/contract-prob-graph.tsx
@@ -1,26 +1,26 @@
 import { DatumValue } from '@nivo/core'
 import { ResponsiveLine } from '@nivo/line'
 import dayjs from 'dayjs'
+import { Bet } from '../../common/bet'
 import { getProbability } from '../../common/calculate'
-import { useBets } from '../hooks/use-bets'
+import { useBetsWithoutAntes } from '../hooks/use-bets'
 import { useWindowSize } from '../hooks/use-window-size'
-import { withoutAnteBets } from '../lib/firebase/bets'
 import { Contract } from '../lib/firebase/contracts'
 
-export function ContractProbGraph(props: { contract: Contract }) {
+export function ContractProbGraph(props: { contract: Contract; bets: Bet[] }) {
   const { contract } = props
-  const { id, phantomShares, resolutionTime, closeTime } = contract
+  const { phantomShares, resolutionTime, closeTime } = contract
 
-  let bets = useBets(id) ?? []
-  bets = withoutAnteBets(contract, bets)
+  const bets = useBetsWithoutAntes(contract, props.bets)
 
   const startProb = getProbability(phantomShares)
 
-  const times = [
-    contract.createdTime,
-    ...bets.map((bet) => bet.createdTime),
-  ].map((time) => new Date(time))
-  const probs = [startProb, ...bets.map((bet) => bet.probAfter)]
+  const times = bets
+    ? [contract.createdTime, ...bets.map((bet) => bet.createdTime)].map(
+        (time) => new Date(time)
+      )
+    : []
+  const probs = bets ? [startProb, ...bets.map((bet) => bet.probAfter)] : []
 
   const isClosed = !!closeTime && Date.now() > closeTime
   const latestTime = dayjs(
diff --git a/web/hooks/use-bets.ts b/web/hooks/use-bets.ts
index 6ab9eb21..4d892ff6 100644
--- a/web/hooks/use-bets.ts
+++ b/web/hooks/use-bets.ts
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
-import { Bet, listenForBets } from '../lib/firebase/bets'
+import { Contract } from '../../common/contract'
+import { Bet, listenForBets, withoutAnteBets } from '../lib/firebase/bets'
 
 export const useBets = (contractId: string) => {
   const [bets, setBets] = useState<Bet[] | undefined>()
@@ -10,3 +11,20 @@ export const useBets = (contractId: string) => {
 
   return bets
 }
+
+export const useBetsWithoutAntes = (
+  contract: Contract,
+  initialBets?: Bet[]
+) => {
+  const [bets, setBets] = useState<Bet[] | undefined>(
+    withoutAnteBets(contract, initialBets)
+  )
+
+  useEffect(() => {
+    return listenForBets(contract.id, (bets) => {
+      setBets(withoutAnteBets(contract, bets))
+    })
+  }, [contract])
+
+  return bets
+}