Move onboarding to the withAuthRequired HOC

src/Navigation.tsx

@@ -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'),
-        }}
-      />
     </>
   )
 }

src/lib/hooks/useOnboarding.ts

@@ -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])
-}

src/lib/routes/types.ts

@@ -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 & {

src/state/models/ui/shell.ts

@@ -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 {

src/view/com/auth/Onboarding.tsx

@@ -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>
+  )
+})

src/view/com/auth/withAuthRequired.tsx

@@ -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} />
   })
 

src/view/com/modals/Modal.web.tsx

@@ -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 (
+    if (modal.name === 'crop-image' || modal.name === 'edit-image') {
-      modal.name === 'crop-image' ||
-      modal.name === 'edit-image' ||
-      modal.name === 'onboarding'
-    ) {
       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
   }

src/view/com/modals/OnboardingModal.tsx

@@ -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',
-  },
-})

src/view/screens/Home.tsx

@@ -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