Simplify useContractWithPreload

web/hooks/use-contract.ts

@@ -1,9 +1,5 @@
 import { useEffect, useState } from 'react'
-import {
+import { Contract, listenForContract } from '../lib/firebase/contracts'
-  Contract,
-  getContractFromSlug,
-  listenForContract,
-} from '../lib/firebase/contracts'
 
 export const useContract = (contractId: string) => {
   const [contract, setContract] = useState<Contract | null | 'loading'>(
@@ -17,21 +13,13 @@ export const useContract = (contractId: string) => {
   return contract
 }
 
-export const useContractWithPreload = (
+export const useContractWithPreload = (initial: Contract | null) => {
-  slug: string,
-  initial: Contract | null
-) => {
   const [contract, setContract] = useState<Contract | null>(initial)
-  const [contractId, setContractId] = useState<string | undefined | null>(
+  const contractId = initial?.id
-    initial?.id
-  )
 
   useEffect(() => {
     if (contractId) return listenForContract(contractId, setContract)
-
+  }, [contractId])
-    if (contractId !== null && slug)
-      getContractFromSlug(slug).then((c) => setContractId(c?.id || null))
-  }, [contractId, slug])
 
   return contract
 }

web/pages/[username]/[contractSlug].tsx

@@ -96,7 +96,7 @@ export default function ContractPage(props: {
   }
   const user = useUser()
 
-  const contract = useContractWithPreload(props.slug, props.contract)
+  const contract = useContractWithPreload(props.contract)
   const { bets, comments } = props
 
   // Sort for now to see if bug is fixed.

web/pages/embed/[username]/[contractSlug].tsx

@@ -67,7 +67,7 @@ export default function ContractEmbedPage(props: {
     slug: '',
   }
 
-  const contract = useContractWithPreload(props.slug, props.contract)
+  const contract = useContractWithPreload(props.contract)
   const { bets } = props
 
   bets.sort((bet1, bet2) => bet1.createdTime - bet2.createdTime)
@@ -98,13 +98,13 @@ function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
 
   return (
     <Col className="w-full flex-1 bg-white">
-      <div className="flex flex-col relative pt-2" ref={setElem}>
+      <div className="relative flex flex-col pt-2" ref={setElem}>
         <SiteLink
-          className="absolute top-0 left-0 w-full h-full z-20"
+          className="absolute top-0 left-0 z-20 h-full w-full"
           href={href}
         />
 
-        <div className="px-3 text-xl md:text-2xl text-indigo-700">
+        <div className="px-3 text-xl text-indigo-700 md:text-2xl">
           <Linkify text={question} />
         </div>