Fork state logic for reduced version

src/screens/Onboarding/index.tsx

@@ -1,23 +1,32 @@
 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 {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,
+  initialStateV2,
+  reducer,
+  reducerV2,
+} 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 {StepProfile} from '#/screens/Onboarding/StepProfile'
+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 isV2Enabled = false // TODO replace with feature flag
+  const [state, dispatch] = React.useReducer(
+    isV2Enabled ? reducerV2 : reducer,
+    isV2Enabled ? {...initialStateV2} : {...initialState},
+  )
 
   const interestsDisplayNames = React.useMemo(() => {
     return {
@@ -43,6 +52,7 @@ export function Onboarding() {
       gaming: _(msg`Video Games`),
       food: _(msg`Food`),
       cooking: _(msg`Cooking`),
+      photography: _(msg`Photography`),
     }
   }, [_])
 

src/screens/Onboarding/state.ts

@@ -107,6 +107,35 @@ export const initialState: OnboardingState = {
   },
 }
 
+export const initialStateV2: OnboardingState = {
+  hasPrev: false,
+  totalSteps: 3,
+  activeStep: 'profile',
+  activeStepIndex: 1,
+
+  interestsStepResults: {
+    selectedInterests: [],
+    apiResponse: {
+      interests: [],
+      suggestedAccountDids: {},
+      suggestedFeedUris: {},
+    },
+  },
+  suggestedAccountsStepResults: {
+    accountDids: [],
+  },
+  algoFeedsStepResults: {
+    feedUris: [],
+  },
+  topicalFeedsStepResults: {
+    feedUris: [],
+  },
+  profileStepResults: {
+    imageUri: '',
+    imageMime: '',
+  },
+}
+
 export const INTEREST_TO_DISPLAY_NAME_DEFAULTS: {
   [key: string]: string
 } = {
@@ -132,6 +161,7 @@ export const INTEREST_TO_DISPLAY_NAME_DEFAULTS: {
   gaming: 'Video Games',
   food: 'Food',
   cooking: 'Cooking',
+  photography: 'Photography',
 }
 
 export const Context = React.createContext<{
@@ -265,3 +295,84 @@ export function reducer(
 
   return state
 }
+
+export function reducerV2(
+  s: OnboardingState,
+  a: OnboardingAction,
+): OnboardingState {
+  let next = {...s}
+
+  switch (a.type) {
+    case 'next': {
+      if (s.activeStep === 'profile') {
+        next.activeStep = 'interests'
+        next.activeStepIndex = 2
+      } else if (s.activeStep === 'interests') {
+        next.activeStep = 'finished'
+        next.activeStepIndex = 3
+      }
+      break
+    }
+    case 'prev': {
+      if (s.activeStep === 'interests') {
+        next.activeStep = 'profile'
+        next.activeStepIndex = 1
+      } else if (s.activeStep === 'finished') {
+        next.activeStep = 'interests'
+        next.activeStepIndex = 2
+      }
+      break
+    }
+    case 'finish': {
+      next = initialStateV2
+      break
+    }
+    case 'setInterestsStepResults': {
+      next.interestsStepResults = {
+        selectedInterests: a.selectedInterests,
+        apiResponse: a.apiResponse,
+      }
+      break
+    }
+    case 'setSuggestedAccountsStepResults': {
+      break
+    }
+    case 'setAlgoFeedsStepResults': {
+      break
+    }
+    case 'setTopicalFeedsStepResults': {
+      break
+    }
+    case 'setProfileStepResults': {
+      next.profileStepResults = {
+        imageUri: a.imageUri,
+        imageMime: a.imageMime,
+      }
+      break
+    }
+  }
+
+  const state = {
+    ...next,
+    hasPrev: next.activeStep !== 'profile',
+  }
+
+  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,
+    profileStepResults: state.profileStepResults,
+  })
+
+  if (s.activeStep !== state.activeStep) {
+    logger.debug(`onboarding: step changed`, {activeStep: state.activeStep})
+  }
+
+  return state
+}