From 05f108409821cea80161933746ce6919a3f5a66e Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Tue, 16 Apr 2024 09:06:00 -0500 Subject: [PATCH] Fork state logic for reduced version --- src/screens/Onboarding/index.tsx | 28 +++++--- src/screens/Onboarding/state.ts | 111 +++++++++++++++++++++++++++++++ 2 files changed, 130 insertions(+), 9 deletions(-) diff --git a/src/screens/Onboarding/index.tsx b/src/screens/Onboarding/index.tsx index 32ad53497c..08ba2f3d18 100644 --- a/src/screens/Onboarding/index.tsx +++ b/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`), } }, [_]) diff --git a/src/screens/Onboarding/state.ts b/src/screens/Onboarding/state.ts index f813f14603..4f996d1397 100644 --- a/src/screens/Onboarding/state.ts +++ b/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 +}