Add gate, a:a swap onboarding state (#3930)

src/lib/statsig/gates.ts

@@ -4,6 +4,7 @@ export type Gate =
   | 'disable_min_shell_on_foregrounding_v3'
   | 'disable_poll_on_discover_v2'
   | 'dms'
+  | 'reduced_onboarding_and_home_algo'
   | 'show_follow_back_label_v2'
   | 'start_session_with_following_v2'
   | 'test_gate_1'

src/screens/Onboarding/index.tsx

@@ -1,22 +1,33 @@
 import React from 'react'
-import {useLingui} from '@lingui/react'
 import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
-import {Portal} from '#/components/Portal'
-
-import {Context, initialState, reducer} from '#/screens/Onboarding/state'
+import {useGate} from '#/lib/statsig/statsig'
 import {Layout, OnboardingControls} from '#/screens/Onboarding/Layout'
-import {StepInterests} from '#/screens/Onboarding/StepInterests'
-import {StepSuggestedAccounts} from '#/screens/Onboarding/StepSuggestedAccounts'
-import {StepFollowingFeed} from '#/screens/Onboarding/StepFollowingFeed'
+import {
+  Context,
+  initialState,
+  initialStateReduced,
+  reducer,
+  reducerReduced,
+} from '#/screens/Onboarding/state'
 import {StepAlgoFeeds} from '#/screens/Onboarding/StepAlgoFeeds'
-import {StepTopicalFeeds} from '#/screens/Onboarding/StepTopicalFeeds'
 import {StepFinished} from '#/screens/Onboarding/StepFinished'
+import {StepFollowingFeed} from '#/screens/Onboarding/StepFollowingFeed'
+import {StepInterests} from '#/screens/Onboarding/StepInterests'
 import {StepModeration} from '#/screens/Onboarding/StepModeration'
+import {StepSuggestedAccounts} from '#/screens/Onboarding/StepSuggestedAccounts'
+import {StepTopicalFeeds} from '#/screens/Onboarding/StepTopicalFeeds'
+import {Portal} from '#/components/Portal'
 
 export function Onboarding() {
   const {_} = useLingui()
-  const [state, dispatch] = React.useReducer(reducer, {...initialState})
+  const gate = useGate()
+  const isReducedOnboardingEnabled = gate('reduced_onboarding_and_home_algo')
+  const [state, dispatch] = React.useReducer(
+    isReducedOnboardingEnabled ? reducerReduced : reducer,
+    isReducedOnboardingEnabled ? {...initialStateReduced} : {...initialState},
+  )
 
   const interestsDisplayNames = React.useMemo(() => {
     return {

src/screens/Onboarding/state.ts

@@ -237,3 +237,136 @@ export function reducer(
 
   return state
 }
+
+export const initialStateReduced: OnboardingState = {
+  hasPrev: false,
+  totalSteps: 7,
+  activeStep: 'interests',
+  activeStepIndex: 1,
+
+  interestsStepResults: {
+    selectedInterests: [],
+    apiResponse: {
+      interests: [],
+      suggestedAccountDids: {},
+      suggestedFeedUris: {},
+    },
+  },
+  suggestedAccountsStepResults: {
+    accountDids: [],
+  },
+  algoFeedsStepResults: {
+    feedUris: [],
+  },
+  topicalFeedsStepResults: {
+    feedUris: [],
+  },
+}
+
+export function reducerReduced(
+  s: OnboardingState,
+  a: OnboardingAction,
+): OnboardingState {
+  let next = {...s}
+
+  switch (a.type) {
+    case 'next': {
+      if (s.activeStep === 'interests') {
+        next.activeStep = 'suggestedAccounts'
+        next.activeStepIndex = 2
+      } else if (s.activeStep === 'suggestedAccounts') {
+        next.activeStep = 'followingFeed'
+        next.activeStepIndex = 3
+      } else if (s.activeStep === 'followingFeed') {
+        next.activeStep = 'algoFeeds'
+        next.activeStepIndex = 4
+      } else if (s.activeStep === 'algoFeeds') {
+        next.activeStep = 'topicalFeeds'
+        next.activeStepIndex = 5
+      } else if (s.activeStep === 'topicalFeeds') {
+        next.activeStep = 'moderation'
+        next.activeStepIndex = 6
+      } else if (s.activeStep === 'moderation') {
+        next.activeStep = 'finished'
+        next.activeStepIndex = 7
+      }
+      break
+    }
+    case 'prev': {
+      if (s.activeStep === 'suggestedAccounts') {
+        next.activeStep = 'interests'
+        next.activeStepIndex = 1
+      } else if (s.activeStep === 'followingFeed') {
+        next.activeStep = 'suggestedAccounts'
+        next.activeStepIndex = 2
+      } else if (s.activeStep === 'algoFeeds') {
+        next.activeStep = 'followingFeed'
+        next.activeStepIndex = 3
+      } else if (s.activeStep === 'topicalFeeds') {
+        next.activeStep = 'algoFeeds'
+        next.activeStepIndex = 4
+      } else if (s.activeStep === 'moderation') {
+        next.activeStep = 'topicalFeeds'
+        next.activeStepIndex = 5
+      } else if (s.activeStep === 'finished') {
+        next.activeStep = 'moderation'
+        next.activeStepIndex = 6
+      }
+      break
+    }
+    case 'finish': {
+      next = initialState
+      break
+    }
+    case 'setInterestsStepResults': {
+      next.interestsStepResults = {
+        selectedInterests: a.selectedInterests,
+        apiResponse: a.apiResponse,
+      }
+      break
+    }
+    case 'setSuggestedAccountsStepResults': {
+      next.suggestedAccountsStepResults = {
+        accountDids: next.suggestedAccountsStepResults.accountDids.concat(
+          a.accountDids,
+        ),
+      }
+      break
+    }
+    case 'setAlgoFeedsStepResults': {
+      next.algoFeedsStepResults = {
+        feedUris: a.feedUris,
+      }
+      break
+    }
+    case 'setTopicalFeedsStepResults': {
+      next.topicalFeedsStepResults = {
+        feedUris: next.topicalFeedsStepResults.feedUris.concat(a.feedUris),
+      }
+      break
+    }
+  }
+
+  const state = {
+    ...next,
+    hasPrev: next.activeStep !== 'interests',
+  }
+
+  logger.debug(`onboarding`, {
+    hasPrev: state.hasPrev,
+    activeStep: state.activeStep,
+    activeStepIndex: state.activeStepIndex,
+    interestsStepResults: {
+      selectedInterests: state.interestsStepResults.selectedInterests,
+    },
+    suggestedAccountsStepResults: state.suggestedAccountsStepResults,
+    algoFeedsStepResults: state.algoFeedsStepResults,
+    topicalFeedsStepResults: state.topicalFeedsStepResults,
+  })
+
+  if (s.activeStep !== state.activeStep) {
+    logger.debug(`onboarding: step changed`, {activeStep: state.activeStep})
+  }
+
+  return state
+}