Make homepage load user via SSR, pass it to contract stuff (#729)

web/components/contract-search.tsx

@@ -2,6 +2,7 @@
 import algoliasearch from 'algoliasearch/lite'
 
 import { Contract } from 'common/contract'
+import { User } from 'common/user'
 import { Sort, useQueryAndSortParams } from '../hooks/use-sort-and-query-params'
 import {
   ContractHighlightOptions,
@@ -11,7 +12,6 @@ import { Row } from './layout/row'
 import { useEffect, useMemo, useState } from 'react'
 import { Spacer } from './layout/spacer'
 import { ENV, IS_PRIVATE_MANIFOLD } from 'common/envs/constants'
-import { useUser } from 'web/hooks/use-user'
 import { useFollows } from 'web/hooks/use-follows'
 import { track, trackCallback } from 'web/lib/service/analytics'
 import ContractSearchFirestore from 'web/pages/contract-search-firestore'
@@ -45,6 +45,7 @@ export const DEFAULT_SORT = 'score'
 type filter = 'personal' | 'open' | 'closed' | 'resolved' | 'all'
 
 export function ContractSearch(props: {
+  user: User | null | undefined
   querySortOptions?: {
     defaultSort: Sort
     defaultFilter?: filter
@@ -67,6 +68,7 @@ export function ContractSearch(props: {
   }
 }) {
   const {
+    user,
     querySortOptions,
     additionalFilter,
     onContractClick,
@@ -77,7 +79,6 @@ export function ContractSearch(props: {
     highlightOptions,
   } = props
 
-  const user = useUser()
   const memberGroups = (useMemberGroups(user?.id) ?? []).filter(
     (group) => !NEW_USER_GROUP_SLUGS.includes(group.slug)
   )

web/components/contract/contracts-grid.tsx

@@ -97,11 +97,15 @@ export function ContractsGrid(props: {
   )
 }
 
-export function CreatorContractsList(props: { creator: User }) {
+export function CreatorContractsList(props: {
-  const { creator } = props
+  user: User | null | undefined
+  creator: User
+}) {
+  const { user, creator } = props
 
   return (
     <ContractSearch
+      user={user}
       querySortOptions={{
         defaultSort: 'newest',
         defaultFilter: 'all',

web/components/user-page.tsx

@@ -300,7 +300,9 @@ export function UserPage(props: { user: User; currentUser?: User }) {
             tabs={[
               {
                 title: 'Markets',
-                content: <CreatorContractsList creator={user} />,
+                content: (
+                  <CreatorContractsList user={currentUser} creator={user} />
+                ),
                 tabIcon: (
                   <span className="px-0.5 font-bold">
                     {usersContracts.length}

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

@@ -92,6 +92,7 @@ export default function ContractPage(props: {
     slug: '',
   }
 
+  const user = useUser()
   const inIframe = useIsIframe()
   if (inIframe) {
     return <ContractEmbedPage {...props} />
@@ -103,7 +104,7 @@ export default function ContractPage(props: {
     return <Custom404 />
   }
 
-  return <ContractPageContent {...{ ...props, contract }} />
+  return <ContractPageContent {...{ ...props, contract, user }} />
 }
 
 export function ContractPageSidebar(props: {
@@ -144,9 +145,12 @@ export function ContractPageSidebar(props: {
 }
 
 export function ContractPageContent(
-  props: Parameters<typeof ContractPage>[0] & { contract: Contract }
+  props: Parameters<typeof ContractPage>[0] & {
+    contract: Contract
+    user?: User | null
+  }
 ) {
-  const { backToHome, comments } = props
+  const { backToHome, comments, user } = props
 
   const contract = useContractWithPreload(props.contract) ?? props.contract
 
@@ -164,8 +168,6 @@ export function ContractPageContent(
 
   const tips = useTipTxns({ contractId: contract.id })
 
-  const user = useUser()
-
   const { width, height } = useWindowSize()
 
   const [showConfetti, setShowConfetti] = useState(false)

web/pages/group/[...slugs]/index.tsx

@@ -201,6 +201,7 @@ export default function GroupPage(props: {
 
   const questionsTab = (
     <ContractSearch
+      user={user}
       querySortOptions={{
         shouldLoadFromStorage: true,
         defaultSort: getSavedSort() ?? 'newest',
@@ -614,6 +615,7 @@ function AddContractButton(props: { group: Group; user: User }) {
 
           <div className={'overflow-y-scroll sm:px-8'}>
             <ContractSearch
+              user={user}
               hideOrderSelector={true}
               onContractClick={addContractToCurrentGroup}
               overrideGridClassName={

web/pages/home.tsx

@@ -7,16 +7,22 @@ import { Col } from 'web/components/layout/col'
 import { getSavedSort } from 'web/hooks/use-sort-and-query-params'
 import { ContractSearch, DEFAULT_SORT } from 'web/components/contract-search'
 import { Contract } from 'common/contract'
+import { User } from 'common/user'
 import { ContractPageContent } from './[username]/[contractSlug]'
 import { getContractFromSlug } from 'web/lib/firebase/contracts'
+import { getUser } from 'web/lib/firebase/users'
 import { useTracking } from 'web/hooks/use-tracking'
 import { track } from 'web/lib/service/analytics'
 import { redirectIfLoggedOut } from 'web/lib/firebase/server-auth'
 import { useSaveReferral } from 'web/hooks/use-save-referral'
 
-export const getServerSideProps = redirectIfLoggedOut('/')
+export const getServerSideProps = redirectIfLoggedOut('/', async (_, creds) => {
+  const user = await getUser(creds.user.uid)
+  return { props: { user } }
+})
 
-const Home = () => {
+const Home = (props: { user: User }) => {
+  const { user } = props
   const [contract, setContract] = useContractPage()
 
   const router = useRouter()
@@ -29,6 +35,7 @@ const Home = () => {
       <Page suspend={!!contract}>
         <Col className="mx-auto w-full p-2">
           <ContractSearch
+            user={user}
             querySortOptions={{
               shouldLoadFromStorage: true,
               defaultSort: getSavedSort() ?? DEFAULT_SORT,
@@ -56,6 +63,7 @@ const Home = () => {
       {contract && (
         <ContractPageContent
           contract={contract}
+          user={user}
           username={contract.creatorUsername}
           slug={contract.slug}
           bets={[]}

web/pages/markets.tsx

@@ -1,9 +1,11 @@
+import { useUser } from 'web/hooks/use-user'
 import { ContractSearch } from '../components/contract-search'
 import { Page } from '../components/page'
 import { SEO } from '../components/SEO'
 
 // TODO: Rename endpoint to "Explore"
 export default function Markets() {
+  const user = useUser()
   return (
     <Page>
       <SEO
@@ -11,7 +13,7 @@ export default function Markets() {
         description="Discover what's new, trending, or soon-to-close. Or search thousands of prediction markets."
         url="/markets"
       />
-      <ContractSearch />
+      <ContractSearch user={user} />
     </Page>
   )
 }

web/pages/tag/[tag].tsx

@@ -1,10 +1,12 @@
 import { useRouter } from 'next/router'
+import { useUser } from 'web/hooks/use-user'
 import { ContractSearch } from '../../components/contract-search'
 import { Page } from '../../components/page'
 import { Title } from '../../components/title'
 
 export default function TagPage() {
   const router = useRouter()
+  const user = useUser()
   const { tag } = router.query as { tag: string }
   if (!router.isReady) return <div />
 
@@ -12,6 +14,7 @@ export default function TagPage() {
     <Page>
       <Title text={`#${tag}`} />
       <ContractSearch
+        user={user}
         querySortOptions={{
           defaultSort: 'newest',
           defaultFilter: 'all',