Listen for contract updates when navigating from home to contract page. (#494)

web/components/answers/answers-panel.tsx

@@ -1,5 +1,5 @@
 import { sortBy, partition, sum, uniq } from 'lodash'
-import { useLayoutEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { FreeResponseContract } from 'common/contract'
 import { Col } from '../layout/col'
@@ -85,7 +85,7 @@ export function AnswersPanel(props: { contract: FreeResponseContract }) {
     })
   }
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     setChosenAnswers({})
   }, [resolveOption])
 

web/hooks/use-contract.ts

@@ -18,10 +18,12 @@ export const useContract = (contractId: string) => {
   return result.isLoading ? undefined : result.data
 }
 
-export const useContractWithPreload = (initial: Contract | null) => {
-  const [contract, setContract] = useStateCheckEquality<Contract | null>(
-    initial
-  )
+export const useContractWithPreload = (
+  initial: Contract | null | undefined
+) => {
+  const [contract, setContract] = useStateCheckEquality<
+    Contract | null | undefined
+  >(initial)
   const contractId = initial?.id
 
   useEffect(() => {

web/pages/home.tsx

@@ -9,6 +9,7 @@ import { ContractSearch } from 'web/components/contract-search'
 import { Contract } from 'common/contract'
 import { ContractPageContent } from './[username]/[contractSlug]'
 import { getContractFromSlug } from 'web/lib/firebase/contracts'
+import { useContractWithPreload } from 'web/hooks/use-contract'
 
 const Home = () => {
   const user = useUser()
@@ -104,7 +105,9 @@ const useContractPage = () => {
     if (contract) window.scrollTo(0, 0)
   }, [contract])
 
-  return [contract, setContract] as const
+  const updatedContract = useContractWithPreload(contract)
+
+  return [updatedContract, setContract] as const
 }
 
 export default Home