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

src/state/models/discovery/onboarding.ts

@@ -1,106 +0,0 @@
-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

@@ -27,7 +27,6 @@ import {logger} from '#/logger'
 // 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(),
@@ -44,7 +43,6 @@ export class RootStoreModel {
   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)
@@ -71,7 +69,6 @@ export class RootStoreModel {
       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(),
@@ -89,9 +86,6 @@ export class RootStoreModel {
       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

@@ -9,6 +9,7 @@ import {cleanError} from 'lib/strings/errors'
 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
 
@@ -90,7 +91,7 @@ export class CreateAccountModel {
     }
   }
 
-  async submit() {
+  async submit(onboardingDispatch: OnboardingDispatchContext) {
     if (!this.email) {
       this.setStep(2)
       return this.setError('Please enter your email.')
@@ -111,7 +112,7 @@ export class CreateAccountModel {
     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,
@@ -122,7 +123,7 @@ export class CreateAccountModel {
       /* 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 =