Make navbar render signed in or signed out by page (#39)

web/components/nav-bar.tsx

@@ -10,9 +10,10 @@ import { ProfileMenu } from './profile-menu'
 export function NavBar(props: {
   darkBackground?: boolean
   wide?: boolean
+  assertUser?: 'signed-in' | 'signed-out'
   className?: string
 }) {
-  const { darkBackground, wide, className } = props
+  const { darkBackground, wide, assertUser, className } = props
 
   const user = useUser()
 
@@ -31,8 +32,12 @@ export function NavBar(props: {
         <ManifoldLogo className="my-1" darkBackground={darkBackground} />
 
         <Row className="items-center gap-6 sm:gap-8 ml-6">
-          {(user || user === null) && (
+          {(user || user === null || assertUser) && (
-            <NavOptions user={user} themeClasses={themeClasses} />
+            <NavOptions
+              user={user}
+              assertUser={assertUser}
+              themeClasses={themeClasses}
+            />
           )}
         </Row>
       </Row>
@@ -40,11 +45,19 @@ export function NavBar(props: {
   )
 }
 
-function NavOptions(props: { user: User | null; themeClasses: string }) {
+function NavOptions(props: {
-  const { user, themeClasses } = props
+  user: User | null | undefined
+  assertUser: 'signed-in' | 'signed-out' | undefined
+  themeClasses: string
+}) {
+  const { user, assertUser, themeClasses } = props
+  const showSignedIn = assertUser === 'signed-in' || !!user
+  const showSignedOut =
+    !showSignedIn && (assertUser === 'signed-out' || user === null)
+
   return (
     <>
-      {user === null && (
+      {showSignedOut && (
         <Link href="/about">
           <a
             className={clsx(
@@ -79,7 +92,7 @@ function NavOptions(props: { user: User | null; themeClasses: string }) {
         </a>
       </Link>
 
-      {user === null ? (
+      {showSignedOut && (
         <>
           <button
             className="btn btn-sm btn-outline normal-case text-base font-medium px-6 bg-gradient-to-r"
@@ -88,9 +101,8 @@ function NavOptions(props: { user: User | null; themeClasses: string }) {
             Sign in
           </button>
         </>
-      ) : (
-        <ProfileMenu user={user} />
       )}
+      {showSignedIn && <ProfileMenu user={user ?? undefined} />}
     </>
   )
 }

web/components/page.tsx

@@ -4,13 +4,14 @@ import { NavBar } from './nav-bar'
 export function Page(props: {
   wide?: boolean
   margin?: boolean
+  assertUser?: 'signed-in' | 'signed-out'
   children?: any
 }) {
-  const { wide, margin, children } = props
+  const { wide, margin, assertUser, children } = props
 
   return (
     <div>
-      <NavBar wide={wide} />
+      <NavBar wide={wide} assertUser={assertUser} />
 
       <div
         className={clsx(

web/components/profile-menu.tsx

@@ -1,9 +1,10 @@
 import { firebaseLogout, User } from '../lib/firebase/users'
 import { formatMoney } from '../lib/util/format'
+import { AvatarPlaceholder } from './contract-feed'
 import { Col } from './layout/col'
 import { MenuButton } from './menu'
 
-export function ProfileMenu(props: { user: User }) {
+export function ProfileMenu(props: { user: User | undefined }) {
   const { user } = props
 
   return (
@@ -23,7 +24,10 @@ export function ProfileMenu(props: { user: User }) {
   )
 }
 
-function getNavigationOptions(user: User, options: { mobile: boolean }) {
+function getNavigationOptions(
+  user: User | undefined,
+  options: { mobile: boolean }
+) {
   const { mobile } = options
   return [
     {
@@ -48,7 +52,7 @@ function getNavigationOptions(user: User, options: { mobile: boolean }) {
     },
     {
       name: 'Your markets',
-      href: `/${user.username}`,
+      href: `/${user?.username ?? ''}`,
     },
     {
       name: 'Leaderboards',
@@ -70,17 +74,21 @@ function getNavigationOptions(user: User, options: { mobile: boolean }) {
   ]
 }
 
-function ProfileSummary(props: { user: User }) {
+function ProfileSummary(props: { user: User | undefined }) {
   const { user } = props
   return (
     <Col className="avatar items-center sm:flex-row gap-2 sm:gap-0">
       <div className="rounded-full w-10 h-10 sm:mr-4">
-        {user.avatarUrl && <img src={user.avatarUrl} width={40} height={40} />}
+        {user?.avatarUrl ? (
+          <img src={user?.avatarUrl} width={40} height={40} />
+        ) : (
+          <AvatarPlaceholder />
+        )}
       </div>
       <div className="truncate text-left" style={{ maxWidth: 170 }}>
-        <div className="hidden sm:flex">{user.name}</div>
+        <div className="hidden sm:flex">{user?.name}</div>
         <div className="text-gray-700 text-sm">
-          {formatMoney(Math.floor(user.balance))}
+          {user ? formatMoney(Math.floor(user.balance)) : ' '}
         </div>
       </div>
     </Col>

web/pages/home.tsx

@@ -84,7 +84,7 @@ const Home = (props: {
   }
 
   return (
-    <Page>
+    <Page assertUser="signed-in">
       <Col className="items-center">
         <Col className="max-w-3xl">
           <FeedCreate user={user ?? undefined} />

web/pages/index.tsx

@@ -27,7 +27,7 @@ const Home = (props: { hotContracts: Contract[] }) => {
   }
 
   return (
-    <Page>
+    <Page assertUser="signed-out">
       <Col className="items-center">
         <Col className="max-w-3xl">
           <FeedPromo hotContracts={hotContracts ?? []} />