make landing part of logged out state
This commit is contained in:
@@ -5,20 +5,23 @@ import {
|
|||||||
AppBskyActorDefs,
|
AppBskyActorDefs,
|
||||||
AppBskyGraphDefs,
|
AppBskyGraphDefs,
|
||||||
AppBskyGraphStarterpack,
|
AppBskyGraphStarterpack,
|
||||||
|
AtUri,
|
||||||
} from '@atproto/api'
|
} from '@atproto/api'
|
||||||
import {msg, Trans} from '@lingui/macro'
|
import {msg, Trans} from '@lingui/macro'
|
||||||
import {useLingui} from '@lingui/react'
|
import {useLingui} from '@lingui/react'
|
||||||
import {useNavigation} from '@react-navigation/native'
|
import {useNavigation} from '@react-navigation/native'
|
||||||
import {NativeStackScreenProps} from '@react-navigation/native-stack'
|
|
||||||
|
|
||||||
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
||||||
import {CommonNavigatorParams, NavigationProp} from 'lib/routes/types'
|
import {NavigationProp} from 'lib/routes/types'
|
||||||
import {useSetUsedStarterPack} from 'state/preferences/starter-pack'
|
import {
|
||||||
|
useSetUsedStarterPack,
|
||||||
|
useUsedStarterPack,
|
||||||
|
} from 'state/preferences/starter-pack'
|
||||||
import {useResolveDidQuery} from 'state/queries/resolve-uri'
|
import {useResolveDidQuery} from 'state/queries/resolve-uri'
|
||||||
import {useStarterPackQuery} from 'state/queries/useStarterPackQuery'
|
import {useStarterPackQuery} from 'state/queries/useStarterPackQuery'
|
||||||
import {useSession} from 'state/session'
|
import {useSession} from 'state/session'
|
||||||
import {useSetMinimalShellMode} from 'state/shell'
|
import {useSetMinimalShellMode} from 'state/shell'
|
||||||
import {useLoggedOutViewControls} from 'state/shell/logged-out'
|
import {LoggedOutScreenState} from 'view/com/auth/LoggedOut'
|
||||||
import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard'
|
import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard'
|
||||||
import {UserAvatar} from 'view/com/util/UserAvatar'
|
import {UserAvatar} from 'view/com/util/UserAvatar'
|
||||||
import {CenteredView} from 'view/com/util/Views'
|
import {CenteredView} from 'view/com/util/Views'
|
||||||
@@ -30,9 +33,14 @@ import {ListMaybePlaceholder} from '#/components/Lists'
|
|||||||
import {Text} from '#/components/Typography'
|
import {Text} from '#/components/Typography'
|
||||||
|
|
||||||
export function LandingScreen({
|
export function LandingScreen({
|
||||||
route,
|
setScreenState,
|
||||||
}: NativeStackScreenProps<CommonNavigatorParams, 'StarterPackLanding'>) {
|
}: {
|
||||||
const {name, rkey} = route.params
|
setScreenState: (state: LoggedOutScreenState) => void
|
||||||
|
}) {
|
||||||
|
const usedStarterPack = useUsedStarterPack()
|
||||||
|
const atUri = new AtUri(usedStarterPack!.uri)
|
||||||
|
const {hostname: name, rkey} = atUri
|
||||||
|
|
||||||
const navigation = useNavigation<NavigationProp>()
|
const navigation = useNavigation<NavigationProp>()
|
||||||
const {currentAccount} = useSession()
|
const {currentAccount} = useSession()
|
||||||
const setMinimalShellMode = useSetMinimalShellMode()
|
const setMinimalShellMode = useSetMinimalShellMode()
|
||||||
@@ -64,18 +72,24 @@ export function LandingScreen({
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
return <LandingScreenInner starterPack={starterPack} />
|
return (
|
||||||
|
<LandingScreenInner
|
||||||
|
starterPack={starterPack}
|
||||||
|
setScreenState={setScreenState}
|
||||||
|
/>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function LandingScreenInner({
|
function LandingScreenInner({
|
||||||
starterPack,
|
starterPack,
|
||||||
|
setScreenState,
|
||||||
}: {
|
}: {
|
||||||
starterPack: AppBskyGraphDefs.StarterPackView
|
starterPack: AppBskyGraphDefs.StarterPackView
|
||||||
|
setScreenState: (state: LoggedOutScreenState) => void
|
||||||
}) {
|
}) {
|
||||||
const {record, creator, listItemsSample, feeds, joinedWeekCount} = starterPack
|
const {record, creator, listItemsSample, feeds, joinedWeekCount} = starterPack
|
||||||
const {_} = useLingui()
|
const {_} = useLingui()
|
||||||
const t = useTheme()
|
const t = useTheme()
|
||||||
const {requestSwitchToAccount} = useLoggedOutViewControls()
|
|
||||||
const setUsedStarterPack = useSetUsedStarterPack()
|
const setUsedStarterPack = useSetUsedStarterPack()
|
||||||
const {isTabletOrDesktop} = useWebMediaQueries()
|
const {isTabletOrDesktop} = useWebMediaQueries()
|
||||||
|
|
||||||
@@ -139,7 +153,7 @@ function LandingScreenInner({
|
|||||||
uri: starterPack.uri,
|
uri: starterPack.uri,
|
||||||
cid: starterPack.cid,
|
cid: starterPack.cid,
|
||||||
})
|
})
|
||||||
requestSwitchToAccount({requestedAccount: 'new'})
|
setScreenState(LoggedOutScreenState.S_CreateAccount)
|
||||||
}}
|
}}
|
||||||
variant="solid"
|
variant="solid"
|
||||||
color="primary"
|
color="primary"
|
||||||
@@ -220,9 +234,11 @@ function LandingScreenInner({
|
|||||||
}
|
}
|
||||||
|
|
||||||
function User({displayName, avatar}: {displayName: string; avatar?: string}) {
|
function User({displayName, avatar}: {displayName: string; avatar?: string}) {
|
||||||
|
const {isTabletOrDesktop} = useWebMediaQueries()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={[a.flex_1, a.align_center, a.gap_sm]}>
|
<View style={[a.flex_1, a.align_center, a.gap_sm]}>
|
||||||
<UserAvatar size={64} avatar={avatar} />
|
<UserAvatar size={isTabletOrDesktop ? 58 : 48} avatar={avatar} />
|
||||||
<Text style={[a.flex_1, a.text_sm, a.font_bold]} numberOfLines={1}>
|
<Text style={[a.flex_1, a.text_sm, a.font_bold]} numberOfLines={1}>
|
||||||
{displayName}
|
{displayName}
|
||||||
</Text>
|
</Text>
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ import {Text} from '#/components/Typography'
|
|||||||
|
|
||||||
export function StarterPackScreen({
|
export function StarterPackScreen({
|
||||||
route,
|
route,
|
||||||
}: NativeStackScreenProps<CommonNavigatorParams, 'StarterPackLanding'>) {
|
}: NativeStackScreenProps<CommonNavigatorParams, 'StarterPack'>) {
|
||||||
const {name, rkey} = route.params
|
const {name, rkey} = route.params
|
||||||
const {
|
const {
|
||||||
data: did,
|
data: did,
|
||||||
|
|||||||
@@ -23,6 +23,7 @@ import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
|
|||||||
import {Text} from '#/view/com/util/text/Text'
|
import {Text} from '#/view/com/util/text/Text'
|
||||||
import {Login} from '#/screens/Login'
|
import {Login} from '#/screens/Login'
|
||||||
import {Signup} from '#/screens/Signup'
|
import {Signup} from '#/screens/Signup'
|
||||||
|
import {LandingScreen} from '#/screens/StarterPack/Landing'
|
||||||
import {SplashScreen} from './SplashScreen'
|
import {SplashScreen} from './SplashScreen'
|
||||||
|
|
||||||
enum ScreenState {
|
enum ScreenState {
|
||||||
@@ -31,6 +32,7 @@ enum ScreenState {
|
|||||||
S_CreateAccount,
|
S_CreateAccount,
|
||||||
S_StarterPack,
|
S_StarterPack,
|
||||||
}
|
}
|
||||||
|
export {ScreenState as LoggedOutScreenState}
|
||||||
|
|
||||||
export function LoggedOut({onDismiss}: {onDismiss?: () => void}) {
|
export function LoggedOut({onDismiss}: {onDismiss?: () => void}) {
|
||||||
const {hasSession} = useSession()
|
const {hasSession} = useSession()
|
||||||
@@ -41,19 +43,19 @@ export function LoggedOut({onDismiss}: {onDismiss?: () => void}) {
|
|||||||
const usedStarterPack = useUsedStarterPack()
|
const usedStarterPack = useUsedStarterPack()
|
||||||
const {requestedAccountSwitchTo} = useLoggedOutView()
|
const {requestedAccountSwitchTo} = useLoggedOutView()
|
||||||
const [screenState, setScreenState] = React.useState<ScreenState>(
|
const [screenState, setScreenState] = React.useState<ScreenState>(
|
||||||
usedStarterPack?.uri
|
requestedAccountSwitchTo
|
||||||
? ScreenState.S_StarterPack
|
|
||||||
: requestedAccountSwitchTo
|
|
||||||
? requestedAccountSwitchTo === 'new'
|
? requestedAccountSwitchTo === 'new'
|
||||||
? ScreenState.S_CreateAccount
|
? ScreenState.S_CreateAccount
|
||||||
: ScreenState.S_Login
|
: ScreenState.S_Login
|
||||||
|
: usedStarterPack?.uri
|
||||||
|
? ScreenState.S_StarterPack
|
||||||
: ScreenState.S_LoginOrCreateAccount,
|
: ScreenState.S_LoginOrCreateAccount,
|
||||||
)
|
)
|
||||||
const {isMobile} = useWebMediaQueries()
|
const {isMobile} = useWebMediaQueries()
|
||||||
const {clearRequestedAccount} = useLoggedOutViewControls()
|
const {clearRequestedAccount} = useLoggedOutViewControls()
|
||||||
const navigation = useNavigation<NavigationProp>()
|
const navigation = useNavigation<NavigationProp>()
|
||||||
const isFirstScreen = screenState === ScreenState.S_LoginOrCreateAccount
|
|
||||||
|
|
||||||
|
const isFirstScreen = screenState === ScreenState.S_LoginOrCreateAccount
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
screen('Login')
|
screen('Login')
|
||||||
setMinimalShellMode(true)
|
setMinimalShellMode(true)
|
||||||
@@ -78,11 +80,14 @@ export function LoggedOut({onDismiss}: {onDismiss?: () => void}) {
|
|||||||
pal.view,
|
pal.view,
|
||||||
{
|
{
|
||||||
// only needed if dismiss button is present
|
// only needed if dismiss button is present
|
||||||
paddingTop: onDismiss && isMobile ? 40 : 0,
|
paddingTop:
|
||||||
|
onDismiss && isMobile && screenState !== ScreenState.S_StarterPack
|
||||||
|
? 40
|
||||||
|
: 0,
|
||||||
},
|
},
|
||||||
]}>
|
]}>
|
||||||
<ErrorBoundary>
|
<ErrorBoundary>
|
||||||
{onDismiss ? (
|
{onDismiss && screenState !== ScreenState.S_StarterPack ? (
|
||||||
<Pressable
|
<Pressable
|
||||||
accessibilityHint={_(msg`Go back`)}
|
accessibilityHint={_(msg`Go back`)}
|
||||||
accessibilityLabel={_(msg`Go back`)}
|
accessibilityLabel={_(msg`Go back`)}
|
||||||
@@ -138,7 +143,7 @@ export function LoggedOut({onDismiss}: {onDismiss?: () => void}) {
|
|||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
{screenState === ScreenState.S_StarterPack ? (
|
{screenState === ScreenState.S_StarterPack ? (
|
||||||
<View />
|
<LandingScreen setScreenState={setScreenState} />
|
||||||
) : screenState === ScreenState.S_LoginOrCreateAccount ? (
|
) : screenState === ScreenState.S_LoginOrCreateAccount ? (
|
||||||
<SplashScreen
|
<SplashScreen
|
||||||
onPressSignin={() => {
|
onPressSignin={() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user