From d1c6e5bc911546f03e207d2557073f0fd0c2f110 Mon Sep 17 00:00:00 2001
From: jahooma <jahooma@gmail.com>
Date: Sun, 9 Jan 2022 14:51:20 -0600
Subject: [PATCH] Change useContracts to return undefined instead of 'loading'.
 Serve static props on tag page

---
 web/hooks/use-contracts.ts |  2 +-
 web/pages/markets.tsx      | 18 ++++++--------
 web/pages/tag/[tag].tsx    | 50 +++++++++++++++++++++++---------------
 3 files changed, 39 insertions(+), 31 deletions(-)

diff --git a/web/hooks/use-contracts.ts b/web/hooks/use-contracts.ts
index c71f5cb8..88fc8f80 100644
--- a/web/hooks/use-contracts.ts
+++ b/web/hooks/use-contracts.ts
@@ -7,7 +7,7 @@ import {
 } from '../lib/firebase/contracts'
 
 export const useContracts = () => {
-  const [contracts, setContracts] = useState<Contract[] | 'loading'>('loading')
+  const [contracts, setContracts] = useState<Contract[] | undefined>()
 
   useEffect(() => {
     return listenForContracts(setContracts)
diff --git a/web/pages/markets.tsx b/web/pages/markets.tsx
index e03e3b73..31e6e64d 100644
--- a/web/pages/markets.tsx
+++ b/web/pages/markets.tsx
@@ -36,7 +36,7 @@ export default function Markets(props: {
   const { query, setQuery, sort, setSort } = useQueryAndSortParams()
 
   const readyHotContracts = hotContracts ?? props.hotContracts
-  const readyContracts = contracts === 'loading' ? props.contracts : contracts
+  const readyContracts = contracts ?? props.contracts
 
   return (
     <Page>
@@ -47,15 +47,13 @@ export default function Markets(props: {
 
       <Spacer h={10} />
 
-      {(props.contracts || contracts !== 'loading') && (
-        <SearchableGrid
-          contracts={readyContracts}
-          query={query}
-          setQuery={setQuery}
-          sort={sort}
-          setSort={setSort}
-        />
-      )}
+      <SearchableGrid
+        contracts={readyContracts}
+        query={query}
+        setQuery={setQuery}
+        sort={sort}
+        setSort={setSort}
+      />
     </Page>
   )
 }
diff --git a/web/pages/tag/[tag].tsx b/web/pages/tag/[tag].tsx
index ae56f1c5..f226783c 100644
--- a/web/pages/tag/[tag].tsx
+++ b/web/pages/tag/[tag].tsx
@@ -4,20 +4,34 @@ import { Page } from '../../components/page'
 import { Title } from '../../components/title'
 import { useContracts } from '../../hooks/use-contracts'
 import { useQueryAndSortParams } from '../../hooks/use-sort-and-query-params'
+import { Contract, listAllContracts } from '../../lib/firebase/contracts'
 
-export default function TagPage() {
+export async function getStaticProps() {
+  const contracts = await listAllContracts().catch((_) => [])
+  return {
+    props: {
+      contracts,
+    },
+
+    revalidate: 60, // regenerate after a minute
+  }
+}
+
+export async function getStaticPaths() {
+  return { paths: [], fallback: 'blocking' }
+}
+
+export default function TagPage(props: { contracts: Contract[] }) {
   const router = useRouter()
   const { tag } = router.query as { tag: string }
 
-  let contracts = useContracts()
+  const contracts = useContracts()
 
-  if (tag && contracts !== 'loading') {
-    contracts = contracts.filter(
-      (contract) =>
-        contract.description.toLowerCase().includes(`#${tag.toLowerCase()}`) ||
-        contract.question.toLowerCase().includes(`#${tag.toLowerCase()}`)
-    )
-  }
+  const taggedContracts = (contracts ?? props.contracts).filter(
+    (contract) =>
+      contract.description.toLowerCase().includes(`#${tag.toLowerCase()}`) ||
+      contract.question.toLowerCase().includes(`#${tag.toLowerCase()}`)
+  )
 
   const { query, setQuery, sort, setSort } = useQueryAndSortParams({
     defaultSort: 'most-traded',
@@ -26,17 +40,13 @@ export default function TagPage() {
   return (
     <Page>
       <Title text={`#${tag}`} />
-      {contracts === 'loading' ? (
-        <></>
-      ) : (
-        <SearchableGrid
-          contracts={contracts}
-          query={query}
-          setQuery={setQuery}
-          sort={sort}
-          setSort={setSort}
-        />
-      )}
+      <SearchableGrid
+        contracts={taggedContracts}
+        query={query}
+        setQuery={setQuery}
+        sort={sort}
+        setSort={setSort}
+      />
     </Page>
   )
 }