Move onboarding to the withAuthRequired HOC
parent
bf37913701
commit
5d9534ca72
|
@ -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'),
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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])
|
||||
}
|
|
@ -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 & {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
})
|
|
@ -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} />
|
||||
})
|
||||
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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',
|
||||
},
|
||||
})
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue