New Onboarding (#2596)
* Add round and square buttons
* Allow some style for buttons, add icons
* Change text selection color
* Center button text, whoops
* Outer layout, some primitive updates
* WIP
* onboarding feed prefs (#2590)
* add `style` to toggle label to modify text style
* Revert "add `style` to toggle label to modify text style"
This reverts commit 8f4b517b85.
* following feed prefs
* remove unnecessary memo
* reusable divider component
* org imports
* add finished screen
* Theme SelectedAccountCard
* Require at least 3 interests
* Placeholder save logic
* WIP algo feeds
* Improve lineHeight handling, add RichText, improve Link by adding InlineLink
* Inherit lineHeight in heading comps
* Algo feeds mostly good
* Topical feeds ish
* Layout cleanup
* Improve button styles
* moderation prefs for onboarding (#2594)
* WIP algo feeds
* modify controlalbelgroup typing for easy .map()
* adjust padding on button
* add moderation screen
* add moderation screen
* add moderation screen
---------
Co-authored-by: Eric Bailey <git@esb.lol>
* Fix toggle button styles
* A11y props on outer portal
* Put it all on red
* New data shape
* Handle mock data
* Bulk write (not yet)
* Remove interests validation
* Clean up interests
* i18n layout and first step
* Clean up suggested follows screen
* Clean up following step
* Clean up algo feeds step
* Clean up topical feeds
* Add skeleton for feed card
* WIP moderation step
* cleanup moderation styles (#2605)
* cleanup moderation styles
* fix(?) toggle button group styles
* adjust toggle to fit any screen
* Some more cleanup
* Icons
* ToggleButton tweaks
* Reset
* Hook up data
* Better suggestions
* Bulk write
* Some logging
* Use new api
* Concat topical feeds
* Metrics
* Disable links in RichText, feedcards
* Tweak primary feed cards
* Update metrics
* Fix layout shift
* Fix ToggleButton again, whoops
* Error state
* Bump api package, ensure interests are saved
* Better fix for autofill
* i18n, button positions
* Remove unused export
* Add default prefs object
* Fix overflow in user cards
* Add 2 lines of bios to suggested accounts cards
* Nits
* Don't resolve facets by default
* Update storybook
* Disable flag for now
* Remove age dialog from moderations step
* Improvements and tweaks to new onboarding
---------
Co-authored-by: Hailey <153161762+haileyok@users.noreply.github.com>
Co-authored-by: Paul Frazee <pfrazee@gmail.com>
This commit is contained in:
Eric Bailey
@@ -0,0 +1,201 @@
|
||||
import React from 'react'
|
||||
|
||||
import {ApiResponseMap} from '#/screens/Onboarding/StepInterests/data'
|
||||
import {logger} from '#/logger'
|
||||
|
||||
export type OnboardingState = {
|
||||
hasPrev: boolean
|
||||
totalSteps: number
|
||||
activeStep:
|
||||
| 'interests'
|
||||
| 'suggestedAccounts'
|
||||
| 'followingFeed'
|
||||
| 'algoFeeds'
|
||||
| 'topicalFeeds'
|
||||
| 'moderation'
|
||||
| 'finished'
|
||||
activeStepIndex: number
|
||||
|
||||
interestsStepResults: {
|
||||
selectedInterests: string[]
|
||||
apiResponse: ApiResponseMap
|
||||
}
|
||||
suggestedAccountsStepResults: {
|
||||
accountDids: string[]
|
||||
}
|
||||
algoFeedsStepResults: {
|
||||
feedUris: string[]
|
||||
}
|
||||
topicalFeedsStepResults: {
|
||||
feedUris: string[]
|
||||
}
|
||||
}
|
||||
|
||||
export type OnboardingAction =
|
||||
| {
|
||||
type: 'next'
|
||||
}
|
||||
| {
|
||||
type: 'prev'
|
||||
}
|
||||
| {
|
||||
type: 'finish'
|
||||
}
|
||||
| {
|
||||
type: 'setInterestsStepResults'
|
||||
selectedInterests: string[]
|
||||
apiResponse: ApiResponseMap
|
||||
}
|
||||
| {
|
||||
type: 'setSuggestedAccountsStepResults'
|
||||
accountDids: string[]
|
||||
}
|
||||
| {
|
||||
type: 'setAlgoFeedsStepResults'
|
||||
feedUris: string[]
|
||||
}
|
||||
| {
|
||||
type: 'setTopicalFeedsStepResults'
|
||||
feedUris: string[]
|
||||
}
|
||||
|
||||
export const initialState: OnboardingState = {
|
||||
hasPrev: false,
|
||||
totalSteps: 7,
|
||||
activeStep: 'interests',
|
||||
activeStepIndex: 1,
|
||||
|
||||
interestsStepResults: {
|
||||
selectedInterests: [],
|
||||
apiResponse: {
|
||||
interests: [],
|
||||
suggestedAccountDids: {},
|
||||
suggestedFeedUris: {},
|
||||
},
|
||||
},
|
||||
suggestedAccountsStepResults: {
|
||||
accountDids: [],
|
||||
},
|
||||
algoFeedsStepResults: {
|
||||
feedUris: [],
|
||||
},
|
||||
topicalFeedsStepResults: {
|
||||
feedUris: [],
|
||||
},
|
||||
}
|
||||
|
||||
export const Context = React.createContext<{
|
||||
state: OnboardingState
|
||||
dispatch: React.Dispatch<OnboardingAction>
|
||||
}>({
|
||||
state: {...initialState},
|
||||
dispatch: () => {},
|
||||
})
|
||||
|
||||
export function reducer(
|
||||
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.info(`onboarding: step changed`, {activeStep: state.activeStep})
|
||||
}
|
||||
|
||||
return state
|
||||
}
|
||||
Reference in New Issue
Block a user