forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Add gate, a:a swap onboarding state (#3930)
authored by
Eric Bailey
and committed by
GitHub
13418455
2fe76333
+154
-9
+1
src/lib/statsig/gates.ts
+1
src/lib/statsig/gates.ts
+20
-9
src/screens/Onboarding/index.tsx
+20
-9
src/screens/Onboarding/index.tsx
···
1
1
import React from 'react'
2
-
import {useLingui} from '@lingui/react'
3
2
import {msg} from '@lingui/macro'
4
-
5
-
import {Portal} from '#/components/Portal'
3
+
import {useLingui} from '@lingui/react'
6
4
7
-
import {Context, initialState, reducer} from '#/screens/Onboarding/state'
5
+
import {useGate} from '#/lib/statsig/statsig'
8
6
import {Layout, OnboardingControls} from '#/screens/Onboarding/Layout'
7
+
import {
8
+
Context,
9
+
initialState,
10
+
initialStateReduced,
11
+
reducer,
12
+
reducerReduced,
13
+
} from '#/screens/Onboarding/state'
14
+
import {StepAlgoFeeds} from '#/screens/Onboarding/StepAlgoFeeds'
15
+
import {StepFinished} from '#/screens/Onboarding/StepFinished'
16
+
import {StepFollowingFeed} from '#/screens/Onboarding/StepFollowingFeed'
9
17
import {StepInterests} from '#/screens/Onboarding/StepInterests'
18
+
import {StepModeration} from '#/screens/Onboarding/StepModeration'
10
19
import {StepSuggestedAccounts} from '#/screens/Onboarding/StepSuggestedAccounts'
11
-
import {StepFollowingFeed} from '#/screens/Onboarding/StepFollowingFeed'
12
-
import {StepAlgoFeeds} from '#/screens/Onboarding/StepAlgoFeeds'
13
20
import {StepTopicalFeeds} from '#/screens/Onboarding/StepTopicalFeeds'
14
-
import {StepFinished} from '#/screens/Onboarding/StepFinished'
15
-
import {StepModeration} from '#/screens/Onboarding/StepModeration'
21
+
import {Portal} from '#/components/Portal'
16
22
17
23
export function Onboarding() {
18
24
const {_} = useLingui()
19
-
const [state, dispatch] = React.useReducer(reducer, {...initialState})
25
+
const gate = useGate()
26
+
const isReducedOnboardingEnabled = gate('reduced_onboarding_and_home_algo')
27
+
const [state, dispatch] = React.useReducer(
28
+
isReducedOnboardingEnabled ? reducerReduced : reducer,
29
+
isReducedOnboardingEnabled ? {...initialStateReduced} : {...initialState},
30
+
)
20
31
21
32
const interestsDisplayNames = React.useMemo(() => {
22
33
return {
+133
src/screens/Onboarding/state.ts
+133
src/screens/Onboarding/state.ts
···
237
237
238
238
return state
239
239
}
240
+
241
+
export const initialStateReduced: OnboardingState = {
242
+
hasPrev: false,
243
+
totalSteps: 7,
244
+
activeStep: 'interests',
245
+
activeStepIndex: 1,
246
+
247
+
interestsStepResults: {
248
+
selectedInterests: [],
249
+
apiResponse: {
250
+
interests: [],
251
+
suggestedAccountDids: {},
252
+
suggestedFeedUris: {},
253
+
},
254
+
},
255
+
suggestedAccountsStepResults: {
256
+
accountDids: [],
257
+
},
258
+
algoFeedsStepResults: {
259
+
feedUris: [],
260
+
},
261
+
topicalFeedsStepResults: {
262
+
feedUris: [],
263
+
},
264
+
}
265
+
266
+
export function reducerReduced(
267
+
s: OnboardingState,
268
+
a: OnboardingAction,
269
+
): OnboardingState {
270
+
let next = {...s}
271
+
272
+
switch (a.type) {
273
+
case 'next': {
274
+
if (s.activeStep === 'interests') {
275
+
next.activeStep = 'suggestedAccounts'
276
+
next.activeStepIndex = 2
277
+
} else if (s.activeStep === 'suggestedAccounts') {
278
+
next.activeStep = 'followingFeed'
279
+
next.activeStepIndex = 3
280
+
} else if (s.activeStep === 'followingFeed') {
281
+
next.activeStep = 'algoFeeds'
282
+
next.activeStepIndex = 4
283
+
} else if (s.activeStep === 'algoFeeds') {
284
+
next.activeStep = 'topicalFeeds'
285
+
next.activeStepIndex = 5
286
+
} else if (s.activeStep === 'topicalFeeds') {
287
+
next.activeStep = 'moderation'
288
+
next.activeStepIndex = 6
289
+
} else if (s.activeStep === 'moderation') {
290
+
next.activeStep = 'finished'
291
+
next.activeStepIndex = 7
292
+
}
293
+
break
294
+
}
295
+
case 'prev': {
296
+
if (s.activeStep === 'suggestedAccounts') {
297
+
next.activeStep = 'interests'
298
+
next.activeStepIndex = 1
299
+
} else if (s.activeStep === 'followingFeed') {
300
+
next.activeStep = 'suggestedAccounts'
301
+
next.activeStepIndex = 2
302
+
} else if (s.activeStep === 'algoFeeds') {
303
+
next.activeStep = 'followingFeed'
304
+
next.activeStepIndex = 3
305
+
} else if (s.activeStep === 'topicalFeeds') {
306
+
next.activeStep = 'algoFeeds'
307
+
next.activeStepIndex = 4
308
+
} else if (s.activeStep === 'moderation') {
309
+
next.activeStep = 'topicalFeeds'
310
+
next.activeStepIndex = 5
311
+
} else if (s.activeStep === 'finished') {
312
+
next.activeStep = 'moderation'
313
+
next.activeStepIndex = 6
314
+
}
315
+
break
316
+
}
317
+
case 'finish': {
318
+
next = initialState
319
+
break
320
+
}
321
+
case 'setInterestsStepResults': {
322
+
next.interestsStepResults = {
323
+
selectedInterests: a.selectedInterests,
324
+
apiResponse: a.apiResponse,
325
+
}
326
+
break
327
+
}
328
+
case 'setSuggestedAccountsStepResults': {
329
+
next.suggestedAccountsStepResults = {
330
+
accountDids: next.suggestedAccountsStepResults.accountDids.concat(
331
+
a.accountDids,
332
+
),
333
+
}
334
+
break
335
+
}
336
+
case 'setAlgoFeedsStepResults': {
337
+
next.algoFeedsStepResults = {
338
+
feedUris: a.feedUris,
339
+
}
340
+
break
341
+
}
342
+
case 'setTopicalFeedsStepResults': {
343
+
next.topicalFeedsStepResults = {
344
+
feedUris: next.topicalFeedsStepResults.feedUris.concat(a.feedUris),
345
+
}
346
+
break
347
+
}
348
+
}
349
+
350
+
const state = {
351
+
...next,
352
+
hasPrev: next.activeStep !== 'interests',
353
+
}
354
+
355
+
logger.debug(`onboarding`, {
356
+
hasPrev: state.hasPrev,
357
+
activeStep: state.activeStep,
358
+
activeStepIndex: state.activeStepIndex,
359
+
interestsStepResults: {
360
+
selectedInterests: state.interestsStepResults.selectedInterests,
361
+
},
362
+
suggestedAccountsStepResults: state.suggestedAccountsStepResults,
363
+
algoFeedsStepResults: state.algoFeedsStepResults,
364
+
topicalFeedsStepResults: state.topicalFeedsStepResults,
365
+
})
366
+
367
+
if (s.activeStep !== state.activeStep) {
368
+
logger.debug(`onboarding: step changed`, {activeStep: state.activeStep})
369
+
}
370
+
371
+
return state
372
+
}