refactor(auth): simplify conditional rendering in pages

novuhq · May 22, 2024 · 6818d9d · 6818d9d
1 parent bb8066a
commit 6818d9d
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 86 deletions.
diff --git a/apps/web/src/pages/auth/InvitationPage.tsx b/apps/web/src/pages/auth/InvitationPage.tsx
@@ -54,75 +54,69 @@ export default function InvitationPage() {
     };
   }, [queryClient]);
 
-  return (
-    <>
-      {isLoggedIn && (
-        <AuthContainer
-          title="Active Session!"
-          customDescription={
-            <Center inline mb={40} mt={20}>
-              <Text size="lg" color={colors.B60}>
-                {isAcceptingInvite || isLoggedInAsInvitedUser ? (
-                  <p>Accepting invite...</p>
-                ) : (
-                  <p>The invite is not valid for the current user. Please log in with the right user.</p>
-                )}
-              </Text>
-            </Center>
-          }
-        >
-          <Button data-test-id="success-screen-reset" onClick={logoutWhenActiveSession} inherit>
-            Log out
-          </Button>
-          <Center mt={20}>
-            <Text mr={10} size="md" color={colors.B60}>
-              Go to
+  return isLoggedIn ? (
+    <AuthContainer
+      title="Active Session!"
+      customDescription={
+        <Center inline mb={40} mt={20}>
+          <Text size="lg" color={colors.B60}>
+            {isAcceptingInvite || isLoggedInAsInvitedUser ? (
+              <p>Accepting invite...</p>
+            ) : (
+              <p>The invite is not valid for the current user. Please log in with the right user.</p>
+            )}
+          </Text>
+        </Center>
+      }
+    >
+      <Button data-test-id="success-screen-reset" onClick={logoutWhenActiveSession} inherit>
+        Log out
+      </Button>
+      <Center mt={20}>
+        <Text mr={10} size="md" color={colors.B60}>
+          Go to
+        </Text>
+        <Link to="/quickstart">
+          <Text>Dashboard</Text>
+        </Link>
+      </Center>
+    </AuthContainer>
+  ) : (
+    <AuthContainer
+      title={existingUser ? 'Sign In & Accept Invite' : 'Get Started'}
+      customDescription={
+        inviterFirstName && organizationName ? (
+          <Center inline mb={60} mt={20} data-test-id="invitation-description">
+            <Text size="lg" mr={4} color={colors.B60}>
+              {"You've been invited by "}
+            </Text>
+            <Text size="lg" weight="bold" mr={4}>
+              {inviterFirstName[0].toUpperCase() + inviterFirstName.slice(1)}
+            </Text>
+            <Text size="lg" mr={4} color={colors.B60}>
+              {' to join '}
+            </Text>
+            <Text size="lg" weight="bold">
+              {organizationName}
+            </Text>
+            <Text size="lg" color={colors.B60}>
+              .
             </Text>
-            <Link to="/quickstart">
-              <Text>Dashboard</Text>
-            </Link>
           </Center>
-        </AuthContainer>
-      )}
-
-      {!isLoggedIn && (
-        <AuthContainer
-          title={existingUser ? 'Sign In & Accept Invite' : 'Get Started'}
-          customDescription={
-            inviterFirstName && organizationName ? (
-              <Center inline mb={60} mt={20} data-test-id="invitation-description">
-                <Text size="lg" mr={4} color={colors.B60}>
-                  {"You've been invited by "}
-                </Text>
-                <Text size="lg" weight="bold" mr={4}>
-                  {inviterFirstName[0].toUpperCase() + inviterFirstName.slice(1)}
-                </Text>
-                <Text size="lg" mr={4} color={colors.B60}>
-                  {' to join '}
-                </Text>
-                <Text size="lg" weight="bold">
-                  {organizationName}
-                </Text>
-                <Text size="lg" color={colors.B60}>
-                  .
-                </Text>
-              </Center>
-            ) : undefined
-          }
-        >
-          {isInitialLoading ? (
-            <LoadingOverlay
-              visible
-              overlayColor={colors.B30}
-              loaderProps={{
-                color: colors.error,
-              }}
-            />
-          ) : (
-            <Form email={data?.email} invitationToken={invitationToken} />
-          )}
-        </AuthContainer>
+        ) : undefined
+      }
+    >
+      {isInitialLoading ? (
+        <LoadingOverlay
+          visible
+          overlayColor={colors.B30}
+          loaderProps={{
+            color: colors.error,
+          }}
+        />
+      ) : (
+        <Form email={data?.email} invitationToken={invitationToken} />
       )}
-    </>
+    </AuthContainer>
   );
 }
diff --git a/apps/web/src/pages/auth/PasswordResetPage.tsx b/apps/web/src/pages/auth/PasswordResetPage.tsx
@@ -21,24 +21,19 @@ export function PasswordResetPage({}: Props) {
     setShowSentSuccess(true);
   }
 
-  return (
-    <>
-      {!showSentSuccess && (
-        <AuthContainer title="Reset Password" description="">
-          {!token && <PasswordResetRequestForm onSent={onSent} />}
-          {token && <PasswordResetForm token={token} />}
-        </AuthContainer>
-      )}
-      {showSentSuccess && (
-        <AuthContainer
-          title="Reset Sent!"
-          description="We've sent a password reset link to the account associated with your email"
-        >
-          <Button data-test-id="success-screen-reset" onClick={() => navigate(loginLink)} inherit>
-            Go Back
-          </Button>
-        </AuthContainer>
-      )}
-    </>
+  return showSentSuccess ? (
+    <AuthContainer
+      title="Reset Sent!"
+      description="We've sent a password reset link to the account associated with your email"
+    >
+      <Button data-test-id="success-screen-reset" onClick={() => navigate(loginLink)} inherit>
+        Go Back
+      </Button>
+    </AuthContainer>
+  ) : (
+    <AuthContainer title="Reset Password" description="">
+      {!token && <PasswordResetRequestForm onSent={onSent} />}
+      {token && <PasswordResetForm token={token} />}
+    </AuthContainer>
   );
 }