Move onboarding state to new persistence + reducer context (#1835)

src/state/models/discovery/onboarding.ts

···
-import {makeAutoObservable} from 'mobx'
-import {RootStoreModel} from '../root-store'
-import {hasProp} from 'lib/type-guards'
-import {track} from 'lib/analytics/analytics'
-import {SuggestedActorsModel} from './suggested-actors'
-
-export const OnboardingScreenSteps = {
-  Welcome: 'Welcome',
-  RecommendedFeeds: 'RecommendedFeeds',
-  RecommendedFollows: 'RecommendedFollows',
-  Home: 'Home',
-} as const
-
-type OnboardingStep =
-  (typeof OnboardingScreenSteps)[keyof typeof OnboardingScreenSteps]
-const OnboardingStepsArray = Object.values(OnboardingScreenSteps)
-export class OnboardingModel {
-  // state
-  step: OnboardingStep = 'Home' // default state to skip onboarding, only enabled for new users by calling start()
-
-  // data
-  suggestedActors: SuggestedActorsModel
-
-  constructor(public rootStore: RootStoreModel) {
-    this.suggestedActors = new SuggestedActorsModel(this.rootStore)
-    makeAutoObservable(this, {
-      rootStore: false,
-      hydrate: false,
-      serialize: false,
-    })
-  }
-
-  serialize(): unknown {
-    return {
-      step: this.step,
-    }
-  }
-
-  hydrate(v: unknown) {
-    if (typeof v === 'object' && v !== null) {
-      if (
-        hasProp(v, 'step') &&
-        typeof v.step === 'string' &&
-        OnboardingStepsArray.includes(v.step as OnboardingStep)
-      ) {
-        this.step = v.step as OnboardingStep
-      }
-    } else {
-      // if there is no valid state, we'll just reset
-      this.reset()
-    }
-  }
-
-  /**
-   * Returns the name of the next screen in the onboarding process based on the current step or screen name provided.
-   * @param {OnboardingStep} [currentScreenName]
-   * @returns name of next screen in the onboarding process
-   */
-  next(currentScreenName?: OnboardingStep) {
-    currentScreenName = currentScreenName || this.step
-    if (currentScreenName === 'Welcome') {
-      this.step = 'RecommendedFeeds'
-      return this.step
-    } else if (this.step === 'RecommendedFeeds') {
-      this.step = 'RecommendedFollows'
-      // prefetch recommended follows
-      this.suggestedActors.loadMore(true)
-      return this.step
-    } else if (this.step === 'RecommendedFollows') {
-      this.finish()
-      return this.step
-    } else {
-      // if we get here, we're in an invalid state, let's just go Home
-      return 'Home'
-    }
-  }
-
-  start() {
-    this.step = 'Welcome'
-    track('Onboarding:Begin')
-  }
-
-  finish() {
-    this.rootStore.me.mainFeed.refresh() // load the selected content
-    this.step = 'Home'
-    track('Onboarding:Complete')
-  }
-
-  reset() {
-    this.step = 'Welcome'
-    track('Onboarding:Reset')
-  }
-
-  skip() {
-    this.step = 'Home'
-    track('Onboarding:Skipped')
-  }
-
-  get isComplete() {
-    return this.step === 'Home'
-  }
-
-  get isActive() {
-    return !this.isComplete
-  }
-}

src/state/models/root-store.ts

···
 // remove after backend testing finishes
 // -prf
 import {applyDebugHeader} from 'lib/api/debug-appview-proxy-header'
-import {OnboardingModel} from './discovery/onboarding'
 
 export const appInfo = z.object({
   build: z.string(),
···
   shell = new ShellUiModel(this)
   preferences = new PreferencesModel(this)
   me = new MeModel(this)
-  onboarding = new OnboardingModel(this)
   invitedUsers = new InvitedUsers(this)
   handleResolutions = new HandleResolutionsCache()
   profiles = new ProfilesCache(this)
···
       appInfo: this.appInfo,
       session: this.session.serialize(),
       me: this.me.serialize(),
-      onboarding: this.onboarding.serialize(),
       preferences: this.preferences.serialize(),
       invitedUsers: this.invitedUsers.serialize(),
       mutedThreads: this.mutedThreads.serialize(),
···
       }
       if (hasProp(v, 'me')) {
         this.me.hydrate(v.me)
-      }
-      if (hasProp(v, 'onboarding')) {
-        this.onboarding.hydrate(v.onboarding)
       }
       if (hasProp(v, 'session')) {
         this.session.hydrate(v.session)

src/state/models/ui/create-account.ts

···
 import {getAge} from 'lib/strings/time'
 import {track} from 'lib/analytics/analytics'
 import {logger} from '#/logger'
+import {DispatchContext as OnboardingDispatchContext} from '#/state/shell/onboarding'
 
 const DEFAULT_DATE = new Date(Date.now() - 60e3 * 60 * 24 * 365 * 20) // default to 20 years ago
 
···
     }
   }
 
-  async submit() {
+  async submit(onboardingDispatch: OnboardingDispatchContext) {
     if (!this.email) {
       this.setStep(2)
       return this.setError('Please enter your email.')
···
     this.setIsProcessing(true)
 
     try {
-      this.rootStore.onboarding.start() // start now to avoid flashing the wrong view
+      onboardingDispatch({type: 'start'}) // start now to avoid flashing the wrong view
       await this.rootStore.session.createAccount({
         service: this.serviceUrl,
         email: this.email,
···
       /* dont await */ this.rootStore.preferences.setBirthDate(this.birthDate)
       track('Create Account')
     } catch (e: any) {
-      this.rootStore.onboarding.skip() // undo starting the onboard
+      onboardingDispatch({type: 'skip'}) // undo starting the onboard
       let errMsg = e.toString()
       if (e instanceof ComAtprotoServerCreateAccount.InvalidInviteCodeError) {
         errMsg =

src/state/persisted/schema.ts

···
   did: z.string(),
   refreshJwt: z.string().optional(),
   accessJwt: z.string().optional(),
-  handle: z.string(),
-  displayName: z.string(),
-  aviUrl: z.string(),
+  handle: z.string().optional(),
+  displayName: z.string().optional(),
+  aviUrl: z.string().optional(),
 })
 
 export const schema = z.object({

src/state/shell/color-mode.tsx

···
       setState(persisted.get('colorMode'))
       updateDocument(persisted.get('colorMode'))
     })
-  }, [setStateWrapped])
+  }, [setState])
 
   return (
     <stateContext.Provider value={state}>

src/state/shell/index.tsx

···
 import {Provider as MinimalModeProvider} from './minimal-mode'
 import {Provider as ColorModeProvider} from './color-mode'
 import {Provider as AltTextRequiredProvider} from './alt-text-required'
+import {Provider as OnboardingProvider} from './onboarding'
 
 export {useIsDrawerOpen, useSetDrawerOpen} from './drawer-open'
 export {
···
   useRequireAltTextEnabled,
   useSetRequireAltTextEnabled,
 } from './alt-text-required'
+export {useOnboardingState, useOnboardingDispatch} from './onboarding'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   return (
···
       <DrawerSwipableProvider>
         <MinimalModeProvider>
           <ColorModeProvider>
-            <AltTextRequiredProvider>{children}</AltTextRequiredProvider>
+            <OnboardingProvider>
+              <AltTextRequiredProvider>{children}</AltTextRequiredProvider>
+            </OnboardingProvider>
           </ColorModeProvider>
         </MinimalModeProvider>
       </DrawerSwipableProvider>

src/state/shell/onboarding.tsx

···
+import React from 'react'
+import * as persisted from '#/state/persisted'
+import {track} from '#/lib/analytics/analytics'
+
+export const OnboardingScreenSteps = {
+  Welcome: 'Welcome',
+  RecommendedFeeds: 'RecommendedFeeds',
+  RecommendedFollows: 'RecommendedFollows',
+  Home: 'Home',
+} as const
+
+type OnboardingStep =
+  (typeof OnboardingScreenSteps)[keyof typeof OnboardingScreenSteps]
+const OnboardingStepsArray = Object.values(OnboardingScreenSteps)
+
+type Action =
+  | {type: 'set'; step: OnboardingStep}
+  | {type: 'next'; currentStep?: OnboardingStep}
+  | {type: 'start'}
+  | {type: 'finish'}
+  | {type: 'skip'}
+
+export type StateContext = persisted.Schema['onboarding'] & {
+  isComplete: boolean
+  isActive: boolean
+}
+export type DispatchContext = (action: Action) => void
+
+const stateContext = React.createContext<StateContext>(
+  compute(persisted.defaults.onboarding),
+)
+const dispatchContext = React.createContext<DispatchContext>((_: Action) => {})
+
+function reducer(state: StateContext, action: Action): StateContext {
+  switch (action.type) {
+    case 'set': {
+      if (OnboardingStepsArray.includes(action.step)) {
+        persisted.write('onboarding', {step: action.step})
+        return compute({...state, step: action.step})
+      }
+      return state
+    }
+    case 'next': {
+      const currentStep = action.currentStep || state.step
+      let nextStep = 'Home'
+      if (currentStep === 'Welcome') {
+        nextStep = 'RecommendedFeeds'
+      } else if (currentStep === 'RecommendedFeeds') {
+        nextStep = 'RecommendedFollows'
+      } else if (currentStep === 'RecommendedFollows') {
+        nextStep = 'Home'
+      }
+      persisted.write('onboarding', {step: nextStep})
+      return compute({...state, step: nextStep})
+    }
+    case 'start': {
+      track('Onboarding:Begin')
+      persisted.write('onboarding', {step: 'Welcome'})
+      return compute({...state, step: 'Welcome'})
+    }
+    case 'finish': {
+      track('Onboarding:Complete')
+      persisted.write('onboarding', {step: 'Home'})
+      return compute({...state, step: 'Home'})
+    }
+    case 'skip': {
+      track('Onboarding:Skipped')
+      persisted.write('onboarding', {step: 'Home'})
+      return compute({...state, step: 'Home'})
+    }
+    default: {
+      throw new Error('Invalid action')
+    }
+  }
+}
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const [state, dispatch] = React.useReducer(
+    reducer,
+    compute(persisted.get('onboarding')),
+  )
+
+  React.useEffect(() => {
+    return persisted.onUpdate(() => {
+      dispatch({
+        type: 'set',
+        step: persisted.get('onboarding').step as OnboardingStep,
+      })
+    })
+  }, [dispatch])
+
+  return (
+    <stateContext.Provider value={state}>
+      <dispatchContext.Provider value={dispatch}>
+        {children}
+      </dispatchContext.Provider>
+    </stateContext.Provider>
+  )
+}
+
+export function useOnboardingState() {
+  return React.useContext(stateContext)
+}
+
+export function useOnboardingDispatch() {
+  return React.useContext(dispatchContext)
+}
+
+export function isOnboardingActive() {
+  return compute(persisted.get('onboarding')).isActive
+}
+
+function compute(state: persisted.Schema['onboarding']): StateContext {
+  return {
+    ...state,
+    isActive: state.step !== 'Home',
+    isComplete: state.step === 'Home',
+  }
+}

src/view/com/auth/Onboarding.tsx

···
 import {ErrorBoundary} from 'view/com/util/ErrorBoundary'
 import {s} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
-import {useStores} from 'state/index'
 import {Welcome} from './onboarding/Welcome'
 import {RecommendedFeeds} from './onboarding/RecommendedFeeds'
 import {RecommendedFollows} from './onboarding/RecommendedFollows'
 import {useSetMinimalShellMode} from '#/state/shell/minimal-mode'
+import {useOnboardingState, useOnboardingDispatch} from '#/state/shell'
 
 export const Onboarding = observer(function OnboardingImpl() {
   const pal = usePalette('default')
-  const store = useStores()
   const setMinimalShellMode = useSetMinimalShellMode()
+  const onboardingState = useOnboardingState()
+  const onboardingDispatch = useOnboardingDispatch()
 
   React.useEffect(() => {
     setMinimalShellMode(true)
   }, [setMinimalShellMode])
 
-  const next = () => store.onboarding.next()
-  const skip = () => store.onboarding.skip()
+  const next = () => onboardingDispatch({type: 'next'})
+  const skip = () => onboardingDispatch({type: 'skip'})
 
   return (
     <SafeAreaView testID="onboardingView" style={[s.hContentRegion, pal.view]}>
       <ErrorBoundary>
-        {store.onboarding.step === 'Welcome' && (
+        {onboardingState.step === 'Welcome' && (
           <Welcome skip={skip} next={next} />
         )}
-        {store.onboarding.step === 'RecommendedFeeds' && (
+        {onboardingState.step === 'RecommendedFeeds' && (
           <RecommendedFeeds next={next} />
         )}
-        {store.onboarding.step === 'RecommendedFollows' && (
+        {onboardingState.step === 'RecommendedFollows' && (
           <RecommendedFollows next={next} />
         )}
       </ErrorBoundary>

src/view/com/auth/create/CreateAccount.tsx

···
 import {useStores} from 'state/index'
 import {CreateAccountModel} from 'state/models/ui/create-account'
 import {usePalette} from 'lib/hooks/usePalette'
+import {useOnboardingDispatch} from '#/state/shell'
 
 import {Step1} from './Step1'
 import {Step2} from './Step2'
···
   const pal = usePalette('default')
   const store = useStores()
   const model = React.useMemo(() => new CreateAccountModel(store), [store])
+  const onboardingDispatch = useOnboardingDispatch()
 
   React.useEffect(() => {
     screen('CreateAccount')
···
       model.next()
     } else {
       try {
-        await model.submit()
+        await model.submit(onboardingDispatch)
       } catch {
         // dont need to handle here
       } finally {
         track('Try Create Account')
       }
     }
-  }, [model, track])
+  }, [model, track, onboardingDispatch])
 
   return (
     <LoggedOutLayout

src/view/com/auth/onboarding/RecommendedFollows.tsx

···
 import {usePalette} from 'lib/hooks/usePalette'
 import {useStores} from 'state/index'
 import {RecommendedFollowsItem} from './RecommendedFollowsItem'
+import {SuggestedActorsModel} from '#/state/models/discovery/suggested-actors'
 
 type Props = {
   next: () => void
···
   const store = useStores()
   const pal = usePalette('default')
   const {isTabletOrMobile} = useWebMediaQueries()
-
-  React.useEffect(() => {
-    // Load suggested actors if not already loaded
-    // prefetch should happen in the onboarding model
-    if (
-      !store.onboarding.suggestedActors.hasLoaded ||
-      store.onboarding.suggestedActors.isEmpty
-    ) {
-      store.onboarding.suggestedActors.loadMore(true)
-    }
+  const suggestedActors = React.useMemo(() => {
+    const model = new SuggestedActorsModel(store)
+    model.refresh()
+    return model
   }, [store])
 
   const title = (
···
           horizontal
           titleStyle={isTabletOrMobile ? undefined : {minWidth: 470}}
           contentStyle={{paddingHorizontal: 0}}>
-          {store.onboarding.suggestedActors.isLoading ? (
+          {suggestedActors.isLoading ? (
             <ActivityIndicator size="large" />
           ) : (
             <FlatList
-              data={store.onboarding.suggestedActors.suggestions}
+              data={suggestedActors.suggestions}
               renderItem={({item, index}) => (
-                <RecommendedFollowsItem item={item} index={index} />
+                <RecommendedFollowsItem
+                  item={item}
+                  index={index}
+                  insertSuggestionsByActor={suggestedActors.insertSuggestionsByActor.bind(
+                    suggestedActors,
+                  )}
+                />
               )}
               keyExtractor={(item, index) => item.did + index.toString()}
               style={{flex: 1}}
···
               users.
             </Text>
           </View>
-          {store.onboarding.suggestedActors.isLoading ? (
+          {suggestedActors.isLoading ? (
             <ActivityIndicator size="large" />
           ) : (
             <FlatList
-              data={store.onboarding.suggestedActors.suggestions}
+              data={suggestedActors.suggestions}
               renderItem={({item, index}) => (
-                <RecommendedFollowsItem item={item} index={index} />
+                <RecommendedFollowsItem
+                  item={item}
+                  index={index}
+                  insertSuggestionsByActor={suggestedActors.insertSuggestionsByActor.bind(
+                    suggestedActors,
+                  )}
+                />
               )}
               keyExtractor={(item, index) => item.did + index.toString()}
               style={{flex: 1}}

src/view/com/auth/onboarding/RecommendedFollowsItem.tsx

···
-import React, {useMemo} from 'react'
+import React from 'react'
 import {View, StyleSheet, ActivityIndicator} from 'react-native'
 import {AppBskyActorDefs, moderateProfile} from '@atproto/api'
 import {observer} from 'mobx-react-lite'
···
 type Props = {
   item: SuggestedActor
   index: number
+  insertSuggestionsByActor: (did: string, index: number) => Promise<void>
 }
-export const RecommendedFollowsItem: React.FC<Props> = ({item, index}) => {
+export const RecommendedFollowsItem: React.FC<Props> = ({
+  item,
+  index,
+  insertSuggestionsByActor,
+}) => {
   const pal = usePalette('default')
-  const store = useStores()
   const {isMobile} = useWebMediaQueries()
-  const delay = useMemo(() => {
-    return (
-      50 *
-      (Math.abs(store.onboarding.suggestedActors.lastInsertedAtIndex - index) %
-        5)
-    )
-  }, [index, store.onboarding.suggestedActors.lastInsertedAtIndex])
 
   return (
     <Animated.View
-      entering={FadeInRight.delay(delay).springify()}
+      entering={FadeInRight}
       style={[
         styles.cardContainer,
         pal.view,
···
           borderRightWidth: isMobile ? undefined : 1,
         },
       ]}>
-      <ProfileCard key={item.did} profile={item} index={index} />
+      <ProfileCard
+        key={item.did}
+        profile={item}
+        index={index}
+        insertSuggestionsByActor={insertSuggestionsByActor}
+      />
     </Animated.View>
   )
 }
···
 export const ProfileCard = observer(function ProfileCardImpl({
   profile,
   index,
+  insertSuggestionsByActor,
 }: {
   profile: AppBskyActorDefs.ProfileViewBasic
   index: number
+  insertSuggestionsByActor: (did: string, index: number) => Promise<void>
 }) {
   const {track} = useAnalytics()
   const store = useStores()
···
           onToggleFollow={async isFollow => {
             if (isFollow) {
               setAddingMoreSuggestions(true)
-              await store.onboarding.suggestedActors.insertSuggestionsByActor(
-                profile.did,
-                index,
-              )
+              await insertSuggestionsByActor(profile.did, index)
               setAddingMoreSuggestions(false)
               track('Onboarding:SuggestedFollowFollowed')
             }

src/view/com/auth/withAuthRequired.tsx

···
 import {Text} from '../util/text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
 import {STATUS_PAGE_URL} from 'lib/constants'
+import {useOnboardingState} from '#/state/shell'
 
 export const withAuthRequired = <P extends object>(
   Component: React.ComponentType<P>,
 ): React.FC<P> =>
   observer(function AuthRequired(props: P) {
     const store = useStores()
+    const onboardingState = useOnboardingState()
     if (store.session.isResumingSession) {
       return <Loading />
     }
     if (!store.session.hasSession) {
       return <LoggedOut />
     }
-    if (store.onboarding.isActive) {
+    if (onboardingState.isActive) {
       return <Onboarding />
     }
     return <Component {...props} />

src/view/screens/Settings.tsx

···
   useSetColorMode,
   useRequireAltTextEnabled,
   useSetRequireAltTextEnabled,
+  useOnboardingDispatch,
 } from '#/state/shell'
 
 // TEMPORARY (APP-700)
···
     const setMinimalShellMode = useSetMinimalShellMode()
     const requireAltTextEnabled = useRequireAltTextEnabled()
     const setRequireAltTextEnabled = useSetRequireAltTextEnabled()
+    const onboardingDispatch = useOnboardingDispatch()
     const navigation = useNavigation<NavigationProp>()
     const {isMobile} = useWebMediaQueries()
     const {screen, track} = useAnalytics()
···
     }, [store])
 
     const onPressResetOnboarding = React.useCallback(async () => {
-      store.onboarding.reset()
+      onboardingDispatch({type: 'start'})
       Toast.show('Onboarding reset')
-    }, [store])
+    }, [onboardingDispatch])
 
     const onPressBuildInfo = React.useCallback(() => {
       Clipboard.setString(

src/view/shell/index.web.tsx

···
 import {useNavigation} from '@react-navigation/native'
 import {NavigationProp} from 'lib/routes/types'
 import {useAuxClick} from 'lib/hooks/useAuxClick'
-import {useIsDrawerOpen, useSetDrawerOpen} from '#/state/shell'
+import {
+  useIsDrawerOpen,
+  useSetDrawerOpen,
+  useOnboardingState,
+} from '#/state/shell'
 
 const ShellInner = observer(function ShellInnerImpl() {
   const store = useStores()
   const isDrawerOpen = useIsDrawerOpen()
   const setDrawerOpen = useSetDrawerOpen()
+  const onboardingState = useOnboardingState()
   const {isDesktop, isMobile} = useWebMediaQueries()
   const navigator = useNavigation<NavigationProp>()
   useAuxClick()
···
     })
   }, [navigator, store.shell, setDrawerOpen])
 
-  const showBottomBar = isMobile && !store.onboarding.isActive
+  const showBottomBar = isMobile && !onboardingState.isActive
   const showSideNavs =
-    !isMobile && store.session.hasSession && !store.onboarding.isActive
+    !isMobile && store.session.hasSession && !onboardingState.isActive
   return (
     <View style={[s.hContentRegion, {overflow: 'hidden'}]}>
       <View style={s.hContentRegion}>