Quick back from clicking contract card on home! Preserves search state.

web/components/contract-search.tsx

@@ -56,8 +56,9 @@ export function ContractSearch(props: {
     category?: string
   }
   showCategorySelector: boolean
+  onContractClick?: (contract: Contract) => void
 }) {
-  const { querySortOptions, additionalFilter, showCategorySelector } = props
+  const { querySortOptions, additionalFilter, showCategorySelector, onContractClick } = props
 
   const user = useUser()
   const follows = useFollows(user?.id)
@@ -151,6 +152,7 @@ export function ContractSearch(props: {
             category: category === 'following' ? 'all' : category,
             ...additionalFilter,
           }}
+          onContractClick={onContractClick}
         />
       )}
     </InstantSearch>
@@ -168,8 +170,9 @@ export function ContractSearchInner(props: {
     tag?: string
     category?: string
   }
+  onContractClick?: (contract: Contract) => void
 }) {
-  const { querySortOptions, filter, additionalFilter } = props
+  const { querySortOptions, filter, additionalFilter, onContractClick } = props
   const { initialQuery } = useInitialQueryAndSort(querySortOptions)
 
   const { query, setQuery, setSort } = useUpdateQueryAndSort({
@@ -235,6 +238,7 @@ export function ContractSearchInner(props: {
       loadMore={showMore}
       hasMore={!isLastPage}
       showCloseTime={index.endsWith('close-date')}
+      onContractClick={onContractClick}
     />
   )
 }

web/components/contract/contract-card.tsx

@@ -28,8 +28,9 @@ export function ContractCard(props: {
   showHotVolume?: boolean
   showCloseTime?: boolean
   className?: string
+  onClick?: () => void
 }) {
-  const { showHotVolume, showCloseTime, className } = props
+  const { showHotVolume, showCloseTime, className, onClick } = props
   const contract = useContractWithPreload(props.contract) ?? props.contract
   const { question, outcomeType } = contract
   const { resolution } = contract
@@ -61,9 +62,16 @@ export function ContractCard(props: {
                 'peer absolute -left-6 -top-4 -bottom-4 right-0 z-10'
               )}
             >
+              {onClick ? (
+                <a
+                  className="absolute top-0 left-0 right-0 bottom-0"
+                  onClick={onClick}
+                />
+              ) : (
                 <Link href={contractPath(contract)}>
                   <a className="absolute top-0 left-0 right-0 bottom-0" />
                 </Link>
+              )}
             </div>
             <AvatarDetails contract={contract} />
             <p

web/components/contract/contracts-list.tsx

@@ -12,8 +12,9 @@ export function ContractsGrid(props: {
   loadMore: () => void
   hasMore: boolean
   showCloseTime?: boolean
+  onContractClick?: (contract: Contract) => void
 }) {
-  const { contracts, showCloseTime, hasMore, loadMore } = props
+  const { contracts, showCloseTime, hasMore, loadMore, onContractClick } = props
 
   const [elem, setElem] = useState<HTMLElement | null>(null)
   const isBottomVisible = useIsVisible(elem)
@@ -43,6 +44,7 @@ export function ContractsGrid(props: {
             contract={contract}
             key={contract.id}
             showCloseTime={showCloseTime}
+            onClick={() => onContractClick?.(contract)}
           />
         ))}
       </ul>

web/pages/home.tsx

@@ -1,21 +1,48 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import Router from 'next/router'
 
 import { Page } from 'web/components/page'
 import { Col } from 'web/components/layout/col'
 import { useUser } from 'web/hooks/use-user'
 import { ContractSearch } from 'web/components/contract-search'
+import { Contract } from 'common/contract'
+import { ContractPageContent } from './[username]/[contractSlug]'
+import { getContractFromSlug } from 'web/lib/firebase/contracts'
 
 const Home = () => {
   const user = useUser()
 
+  const [contract, setContract] = useState<Contract | undefined>()
+
+  useEffect(() => {
+    const onBack = () => {
+      const path = location.pathname.split('/').slice(1)
+      if (path[0] === 'home') setContract(undefined)
+      else {
+        const [username, contractSlug] = path
+        if (!username || !contractSlug) setContract(undefined)
+        else {
+          // Show contract if route is to a contract: '/[username]/[contractSlug]'.
+          getContractFromSlug(contractSlug).then((c) => {
+            setContract(c)
+            window.scrollTo(0, 0)
+          })
+        }
+      }
+    }
+
+    window.addEventListener('popstate', onBack)
+    return () => window.removeEventListener('popstate', onBack)
+  }, [])
+
   if (user === null) {
     Router.replace('/')
     return <></>
   }
 
   return (
-    <Page assertUser="signed-in">
+    <>
+      <Page assertUser="signed-in" suspend={!!contract}>
         <Col className="mx-auto w-full p-2">
           <ContractSearch
             querySortOptions={{
@@ -23,9 +50,30 @@ const Home = () => {
               defaultSort: '24-hour-vol',
             }}
             showCategorySelector
+            onContractClick={(c) => {
+              // Show contract without navigating to contract page.
+              setContract(c)
+              // Update the url without switching pages in Nextjs.
+              history.pushState(null, '', `/${c.creatorUsername}/${c.slug}`)
+              window.scrollTo(0, 0)
+            }}
           />
         </Col>
       </Page>
+
+      {contract && (
+        <ContractPageContent
+          contract={contract}
+          username={contract.creatorUsername}
+          slug={contract.slug}
+          bets={[]}
+          comments={[]}
+          backToHome={() => {
+            history.back()
+          }}
+        />
+      )}
+    </>
   )
 }