Move onboarding to the withAuthRequired HOC

zio/stable
Paul Frazee 2023-08-29 20:20:51 -07:00
parent bf37913701
commit 5d9534ca72
9 changed files with 45 additions and 103 deletions

View File

@ -67,8 +67,6 @@ import {getRoutingInstrumentation} from 'lib/sentry'
import {bskyTitle} from 'lib/strings/headings'
import {JSX} from 'react/jsx-runtime'
import {timeout} from 'lib/async/timeout'
import {RecommendedFeedsScreen} from 'view/screens/onboarding/RecommendedFeeds'
import {WelcomeScreen} from 'view/screens/onboarding/Welcome'
const navigationRef = createNavigationContainerRef<AllNavigatorParams>()
@ -221,22 +219,6 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
component={SavedFeeds}
options={{title: title('Edit My Feeds')}}
/>
<Stack.Screen
name="Welcome"
component={WelcomeScreen}
options={{
title: title('Welcome'),
presentation: 'card',
gestureEnabled: false,
}}
/>
<Stack.Screen
name="RecommendedFeeds"
component={RecommendedFeedsScreen}
options={{
title: title('Recommended Feeds'),
}}
/>
</>
)
}

View File

@ -1,23 +0,0 @@
import React from 'react'
import {useStores} from 'state/index'
import {useNavigation} from '@react-navigation/native'
import {NavigationProp} from 'lib/routes/types'
import {isNative, isWeb} from 'platform/detection'
export function useOnboarding() {
const store = useStores()
const navigation = useNavigation<NavigationProp>()
React.useEffect(() => {
if (store.onboarding.isActive) {
if (isWeb) {
store.shell.openModal({name: 'onboarding'})
return
}
if (isNative) {
navigation.navigate('Welcome')
return
}
}
}, [store.onboarding.isActive, navigation, store.shell])
}

View File

