From 6556a224085782ea83956f2dcdc9236e796a3a77 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Tue, 12 Dec 2023 19:47:30 -0800
Subject: [PATCH] Wire up the sign in and create account buttons to go straight
 to their respective screens

---
 src/state/shell/logged-out.tsx         |  2 +-
 src/view/com/auth/HomeLoggedOutCTA.tsx | 25 ++++++++++++++++++++++---
 src/view/com/auth/LoggedOut.tsx        |  4 +++-
 src/view/shell/NavSignupCard.tsx       | 18 ++++++++++++------
 4 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/src/state/shell/logged-out.tsx b/src/state/shell/logged-out.tsx
index a06a6d969f..8fe2a9c01f 100644
--- a/src/state/shell/logged-out.tsx
+++ b/src/state/shell/logged-out.tsx
@@ -22,7 +22,7 @@ type Controls = {
     /**
      * The did of the account to populate the login form with.
      */
-    requestedAccount?: string
+    requestedAccount?: string | 'none' | 'new'
   }) => void
   /**
    * Clears the requested account so that next time the logged out view is
diff --git a/src/view/com/auth/HomeLoggedOutCTA.tsx b/src/view/com/auth/HomeLoggedOutCTA.tsx
index 501ed332ec..7b3d6175f7 100644
--- a/src/view/com/auth/HomeLoggedOutCTA.tsx
+++ b/src/view/com/auth/HomeLoggedOutCTA.tsx
@@ -8,18 +8,34 @@ import {usePalette} from '#/lib/hooks/usePalette'
 import {colors, s} from '#/lib/styles'
 import {TextLink} from '../util/Link'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {useLoggedOutViewControls} from '#/state/shell/logged-out'
 
 export function HomeLoggedOutCTA() {
   const pal = usePalette('default')
   const {_} = useLingui()
   const {isMobile} = useWebMediaQueries()
+  const {requestSwitchToAccount} = useLoggedOutViewControls()
+
+  const showCreateAccount = React.useCallback(() => {
+    requestSwitchToAccount({requestedAccount: 'new'})
+  }, [requestSwitchToAccount])
+
+  const showSignIn = React.useCallback(() => {
+    requestSwitchToAccount({requestedAccount: 'none'})
+  }, [requestSwitchToAccount])
+
   return (
     <ScrollView style={styles.container}>
       <View style={[styles.hero, isMobile && styles.heroMobile]}>
         <Text style={[styles.title, pal.link]}>
           <Trans>Bluesky</Trans>
         </Text>
-        <Text style={[styles.subtitle, pal.textLight]}>
+        <Text
+          style={[
+            styles.subtitle,
+            isMobile && styles.subtitleMobile,
+            pal.textLight,
+          ]}>
           <Trans>See what's next</Trans>
         </Text>
       </View>
@@ -33,7 +49,7 @@ export function HomeLoggedOutCTA() {
             isMobile && styles.btnMobile,
             {backgroundColor: colors.blue3},
           ]}
-          onPress={undefined}
+          onPress={showCreateAccount}
           accessibilityRole="button"
           accessibilityLabel={_(msg`Create new account`)}
           accessibilityHint="Opens flow to create a new Bluesky account">
@@ -49,7 +65,7 @@ export function HomeLoggedOutCTA() {
         <TouchableOpacity
           testID="signInButton"
           style={[styles.btn, isMobile && styles.btnMobile, pal.btn]}
-          onPress={undefined}
+          onPress={showSignIn}
           accessibilityRole="button"
           accessibilityLabel={_(msg`Sign in`)}
           accessibilityHint="Opens flow to sign into your existing Bluesky account">
@@ -110,6 +126,9 @@ const styles = StyleSheet.create({
     fontSize: 48,
     fontWeight: 'bold',
   },
+  subtitleMobile: {
+    fontSize: 42,
+  },
   btnsDesktop: {
     flexDirection: 'row',
     justifyContent: 'center',
diff --git a/src/view/com/auth/LoggedOut.tsx b/src/view/com/auth/LoggedOut.tsx
index fcff4f7821..b0b2bf7edc 100644
--- a/src/view/com/auth/LoggedOut.tsx
+++ b/src/view/com/auth/LoggedOut.tsx
@@ -33,7 +33,9 @@ export function LoggedOut({onDismiss}: {onDismiss?: () => void}) {
   const {requestedAccountSwitchTo} = useLoggedOutView()
   const [screenState, setScreenState] = React.useState<ScreenState>(
     requestedAccountSwitchTo
-      ? ScreenState.S_Login
+      ? requestedAccountSwitchTo === 'new'
+        ? ScreenState.S_CreateAccount
+        : ScreenState.S_Login
       : ScreenState.S_LoginOrCreateAccount,
   )
   const {isMobile} = useWebMediaQueries()
diff --git a/src/view/shell/NavSignupCard.tsx b/src/view/shell/NavSignupCard.tsx
index 11dd7ffee4..8c0e2075d8 100644
--- a/src/view/shell/NavSignupCard.tsx
+++ b/src/view/shell/NavSignupCard.tsx
@@ -14,13 +14,19 @@ import {useCloseAllActiveElements} from '#/state/util'
 let NavSignupCard = ({}: {}): React.ReactNode => {
   const {_} = useLingui()
   const pal = usePalette('default')
-  const {setShowLoggedOut} = useLoggedOutViewControls()
+  const {requestSwitchToAccount} = useLoggedOutViewControls()
   const closeAllActiveElements = useCloseAllActiveElements()
 
-  const showLoggedOut = React.useCallback(() => {
+  const showSignIn = React.useCallback(() => {
     closeAllActiveElements()
-    setShowLoggedOut(true)
-  }, [setShowLoggedOut, closeAllActiveElements])
+    requestSwitchToAccount({requestedAccount: 'none'})
+  }, [requestSwitchToAccount, closeAllActiveElements])
+
+  const showCreateAccount = React.useCallback(() => {
+    closeAllActiveElements()
+    requestSwitchToAccount({requestedAccount: 'new'})
+    // setShowLoggedOut(true)
+  }, [requestSwitchToAccount, closeAllActiveElements])
 
   return (
     <View
@@ -39,7 +45,7 @@ let NavSignupCard = ({}: {}): React.ReactNode => {
 
       <View style={{flexDirection: 'row', paddingTop: 12, gap: 8}}>
         <Button
-          onPress={showLoggedOut}
+          onPress={showCreateAccount}
           accessibilityHint={_(msg`Sign up`)}
           accessibilityLabel={_(msg`Sign up`)}>
           <Text type="md" style={[{color: 'white'}, s.bold]}>
@@ -48,7 +54,7 @@ let NavSignupCard = ({}: {}): React.ReactNode => {
         </Button>
         <Button
           type="default"
-          onPress={showLoggedOut}
+          onPress={showSignIn}
           accessibilityHint={_(msg`Sign in`)}
           accessibilityLabel={_(msg`Sign in`)}>
           <Text type="md" style={[pal.text, s.bold]}>