From 5a4c3bffe9c2e1e0cd9b05d4b82e28ff41ef9ff3 Mon Sep 17 00:00:00 2001
From: Liad Yosef <liad.yosef@gmail.com>
Date: Wed, 17 Jul 2024 22:16:59 +0300
Subject: [PATCH] fix empty email

---
 .../app/components/projectNotFound.tsx        | 41 ++++++++-----------
 1 file changed, 18 insertions(+), 23 deletions(-)

diff --git a/utopia-remix/app/components/projectNotFound.tsx b/utopia-remix/app/components/projectNotFound.tsx
index 2de069e93a66..de35e8966b07 100644
--- a/utopia-remix/app/components/projectNotFound.tsx
+++ b/utopia-remix/app/components/projectNotFound.tsx
@@ -4,7 +4,6 @@ import cx from 'classnames'
 import type { UserDetails } from 'prisma-client'
 import React, { useMemo } from 'react'
 import { colors } from '../styles/sprinkles.css'
-import { when } from '../util/react-conditionals'
 import { Status } from '../util/statusCodes'
 import * as styles from './projectNotFound.css'
 import { useCDNLink } from '../util/cdnLink'
@@ -82,15 +81,7 @@ function UnauthorizedPage({ projectId, user }: { projectId: string; user: UserDe
         <div style={{ fontSize: '100px', fontWeight: 600, fontStyle: 'italic' }}>Hmmm…</div>
         <div className={styles.runningText}>
           <span>Looks like you need permission to access this project. </span>
-          <span>You're signed in as </span>
-          <a
-            href='/projects'
-            rel='noopener noreferrer'
-            style={{ textDecoration: 'none', color: isDarkMode ? '#80CAFF' : '#0075F9' }}
-          >
-            {user?.email}
-          </a>
-          <span>.</span>
+          <SignedInAs user={user} isDarkMode={isDarkMode} />
         </div>
         <div style={{ display: 'flex', gap: '20px' }}>
           {accessRequested ? (
@@ -146,19 +137,7 @@ function NotFoundPage({ user, projectId }: { user: UserDetails | null; projectId
         <div style={{ fontSize: '42px' }}>Project not found.</div>
         <div className={styles.runningText}>
           <span>Either this project does not exist, or you need to be granted access to it. </span>
-          {when(user?.user_id != null, () => (
-            <>
-              <span>You're signed in as </span>{' '}
-              <a
-                href='/projects'
-                rel='noopener noreferrer'
-                style={{ textDecoration: 'none', color: isDarkMode ? '#80CAFF' : '#0075F9' }}
-              >
-                {user?.email}
-              </a>
-              <span>.</span>
-            </>
-          ))}
+          <SignedInAs user={user} isDarkMode={isDarkMode} />
         </div>
         <div style={{ display: 'flex', gap: '20px' }}>
           {user?.user_id != null ? (
@@ -246,3 +225,19 @@ function ActionButton({
     </Button>
   )
 }
+
+function SignedInAs({ user, isDarkMode }: { user: UserDetails | null; isDarkMode: boolean }) {
+  return user?.user_id != null && user?.email != null ? (
+    <>
+      <span>You're signed in as </span>
+      <a
+        href='/projects'
+        rel='noopener noreferrer'
+        style={{ textDecoration: 'none', color: isDarkMode ? '#80CAFF' : '#0075F9' }}
+      >
+        {user?.email}
+      </a>
+      <span>.</span>
+    </>
+  ) : null
+}