diff options
| -rw-r--r-- | src/lib/statsig/gates.ts | 1 | ||||
| -rw-r--r-- | src/screens/Onboarding/index.tsx | 29 | ||||
| -rw-r--r-- | src/screens/Onboarding/state.ts | 133 |
3 files changed, 154 insertions, 9 deletions
diff --git a/src/lib/statsig/gates.ts b/src/lib/statsig/gates.ts index 43e2086c2..a2dbb4950 100644 --- a/src/lib/statsig/gates.ts +++ b/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' diff --git a/src/screens/Onboarding/index.tsx b/src/screens/Onboarding/index.tsx index 9e5029e87..429649106 100644 --- a/src/screens/Onboarding/index.tsx +++ b/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 { diff --git a/src/screens/Onboarding/state.ts b/src/screens/Onboarding/state.ts index 969edbdd2..d67dc88f3 100644 --- a/src/screens/Onboarding/state.ts +++ b/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 +} |