@ -1,6 +1,5 @@
import {NavigationState, PartialState} from '@react-navigation/native'
import type {NativeStackNavigationProp} from '@react-navigation/native-stack'
import {OnboardingScreenSteps} from 'state/models/discovery/onboarding'
export type {NativeStackScreenProps} from '@react-navigation/native-stack'
@ -30,10 +29,6 @@ export type CommonNavigatorParams = {
CopyrightPolicy: undefined
AppPasswords: undefined
SavedFeeds: undefined
} & OnboardingScreenParams
export type OnboardingScreenParams = {
[K in keyof typeof OnboardingScreenSteps]: undefined
}
export type BottomTabNavigatorParams = CommonNavigatorParams & {

View File

@ -140,10 +140,6 @@ export interface PreferencesHomeFeed {
name: 'preferences-home-feed'
}
export interface OnboardingModal {
name: 'onboarding'
}
export type Modal =
// Account
| AddAppPasswordModal
@ -179,9 +175,6 @@ export type Modal =
// Generic
| ConfirmModal
// Onboarding (only used on web)
| OnboardingModal
interface LightboxModel {}
export class ProfileImageLightbox implements LightboxModel {

View File

@ -0,0 +1,40 @@
import React from 'react'
import {SafeAreaView} from 'react-native'
import {observer} from 'mobx-react-lite'
import {ErrorBoundary} from 'view/com/util/ErrorBoundary'
import {s} from 'lib/styles'
import {usePalette} from 'lib/hooks/usePalette'
import {useStores} from 'state/index'
import {useAnalytics} from 'lib/analytics/analytics'
import {CenteredView} from '../util/Views'
import {Welcome} from './onboarding/Welcome'
import {RecommendedFeeds} from './onboarding/RecommendedFeeds'
export const Onboarding = observer(() => {
const pal = usePalette('default')
const store = useStores()
const {screen} = useAnalytics()
React.useEffect(() => {
screen('Onboarding')
store.shell.setMinimalShellMode(true)
}, [store, screen])
const next = () => store.onboarding.next()
const skip = () => store.onboarding.skip()
return (
<CenteredView style={[s.hContentRegion, pal.view]}>
<SafeAreaView testID="noSessionView" style={s.hContentRegion}>
<ErrorBoundary>
{store.onboarding.step === 'Welcome' && (
<Welcome skip={skip} next={next} />
)}
{store.onboarding.step === 'RecommendedFeeds' && (
<RecommendedFeeds next={next} />
)}
</ErrorBoundary>
</SafeAreaView>
</CenteredView>
)
})

View File

@ -9,6 +9,7 @@ import {observer} from 'mobx-react-lite'
import {useStores} from 'state/index'
import {CenteredView} from '../util/Views'
import {LoggedOut} from './LoggedOut'
import {Onboarding} from './Onboarding'
import {Text} from '../util/text/Text'
import {usePalette} from 'lib/hooks/usePalette'
import {STATUS_PAGE_URL} from 'lib/constants'
@ -24,6 +25,9 @@ export const withAuthRequired = <P extends object>(
if (!store.session.hasSession) {
return <LoggedOut />
}
if (store.onboarding.isActive) {
return <Onboarding />
}
return <Component {...props} />
})

View File

@ -27,7 +27,6 @@ import * as ContentFilteringSettingsModal from './ContentFilteringSettings'
import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings'
import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings'
import * as ModerationDetailsModal from './ModerationDetails'
import * as OnboardingModal from './OnboardingModal'
import * as PreferencesHomeFeed from './PreferencesHomeFeed'
export const ModalsContainer = observer(function ModalsContainer() {
@ -55,11 +54,7 @@ function Modal({modal}: {modal: ModalIface}) {
}
const onPressMask = () => {
if (
modal.name === 'crop-image' ||
modal.name === 'edit-image' ||
modal.name === 'onboarding'
) {
if (modal.name === 'crop-image' || modal.name === 'edit-image') {
return // dont close on mask presses during crop
}
store.shell.closeModal()
@ -114,8 +109,6 @@ function Modal({modal}: {modal: ModalIface}) {
element = <PreferencesHomeFeed.Component />
} else if (modal.name === 'moderation-details') {
element = <ModerationDetailsModal.Component {...modal} />
} else if (modal.name === 'onboarding') {
element = <OnboardingModal.Component />
} else {
return null
}

View File

@ -1,40 +0,0 @@
import React from 'react'
import {StyleSheet, View} from 'react-native'
import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette'
import {isDesktopWeb} from 'platform/detection'
import {Welcome} from '../auth/onboarding/Welcome'
import {observer} from 'mobx-react-lite'
import {RecommendedFeeds} from '../auth/onboarding/RecommendedFeeds'
export const snapPoints = ['90%']
export const Component = observer(({}: {}) => {
const pal = usePalette('default')
const store = useStores()
const next = () => {
const nextScreenName = store.onboarding.next()
if (nextScreenName === 'Home') {
store.shell.closeModal()
}
}
return (
<View style={[styles.container, pal.view]} testID="onboardingModal">
{store.onboarding.step === 'Welcome' ? <Welcome next={next} /> : null}
{store.onboarding.step === 'RecommendedFeeds' ? (
<RecommendedFeeds next={next} />
) : null}
</View>
)
})
const styles = StyleSheet.create({
container: {
flex: 1,
paddingBottom: isDesktopWeb ? 0 : 50,
maxHeight: '750px',
},
})

View File

@ -21,7 +21,6 @@ import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
import {useAnalytics} from 'lib/analytics/analytics'
import {ComposeIcon2} from 'lib/icons'
import {isDesktopWeb, isMobileWebMediaQuery, isWeb} from 'platform/detection'
import {useOnboarding} from 'lib/hooks/useOnboarding'
const HEADER_OFFSET_MOBILE = 78
const HEADER_OFFSET_DESKTOP = 50
@ -40,7 +39,6 @@ export const HomeScreen = withAuthRequired(
const [requestedCustomFeeds, setRequestedCustomFeeds] = React.useState<
string[]
>([])
useOnboarding()
React.useEffect(() => {
const {pinned} = store.me.savedFeeds