Switch to SSR for user page

web/components/user-page.tsx

@@ -5,6 +5,7 @@ import { LinkIcon } from '@heroicons/react/solid'
 import { PencilIcon } from '@heroicons/react/outline'
 
 import { User } from 'web/lib/firebase/users'
+import { useUser } from 'web/hooks/use-user'
 import { CreatorContractsList } from './contract/contracts-grid'
 import { SEO } from './SEO'
 import { Page } from './page'
@@ -50,9 +51,10 @@ export function UserLink(props: {
 
 export const TAB_IDS = ['markets', 'comments', 'bets', 'groups']
 
-export function UserPage(props: { user: User; currentUser?: User }) {
-  const { user, currentUser } = props
+export function UserPage(props: { user: User }) {
+  const { user } = props
   const router = useRouter()
+  const currentUser = useUser()
   const isCurrentUser = user.id === currentUser?.id
   const bannerUrl = user.bannerUrl ?? defaultBannerUrl(user.id)
   const [showConfetti, setShowConfetti] = useState(false)

web/pages/[username]/index.tsx

@@ -1,48 +1,38 @@
 import { useRouter } from 'next/router'
 import React from 'react'
 
-import { getUserByUsername, User } from 'web/lib/firebase/users'
+import {
+  getUserByUsername,
+  getUserAndPrivateUser,
+  User,
+  UserAndPrivateUser,
+} from 'web/lib/firebase/users'
 import { UserPage } from 'web/components/user-page'
-import { useUser } from 'web/hooks/use-user'
 import Custom404 from '../404'
 import { useTracking } from 'web/hooks/use-tracking'
-import { fromPropz, usePropz } from 'web/hooks/use-propz'
-
-export const getStaticProps = fromPropz(getStaticPropz)
-export async function getStaticPropz(props: { params: { username: string } }) {
-  const { username } = props.params
-  const user = await getUserByUsername(username)
+import { GetServerSideProps } from 'next'
+import { authenticateOnServer } from 'web/lib/firebase/server-auth'
 
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const creds = await authenticateOnServer(ctx)
+  const [auth, user] = (await Promise.all([
+    creds != null ? getUserAndPrivateUser(creds.user.uid) : null,
+    getUserByUsername(ctx.params!.username as string),
+  ])) as [UserAndPrivateUser | null, User | null]
   return {
-    props: {
-      user,
-    },
-
-    revalidate: 60, // regenerate after a minute
+    props: { auth, user },
   }
 }
 
-export async function getStaticPaths() {
-  return { paths: [], fallback: 'blocking' }
-}
-
 export default function UserProfile(props: { user: User | null }) {
-  props = usePropz(props, getStaticPropz) ?? { user: undefined }
   const { user } = props
 
   const router = useRouter()
   const { username } = router.query as {
     username: string
   }
-  const currentUser = useUser()
 
   useTracking('view user profile', { username })
 
-  if (user === undefined) return <div />
-
-  return user ? (
-    <UserPage user={user} currentUser={currentUser || undefined} />
-  ) : (
-    <Custom404 />
-  )
+  return user ? <UserPage user={user} /> : <Custom404 />
 }