From f3d4827115f5c11c45876b4d6f0412431f227dff Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Mon, 13 Jun 2022 11:04:56 -0500
Subject: [PATCH] Listen for contract updates when navigating from home to
 contract page. (#494)

---
 web/components/answers/answers-panel.tsx |  4 ++--
 web/hooks/use-contract.ts                | 10 ++++++----
 web/pages/home.tsx                       |  5 ++++-
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/web/components/answers/answers-panel.tsx b/web/components/answers/answers-panel.tsx
index eb992fe4..e7bf4da8 100644
--- a/web/components/answers/answers-panel.tsx
+++ b/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])
 
diff --git a/web/hooks/use-contract.ts b/web/hooks/use-contract.ts
index c0a32eb8..9810d9d4 100644
--- a/web/hooks/use-contract.ts
+++ b/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(() => {
diff --git a/web/pages/home.tsx b/web/pages/home.tsx
index ccf9a585..20a58492 100644
--- a/web/pages/home.tsx
+++ b/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