Remove old onboarding (#4224)
* Hardcode onboarding_v2 to true, rm dead code * Rm initialState, use initialStateReduced * Rm dead code * Drop *reduced prefix in code * Prettierzio/stable
dan
GitHub
parent
9bd411c151
commit
adbbded003
|
|
@ -1,5 +1,4 @@
|
|||
export type Gate =
|
||||
// Keep this alphabetic please.
|
||||
| 'reduced_onboarding_and_home_algo_v2'
|
||||
| 'request_notifications_permission_after_onboarding'
|
||||
| 'show_follow_back_label_v2'
|
||||
|
|
|
|||
|
|
@ -1,378 +0,0 @@
|
|||
import React from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {Image} from 'expo-image'
|
||||
import {LinearGradient} from 'expo-linear-gradient'
|
||||
import {msg, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
import {FeedSourceInfo, useFeedSourceInfoQuery} from '#/state/queries/feed'
|
||||
import {FeedConfig} from '#/screens/Onboarding/StepAlgoFeeds'
|
||||
import {atoms as a, useTheme} from '#/alf'
|
||||
import * as Toggle from '#/components/forms/Toggle'
|
||||
import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
|
||||
import {RichText} from '#/components/RichText'
|
||||
import {Text} from '#/components/Typography'
|
||||
|
||||
function PrimaryFeedCardInner({
|
||||
feed,
|
||||
config,
|
||||
}: {
|
||||
feed: FeedSourceInfo
|
||||
config: FeedConfig
|
||||
}) {
|
||||
const t = useTheme()
|
||||
const ctx = Toggle.useItemContext()
|
||||
|
||||
const styles = React.useMemo(
|
||||
() => ({
|
||||
active: [t.atoms.bg_contrast_25],
|
||||
selected: [
|
||||
a.shadow_md,
|
||||
{
|
||||
backgroundColor:
|
||||
t.name === 'light' ? t.palette.primary_50 : t.palette.primary_950,
|
||||
},
|
||||
],
|
||||
selectedHover: [
|
||||
{
|
||||
backgroundColor:
|
||||
t.name === 'light' ? t.palette.primary_25 : t.palette.primary_975,
|
||||
},
|
||||
],
|
||||
textSelected: [{color: t.palette.white}],
|
||||
checkboxSelected: [
|
||||
{
|
||||
borderColor: t.palette.white,
|
||||
},
|
||||
],
|
||||
}),
|
||||
[t],
|
||||
)
|
||||
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
a.relative,
|
||||
a.w_full,
|
||||
a.p_lg,
|
||||
a.rounded_md,
|
||||
a.overflow_hidden,
|
||||
t.atoms.bg_contrast_50,
|
||||
(ctx.hovered || ctx.focused || ctx.pressed) && styles.active,
|
||||
ctx.selected && styles.selected,
|
||||
ctx.selected &&
|
||||
(ctx.hovered || ctx.focused || ctx.pressed) &&
|
||||
styles.selectedHover,
|
||||
]}>
|
||||
{ctx.selected && config.gradient && (
|
||||
<LinearGradient
|
||||
colors={config.gradient.values.map(v => v[1])}
|
||||
locations={config.gradient.values.map(v => v[0])}
|
||||
start={{x: 0, y: 0}}
|
||||
end={{x: 1, y: 1}}
|
||||
style={[a.absolute, a.inset_0]}
|
||||
/>
|
||||
)}
|
||||
|
||||
<View style={[a.flex_row, a.align_center, a.justify_between, a.gap_lg]}>
|
||||
<View
|
||||
style={[
|
||||
{
|
||||
width: 64,
|
||||
height: 64,
|
||||
},
|
||||
a.rounded_sm,
|
||||
a.overflow_hidden,
|
||||
t.atoms.bg,
|
||||
]}>
|
||||
<Image
|
||||
source={{uri: feed.avatar}}
|
||||
style={[a.w_full, a.h_full]}
|
||||
accessibilityIgnoresInvertColors
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={[a.pt_xs, a.flex_grow]}>
|
||||
<Text
|
||||
style={[
|
||||
a.text_lg,
|
||||
a.font_bold,
|
||||
ctx.selected && styles.textSelected,
|
||||
]}>
|
||||
{feed.displayName}
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
style={[
|
||||
{opacity: 0.6},
|
||||
a.text_md,
|
||||
a.py_xs,
|
||||
ctx.selected && styles.textSelected,
|
||||
]}>
|
||||
<Trans>by @{feed.creatorHandle}</Trans>
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={[
|
||||
{
|
||||
width: 28,
|
||||
height: 28,
|
||||
},
|
||||
a.justify_center,
|
||||
a.align_center,
|
||||
a.rounded_sm,
|
||||
ctx.selected ? [a.border, styles.checkboxSelected] : t.atoms.bg,
|
||||
]}>
|
||||
{ctx.selected && <Check size="sm" fill={t.palette.white} />}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={[
|
||||
{
|
||||
opacity: ctx.selected ? 0.3 : 1,
|
||||
borderTopWidth: 1,
|
||||
},
|
||||
a.mt_md,
|
||||
a.w_full,
|
||||
t.atoms.border_contrast_low,
|
||||
ctx.selected && {
|
||||
borderTopColor: t.palette.white,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<View style={[a.pt_md]}>
|
||||
<RichText
|
||||
value={feed.description}
|
||||
style={[
|
||||
a.text_md,
|
||||
ctx.selected &&
|
||||
(t.name === 'light'
|
||||
? t.atoms.text_inverted
|
||||
: {color: t.palette.white}),
|
||||
]}
|
||||
disableLinks
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export function PrimaryFeedCard({config}: {config: FeedConfig}) {
|
||||
const {_} = useLingui()
|
||||
const {data: feed} = useFeedSourceInfoQuery({uri: config.uri})
|
||||
|
||||
return !feed ? (
|
||||
<FeedCardPlaceholder primary />
|
||||
) : (
|
||||
<Toggle.Item
|
||||
name={feed.uri}
|
||||
label={_(msg`Subscribe to the ${feed.displayName} feed`)}>
|
||||
<PrimaryFeedCardInner config={config} feed={feed} />
|
||||
</Toggle.Item>
|
||||
)
|
||||
}
|
||||
|
||||
function FeedCardInner({feed}: {feed: FeedSourceInfo; config: FeedConfig}) {
|
||||
const t = useTheme()
|
||||
const ctx = Toggle.useItemContext()
|
||||
|
||||
const styles = React.useMemo(
|
||||
() => ({
|
||||
active: [t.atoms.bg_contrast_25],
|
||||
selected: [
|
||||
{
|
||||
backgroundColor:
|
||||
t.name === 'light' ? t.palette.primary_50 : t.palette.primary_950,
|
||||
},
|
||||
],
|
||||
selectedHover: [
|
||||
{
|
||||
backgroundColor:
|
||||
t.name === 'light' ? t.palette.primary_25 : t.palette.primary_975,
|
||||
},
|
||||
],
|
||||
textSelected: [],
|
||||
checkboxSelected: [
|
||||
{
|
||||
backgroundColor: t.palette.primary_500,
|
||||
},
|
||||
],
|
||||
}),
|
||||
[t],
|
||||
)
|
||||
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
a.relative,
|
||||
a.w_full,
|
||||
a.p_md,
|
||||
a.rounded_md,
|
||||
a.overflow_hidden,
|
||||
t.atoms.bg_contrast_50,
|
||||
(ctx.hovered || ctx.focused || ctx.pressed) && styles.active,
|
||||
ctx.selected && styles.selected,
|
||||
ctx.selected &&
|
||||
(ctx.hovered || ctx.focused || ctx.pressed) &&
|
||||
styles.selectedHover,
|
||||
]}>
|
||||
<View style={[a.flex_row, a.align_center, a.justify_between, a.gap_lg]}>
|
||||
<View
|
||||
style={[
|
||||
{
|
||||
width: 44,
|
||||
height: 44,
|
||||
},
|
||||
a.rounded_sm,
|
||||
a.overflow_hidden,
|
||||
t.atoms.bg,
|
||||
]}>
|
||||
<Image
|
||||
source={{uri: feed.avatar}}
|
||||
style={[a.w_full, a.h_full]}
|
||||
accessibilityIgnoresInvertColors
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={[a.pt_2xs, a.flex_1, a.flex_grow]}>
|
||||
<Text
|
||||
style={[
|
||||
a.text_md,
|
||||
a.font_bold,
|
||||
ctx.selected && styles.textSelected,
|
||||
]}
|
||||
numberOfLines={1}>
|
||||
{feed.displayName}
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
{opacity: 0.8},
|
||||
a.pt_xs,
|
||||
ctx.selected && styles.textSelected,
|
||||
]}>
|
||||
@{feed.creatorHandle}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={[
|
||||
a.justify_center,
|
||||
a.align_center,
|
||||
a.rounded_sm,
|
||||
t.atoms.bg,
|
||||
ctx.selected && styles.checkboxSelected,
|
||||
{
|
||||
width: 28,
|
||||
height: 28,
|
||||
},
|
||||
]}>
|
||||
{ctx.selected && <Check size="sm" fill={t.palette.white} />}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={[
|
||||
{
|
||||
opacity: ctx.selected ? 0.3 : 1,
|
||||
borderTopWidth: 1,
|
||||
},
|
||||
a.mt_md,
|
||||
a.w_full,
|
||||
t.atoms.border_contrast_low,
|
||||
ctx.selected && {
|
||||
borderTopColor: t.palette.primary_200,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<View style={[a.pt_md]}>
|
||||
<RichText value={feed.description} disableLinks />
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export function FeedCard({config}: {config: FeedConfig}) {
|
||||
const {_} = useLingui()
|
||||
const {data: feed} = useFeedSourceInfoQuery({uri: config.uri})
|
||||
|
||||
return !feed ? (
|
||||
<FeedCardPlaceholder />
|
||||
) : feed.avatar ? (
|
||||
<Toggle.Item
|
||||
name={feed.uri}
|
||||
label={_(msg`Subscribe to the ${feed.displayName} feed`)}>
|
||||
<FeedCardInner config={config} feed={feed} />
|
||||
</Toggle.Item>
|
||||
) : null
|
||||
}
|
||||
|
||||
export function FeedCardPlaceholder({primary}: {primary?: boolean}) {
|
||||
const t = useTheme()
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
a.relative,
|
||||
a.w_full,
|
||||
a.p_md,
|
||||
a.rounded_md,
|
||||
a.overflow_hidden,
|
||||
t.atoms.bg_contrast_25,
|
||||
]}>
|
||||
<View style={[a.flex_row, a.align_center, a.justify_between, a.gap_lg]}>
|
||||
<View
|
||||
style={[
|
||||
{
|
||||
width: primary ? 64 : 44,
|
||||
height: primary ? 64 : 44,
|
||||
},
|
||||
a.rounded_sm,
|
||||
a.overflow_hidden,
|
||||
t.atoms.bg_contrast_100,
|
||||
]}
|
||||
/>
|
||||
|
||||
<View style={[a.pt_2xs, a.flex_grow, a.gap_sm]}>
|
||||
<View
|
||||
style={[
|
||||
{width: 100, height: primary ? 20 : 16},
|
||||
a.rounded_sm,
|
||||
t.atoms.bg_contrast_100,
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
{width: 60, height: 12},
|
||||
a.rounded_sm,
|
||||
t.atoms.bg_contrast_100,
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={[
|
||||
{
|
||||
borderTopWidth: 1,
|
||||
},
|
||||
a.mt_md,
|
||||
a.w_full,
|
||||
t.atoms.border_contrast_low,
|
||||
]}
|
||||
/>
|
||||
|
||||
<View style={[a.pt_md, a.gap_xs]}>
|
||||
<View
|
||||
style={[
|
||||
{width: '60%', height: 12},
|
||||
a.rounded_sm,
|
||||
t.atoms.bg_contrast_100,
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,168 +0,0 @@
|
|||
import React from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {msg, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
import {useAnalytics} from '#/lib/analytics/analytics'
|
||||
import {logEvent} from '#/lib/statsig/statsig'
|
||||
import {
|
||||
DescriptionText,
|
||||
OnboardingControls,
|
||||
TitleText,
|
||||
} from '#/screens/Onboarding/Layout'
|
||||
import {Context} from '#/screens/Onboarding/state'
|
||||
import {FeedCard} from '#/screens/Onboarding/StepAlgoFeeds/FeedCard'
|
||||
import {atoms as a, tokens, useTheme} from '#/alf'
|
||||
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
|
||||
import * as Toggle from '#/components/forms/Toggle'
|
||||
import {IconCircle} from '#/components/IconCircle'
|
||||
import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
|
||||
import {ListSparkle_Stroke2_Corner0_Rounded as ListSparkle} from '#/components/icons/ListSparkle'
|
||||
import {Loader} from '#/components/Loader'
|
||||
import {Text} from '#/components/Typography'
|
||||
import {IS_PROD} from '#/env'
|
||||
|
||||
export type FeedConfig = {
|
||||
default: boolean
|
||||
uri: string
|
||||
gradient?: typeof tokens.gradients.midnight | typeof tokens.gradients.nordic
|
||||
}
|
||||
|
||||
export const PRIMARY_FEEDS: FeedConfig[] = [
|
||||
{
|
||||
default: IS_PROD, // these feeds are only available in prod
|
||||
uri: 'at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/whats-hot',
|
||||
gradient: tokens.gradients.midnight,
|
||||
},
|
||||
]
|
||||
|
||||
const SECONDARY_FEEDS: FeedConfig[] = [
|
||||
{
|
||||
default: false,
|
||||
uri: 'at://did:plc:vpkhqolt662uhesyj6nxm7ys/app.bsky.feed.generator/infreq',
|
||||
},
|
||||
{
|
||||
default: false,
|
||||
uri: 'at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/with-friends',
|
||||
},
|
||||
{
|
||||
default: false,
|
||||
uri: 'at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/best-of-follows',
|
||||
},
|
||||
{
|
||||
default: false,
|
||||
uri: 'at://did:plc:tenurhgjptubkk5zf5qhi3og/app.bsky.feed.generator/catch-up',
|
||||
},
|
||||
{
|
||||
default: false,
|
||||
uri: 'at://did:plc:q6gjnaw2blty4crticxkmujt/app.bsky.feed.generator/at-bangers',
|
||||
},
|
||||
]
|
||||
|
||||
export function StepAlgoFeeds() {
|
||||
const {_} = useLingui()
|
||||
const {track} = useAnalytics()
|
||||
const t = useTheme()
|
||||
const {state, dispatch} = React.useContext(Context)
|
||||
const [primaryFeedUris, setPrimaryFeedUris] = React.useState<string[]>(
|
||||
PRIMARY_FEEDS.map(f => (f.default ? f.uri : '')).filter(Boolean),
|
||||
)
|
||||
const [secondaryFeedUris, setSeconaryFeedUris] = React.useState<string[]>([])
|
||||
const [saving, setSaving] = React.useState(false)
|
||||
|
||||
const saveFeeds = React.useCallback(async () => {
|
||||
setSaving(true)
|
||||
|
||||
const uris = primaryFeedUris.concat(secondaryFeedUris)
|
||||
dispatch({type: 'setAlgoFeedsStepResults', feedUris: uris})
|
||||
|
||||
setSaving(false)
|
||||
dispatch({type: 'next'})
|
||||
track('OnboardingV2:StepAlgoFeeds:End', {
|
||||
selectedPrimaryFeeds: primaryFeedUris,
|
||||
selectedPrimaryFeedsLength: primaryFeedUris.length,
|
||||
selectedSecondaryFeeds: secondaryFeedUris,
|
||||
selectedSecondaryFeedsLength: secondaryFeedUris.length,
|
||||
})
|
||||
logEvent('onboarding:algoFeeds:nextPressed', {
|
||||
selectedPrimaryFeeds: primaryFeedUris,
|
||||
selectedPrimaryFeedsLength: primaryFeedUris.length,
|
||||
selectedSecondaryFeeds: secondaryFeedUris,
|
||||
selectedSecondaryFeedsLength: secondaryFeedUris.length,
|
||||
})
|
||||
}, [primaryFeedUris, secondaryFeedUris, dispatch, track])
|
||||
|
||||
React.useEffect(() => {
|
||||
track('OnboardingV2:StepAlgoFeeds:Start')
|
||||
}, [track])
|
||||
|
||||
return (
|
||||
<View style={[a.align_start]}>
|
||||
<IconCircle icon={ListSparkle} style={[a.mb_2xl]} />
|
||||
|
||||
<TitleText>
|
||||
<Trans>Choose your main feeds</Trans>
|
||||
</TitleText>
|
||||
<DescriptionText>
|
||||
<Trans>
|
||||
Custom feeds built by the community bring you new experiences and help
|
||||
you find the content you love.
|
||||
</Trans>
|
||||
</DescriptionText>
|
||||
|
||||
<View style={[a.w_full, a.pb_2xl]}>
|
||||
<Toggle.Group
|
||||
values={primaryFeedUris}
|
||||
onChange={setPrimaryFeedUris}
|
||||
label={_(msg`Select your primary algorithmic feeds`)}>
|
||||
<Text
|
||||
style={[
|
||||
a.text_md,
|
||||
a.pt_4xl,
|
||||
a.pb_md,
|
||||
t.atoms.text_contrast_medium,
|
||||
]}>
|
||||
<Trans>We recommend our "Discover" feed:</Trans>
|
||||
</Text>
|
||||
<FeedCard config={PRIMARY_FEEDS[0]} />
|
||||
</Toggle.Group>
|
||||
|
||||
<Toggle.Group
|
||||
values={secondaryFeedUris}
|
||||
onChange={setSeconaryFeedUris}
|
||||
label={_(msg`Select your secondary algorithmic feeds`)}>
|
||||
<Text
|
||||
style={[
|
||||
a.text_md,
|
||||
a.pt_4xl,
|
||||
a.pb_lg,
|
||||
t.atoms.text_contrast_medium,
|
||||
]}>
|
||||
<Trans>There are many feeds to try:</Trans>
|
||||
</Text>
|
||||
<View style={[a.gap_md]}>
|
||||
{SECONDARY_FEEDS.map(config => (
|
||||
<FeedCard key={config.uri} config={config} />
|
||||
))}
|
||||
</View>
|
||||
</Toggle.Group>
|
||||
</View>
|
||||
|
||||
<OnboardingControls.Portal>
|
||||
<Button
|
||||
disabled={saving}
|
||||
key={state.activeStep} // remove focus state on nav
|
||||
variant="gradient"
|
||||
color="gradient_sky"
|
||||
size="large"
|
||||
label={_(msg`Continue to the next step`)}
|
||||
onPress={saveFeeds}>
|
||||
<ButtonText>
|
||||
<Trans>Continue</Trans>
|
||||
</ButtonText>
|
||||
<ButtonIcon icon={saving ? Loader : ChevronRight} position="right" />
|
||||
</Button>
|
||||
</OnboardingControls.Portal>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,19 +1,14 @@
|
|||
import React from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {TID} from '@atproto/common-web'
|
||||
import {msg, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {useQueryClient} from '@tanstack/react-query'
|
||||
|
||||
import {useAnalytics} from '#/lib/analytics/analytics'
|
||||
import {BSKY_APP_ACCOUNT_DID, IS_PROD_SERVICE} from '#/lib/constants'
|
||||
import {DISCOVER_SAVED_FEED, TIMELINE_SAVED_FEED} from '#/lib/constants'
|
||||
import {logEvent, useGate} from '#/lib/statsig/statsig'
|
||||
import {BSKY_APP_ACCOUNT_DID} from '#/lib/constants'
|
||||
import {logEvent} from '#/lib/statsig/statsig'
|
||||
import {logger} from '#/logger'
|
||||
import {
|
||||
preferencesQueryKey,
|
||||
useOverwriteSavedFeedsMutation,
|
||||
} from '#/state/queries/preferences'
|
||||
import {preferencesQueryKey} from '#/state/queries/preferences'
|
||||
import {RQKEY as profileRQKey} from '#/state/queries/profile'
|
||||
import {useAgent} from '#/state/session'
|
||||
import {useOnboardingDispatch} from '#/state/shell'
|
||||
|
|
@ -24,10 +19,7 @@ import {
|
|||
TitleText,
|
||||
} from '#/screens/Onboarding/Layout'
|
||||
import {Context} from '#/screens/Onboarding/state'
|
||||
import {
|
||||
bulkWriteFollows,
|
||||
sortPrimaryAlgorithmFeeds,
|
||||
} from '#/screens/Onboarding/util'
|
||||
import {bulkWriteFollows} from '#/screens/Onboarding/util'
|
||||
import {atoms as a, useTheme} from '#/alf'
|
||||
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
|
||||
import {IconCircle} from '#/components/IconCircle'
|
||||
|
|
@ -45,83 +37,21 @@ export function StepFinished() {
|
|||
const {state, dispatch} = React.useContext(Context)
|
||||
const onboardDispatch = useOnboardingDispatch()
|
||||
const [saving, setSaving] = React.useState(false)
|
||||
const {mutateAsync: overwriteSavedFeeds} = useOverwriteSavedFeedsMutation()
|
||||
const queryClient = useQueryClient()
|
||||
const agent = useAgent()
|
||||
const gate = useGate()
|
||||
|
||||
const finishOnboarding = React.useCallback(async () => {
|
||||
setSaving(true)
|
||||
|
||||
// TODO uncomment
|
||||
const {
|
||||
interestsStepResults,
|
||||
suggestedAccountsStepResults,
|
||||
algoFeedsStepResults,
|
||||
topicalFeedsStepResults,
|
||||
profileStepResults,
|
||||
} = state
|
||||
const {interestsStepResults, profileStepResults} = state
|
||||
const {selectedInterests} = interestsStepResults
|
||||
const selectedFeeds = [
|
||||
...sortPrimaryAlgorithmFeeds(algoFeedsStepResults.feedUris),
|
||||
...topicalFeedsStepResults.feedUris,
|
||||
]
|
||||
|
||||
try {
|
||||
await Promise.all([
|
||||
bulkWriteFollows(
|
||||
agent,
|
||||
suggestedAccountsStepResults.accountDids.concat(BSKY_APP_ACCOUNT_DID),
|
||||
),
|
||||
// these must be serial
|
||||
bulkWriteFollows(agent, [BSKY_APP_ACCOUNT_DID]),
|
||||
(async () => {
|
||||
await agent.setInterestsPref({tags: selectedInterests})
|
||||
|
||||
/*
|
||||
* In the reduced onboading experiment, we'll rely on the default
|
||||
* feeds set in `createAgentAndCreateAccount`. No feeds will be
|
||||
* selected in onboarding and therefore we don't need to run this
|
||||
* code (which would overwrite the other feeds already set).
|
||||
*/
|
||||
if (!gate('reduced_onboarding_and_home_algo_v2')) {
|
||||
const otherFeeds = selectedFeeds.length
|
||||
? selectedFeeds.map(f => ({
|
||||
type: 'feed',
|
||||
value: f,
|
||||
pinned: true,
|
||||
id: TID.nextStr(),
|
||||
}))
|
||||
: []
|
||||
|
||||
/*
|
||||
* If no selected feeds and we're in prod, add the discover feed
|
||||
* (mimics old behavior)
|
||||
*/
|
||||
if (
|
||||
IS_PROD_SERVICE(agent.service.toString()) &&
|
||||
!otherFeeds.length
|
||||
) {
|
||||
otherFeeds.push({
|
||||
...DISCOVER_SAVED_FEED,
|
||||
pinned: true,
|
||||
id: TID.nextStr(),
|
||||
})
|
||||
}
|
||||
|
||||
await overwriteSavedFeeds([
|
||||
{
|
||||
...TIMELINE_SAVED_FEED,
|
||||
pinned: true,
|
||||
id: TID.nextStr(),
|
||||
},
|
||||
...otherFeeds,
|
||||
])
|
||||
}
|
||||
})(),
|
||||
|
||||
(async () => {
|
||||
if (!gate('reduced_onboarding_and_home_algo_v2')) return
|
||||
|
||||
const {imageUri, imageMime} = profileStepResults
|
||||
if (imageUri && imageMime) {
|
||||
const blobPromise = uploadBlob(agent, imageUri, imageMime)
|
||||
|
|
@ -134,7 +64,6 @@ export function StepFinished() {
|
|||
return existing
|
||||
})
|
||||
}
|
||||
|
||||
logEvent('onboarding:finished:avatarResult', {
|
||||
avatarResult: profileStepResults.isCreatedAvatar
|
||||
? 'created'
|
||||
|
|
@ -169,17 +98,7 @@ export function StepFinished() {
|
|||
track('OnboardingV2:StepFinished:End')
|
||||
track('OnboardingV2:Complete')
|
||||
logEvent('onboarding:finished:nextPressed', {})
|
||||
}, [
|
||||
state,
|
||||
dispatch,
|
||||
onboardDispatch,
|
||||
setSaving,
|
||||
overwriteSavedFeeds,
|
||||
track,
|
||||
agent,
|
||||
gate,
|
||||
queryClient,
|
||||
])
|
||||
}, [state, dispatch, onboardDispatch, setSaving, track, agent, queryClient])
|
||||
|
||||
React.useEffect(() => {
|
||||
track('OnboardingV2:StepFinished:Start')
|
||||
|
|
|
|||
|
|
@ -1,161 +0,0 @@
|
|||
import React from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {msg, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
import {useAnalytics} from '#/lib/analytics/analytics'
|
||||
import {logEvent} from '#/lib/statsig/statsig'
|
||||
import {
|
||||
usePreferencesQuery,
|
||||
useSetFeedViewPreferencesMutation,
|
||||
} from 'state/queries/preferences'
|
||||
import {
|
||||
DescriptionText,
|
||||
OnboardingControls,
|
||||
TitleText,
|
||||
} from '#/screens/Onboarding/Layout'
|
||||
import {Context} from '#/screens/Onboarding/state'
|
||||
import {atoms as a} from '#/alf'
|
||||
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
|
||||
import {Divider} from '#/components/Divider'
|
||||
import * as Toggle from '#/components/forms/Toggle'
|
||||
import {IconCircle} from '#/components/IconCircle'
|
||||
import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
|
||||
import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline'
|
||||
import {Text} from '#/components/Typography'
|
||||
|
||||
export function StepFollowingFeed() {
|
||||
const {_} = useLingui()
|
||||
const {track} = useAnalytics()
|
||||
const {dispatch} = React.useContext(Context)
|
||||
|
||||
const {data: preferences} = usePreferencesQuery()
|
||||
const {mutate: setFeedViewPref, variables} =
|
||||
useSetFeedViewPreferencesMutation()
|
||||
|
||||
const showReplies = !(
|
||||
variables?.hideReplies ?? preferences?.feedViewPrefs.hideReplies
|
||||
)
|
||||
const showReposts = !(
|
||||
variables?.hideReposts ?? preferences?.feedViewPrefs.hideReposts
|
||||
)
|
||||
const showQuotes = !(
|
||||
variables?.hideQuotePosts ?? preferences?.feedViewPrefs.hideQuotePosts
|
||||
)
|
||||
|
||||
const onContinue = React.useCallback(() => {
|
||||
dispatch({type: 'next'})
|
||||
track('OnboardingV2:StepFollowingFeed:End')
|
||||
logEvent('onboarding:followingFeed:nextPressed', {})
|
||||
}, [track, dispatch])
|
||||
|
||||
React.useEffect(() => {
|
||||
track('OnboardingV2:StepFollowingFeed:Start')
|
||||
}, [track])
|
||||
|
||||
return (
|
||||
// Hack for now to move the image container up
|
||||
<View style={[a.align_start]}>
|
||||
<IconCircle icon={FilterTimeline} style={[a.mb_2xl]} />
|
||||
|
||||
<TitleText>
|
||||
<Trans>Your default feed is "Following"</Trans>
|
||||
</TitleText>
|
||||
<DescriptionText style={[a.mb_md]}>
|
||||
<Trans>It shows posts from the people you follow as they happen.</Trans>
|
||||
</DescriptionText>
|
||||
|
||||
<View style={[a.w_full]}>
|
||||
<Toggle.Item
|
||||
name="Show Replies" // no need to translate
|
||||
label={_(msg`Show replies in Following feed`)}
|
||||
value={showReplies}
|
||||
onChange={() => {
|
||||
setFeedViewPref({
|
||||
hideReplies: showReplies,
|
||||
})
|
||||
}}>
|
||||
<View
|
||||
style={[
|
||||
a.flex_row,
|
||||
a.w_full,
|
||||
a.py_lg,
|
||||
a.justify_between,
|
||||
a.align_center,
|
||||
]}>
|
||||
<Text style={[a.text_md, a.font_bold]}>
|
||||
<Trans>Show replies in Following</Trans>
|
||||
</Text>
|
||||
<Toggle.Switch />
|
||||
</View>
|
||||
</Toggle.Item>
|
||||
<Divider />
|
||||
<Toggle.Item
|
||||
name="Show Reposts" // no need to translate
|
||||
label={_(msg`Show re-posts in Following feed`)}
|
||||
value={showReposts}
|
||||
onChange={() => {
|
||||
setFeedViewPref({
|
||||
hideReposts: showReposts,
|
||||
})
|
||||
}}>
|
||||
<View
|
||||
style={[
|
||||
a.flex_row,
|
||||
a.w_full,
|
||||
a.py_lg,
|
||||
a.justify_between,
|
||||
a.align_center,
|
||||
]}>
|
||||
<Text style={[a.text_md, a.font_bold]}>
|
||||
<Trans>Show reposts in Following</Trans>
|
||||
</Text>
|
||||
<Toggle.Switch />
|
||||
</View>
|
||||
</Toggle.Item>
|
||||
<Divider />
|
||||
<Toggle.Item
|
||||
name="Show Quotes" // no need to translate
|
||||
label={_(msg`Show quote-posts in Following feed`)}
|
||||
value={showQuotes}
|
||||
onChange={() => {
|
||||
setFeedViewPref({
|
||||
hideQuotePosts: showQuotes,
|
||||
})
|
||||
}}>
|
||||
<View
|
||||
style={[
|
||||
a.flex_row,
|
||||
a.w_full,
|
||||
a.py_lg,
|
||||
a.justify_between,
|
||||
a.align_center,
|
||||
]}>
|
||||
<Text style={[a.text_md, a.font_bold]}>
|
||||
<Trans>Show quotes in Following</Trans>
|
||||
</Text>
|
||||
<Toggle.Switch />
|
||||
</View>
|
||||
</Toggle.Item>
|
||||
</View>
|
||||
|
||||
<DescriptionText style={[a.mt_lg]}>
|
||||
<Trans>You can change these settings later.</Trans>
|
||||
</DescriptionText>
|
||||
|
||||
<OnboardingControls.Portal>
|
||||
<Button
|
||||
variant="gradient"
|
||||
color="gradient_sky"
|
||||
size="large"
|
||||
label={_(msg`Continue to next step`)}
|
||||
onPress={onContinue}>
|
||||
<ButtonText>
|
||||
<Trans>Continue</Trans>
|
||||
</ButtonText>
|
||||
<ButtonIcon icon={ChevronRight} position="right" />
|
||||
</Button>
|
||||
</OnboardingControls.Portal>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
@ -5,12 +5,11 @@ import {useLingui} from '@lingui/react'
|
|||
import {useQuery} from '@tanstack/react-query'
|
||||
|
||||
import {useAnalytics} from '#/lib/analytics/analytics'
|
||||
import {logEvent, useGate} from '#/lib/statsig/statsig'
|
||||
import {logEvent} from '#/lib/statsig/statsig'
|
||||
import {capitalize} from '#/lib/strings/capitalize'
|
||||
import {logger} from '#/logger'
|
||||
import {useAgent} from '#/state/session'
|
||||
import {useOnboardingDispatch} from '#/state/shell'
|
||||
import {useRequestNotificationsPermission} from 'lib/notifications/notifications'
|
||||
import {
|
||||
DescriptionText,
|
||||
OnboardingControls,
|
||||
|
|
@ -34,8 +33,6 @@ export function StepInterests() {
|
|||
const t = useTheme()
|
||||
const {gtMobile} = useBreakpoints()
|
||||
const {track} = useAnalytics()
|
||||
const gate = useGate()
|
||||
const requestNotificationsPermission = useRequestNotificationsPermission()
|
||||
|
||||
const {state, dispatch, interestsDisplayNames} = React.useContext(Context)
|
||||
const [saving, setSaving] = React.useState(false)
|
||||
|
|
@ -132,12 +129,6 @@ export function StepInterests() {
|
|||
track('OnboardingV2:StepInterests:Start')
|
||||
}, [track])
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!gate('reduced_onboarding_and_home_algo_v2')) {
|
||||
requestNotificationsPermission('StartOnboarding')
|
||||
}
|
||||
}, [gate, requestNotificationsPermission])
|
||||
|
||||
const title = isError ? (
|
||||
<Trans>Oh no! Something went wrong.</Trans>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -1,131 +0,0 @@
|
|||
import React from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {msg, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {UseMutateFunction} from '@tanstack/react-query'
|
||||
|
||||
import {logger} from '#/logger'
|
||||
import {isIOS} from '#/platform/detection'
|
||||
import {usePreferencesQuery} from '#/state/queries/preferences'
|
||||
import * as Toast from '#/view/com/util/Toast'
|
||||
import {atoms as a, useTheme} from '#/alf'
|
||||
import * as Toggle from '#/components/forms/Toggle'
|
||||
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
|
||||
import * as Prompt from '#/components/Prompt'
|
||||
import {Text} from '#/components/Typography'
|
||||
|
||||
function Card({children}: React.PropsWithChildren<{}>) {
|
||||
const t = useTheme()
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
a.w_full,
|
||||
a.flex_row,
|
||||
a.align_center,
|
||||
a.gap_sm,
|
||||
a.px_lg,
|
||||
a.py_md,
|
||||
a.rounded_sm,
|
||||
a.mb_md,
|
||||
t.atoms.bg_contrast_50,
|
||||
]}>
|
||||
{children}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export function AdultContentEnabledPref({
|
||||
mutate,
|
||||
variables,
|
||||
}: {
|
||||
mutate: UseMutateFunction<void, unknown, {enabled: boolean}, unknown>
|
||||
variables: {enabled: boolean} | undefined
|
||||
}) {
|
||||
const {_} = useLingui()
|
||||
const t = useTheme()
|
||||
const prompt = Prompt.usePromptControl()
|
||||
|
||||
// Reuse logic here form ContentFilteringSettings.tsx
|
||||
const {data: preferences} = usePreferencesQuery()
|
||||
|
||||
const onToggleAdultContent = React.useCallback(async () => {
|
||||
if (isIOS) {
|
||||
prompt.open()
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
mutate({
|
||||
enabled: !(
|
||||
variables?.enabled ?? preferences?.moderationPrefs.adultContentEnabled
|
||||
),
|
||||
})
|
||||
} catch (e) {
|
||||
Toast.show(
|
||||
_(msg`There was an issue syncing your preferences with the server`),
|
||||
)
|
||||
logger.error('Failed to update preferences with server', {error: e})
|
||||
}
|
||||
}, [variables, preferences, mutate, _, prompt])
|
||||
|
||||
if (!preferences) return null
|
||||
|
||||
return (
|
||||
<>
|
||||
{preferences.userAge && preferences.userAge >= 18 ? (
|
||||
<View style={[a.w_full, a.px_xs]}>
|
||||
<Toggle.Item
|
||||
name={_(msg`Enable adult content in your feeds`)}
|
||||
label={_(msg`Enable adult content in your feeds`)}
|
||||
value={
|
||||
variables?.enabled ??
|
||||
preferences?.moderationPrefs.adultContentEnabled
|
||||
}
|
||||
onChange={onToggleAdultContent}>
|
||||
<View
|
||||
style={[
|
||||
a.flex_row,
|
||||
a.w_full,
|
||||
a.justify_between,
|
||||
a.align_center,
|
||||
a.py_md,
|
||||
]}>
|
||||
<Text style={[a.font_bold]}>
|
||||
<Trans>Enable Adult Content</Trans>
|
||||
</Text>
|
||||
<Toggle.Switch />
|
||||
</View>
|
||||
</Toggle.Item>
|
||||
</View>
|
||||
) : (
|
||||
<Card>
|
||||
<CircleInfo size="sm" fill={t.palette.contrast_500} />
|
||||
<Text
|
||||
style={[
|
||||
a.flex_1,
|
||||
t.atoms.text_contrast_medium,
|
||||
a.leading_snug,
|
||||
{paddingTop: 1},
|
||||
]}>
|
||||
<Trans>You must be 18 years or older to enable adult content</Trans>
|
||||
</Text>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Prompt.Outer control={prompt}>
|
||||
<Prompt.TitleText>
|
||||
<Trans>Adult Content</Trans>
|
||||
</Prompt.TitleText>
|
||||
<Prompt.DescriptionText>
|
||||
<Trans>
|
||||
Due to Apple policies, adult content can only be enabled on the web
|
||||
after completing sign up.
|
||||
</Trans>
|
||||
</Prompt.DescriptionText>
|
||||
<Prompt.Actions>
|
||||
<Prompt.Action onPress={() => prompt.close()} cta={_(msg`OK`)} />
|
||||
</Prompt.Actions>
|
||||
</Prompt.Outer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
import React from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {InterpretedLabelValueDefinition, LabelPreference} from '@atproto/api'
|
||||
import {msg, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
import {useGlobalLabelStrings} from '#/lib/moderation/useGlobalLabelStrings'
|
||||
import {
|
||||
usePreferencesQuery,
|
||||
usePreferencesSetContentLabelMutation,
|
||||
} from '#/state/queries/preferences'
|
||||
import {atoms as a, useTheme} from '#/alf'
|
||||
import * as ToggleButton from '#/components/forms/ToggleButton'
|
||||
import {Text} from '#/components/Typography'
|
||||
|
||||
export function ModerationOption({
|
||||
labelValueDefinition,
|
||||
disabled,
|
||||
}: {
|
||||
labelValueDefinition: InterpretedLabelValueDefinition
|
||||
disabled?: boolean
|
||||
}) {
|
||||
const {_} = useLingui()
|
||||
const t = useTheme()
|
||||
const {data: preferences} = usePreferencesQuery()
|
||||
const {mutate, variables} = usePreferencesSetContentLabelMutation()
|
||||
const label = labelValueDefinition.identifier
|
||||
const visibility =
|
||||
variables?.visibility ?? preferences?.moderationPrefs.labels?.[label]
|
||||
|
||||
const allLabelStrings = useGlobalLabelStrings()
|
||||
const labelStrings =
|
||||
labelValueDefinition.identifier in allLabelStrings
|
||||
? allLabelStrings[labelValueDefinition.identifier]
|
||||
: {
|
||||
name: labelValueDefinition.identifier,
|
||||
description: `Labeled "${labelValueDefinition.identifier}"`,
|
||||
}
|
||||
|
||||
const onChange = React.useCallback(
|
||||
(vis: string[]) => {
|
||||
mutate({
|
||||
label,
|
||||
visibility: vis[0] as LabelPreference,
|
||||
labelerDid: undefined,
|
||||
})
|
||||
},
|
||||
[mutate, label],
|
||||
)
|
||||
|
||||
const labels = {
|
||||
hide: _(msg`Hide`),
|
||||
warn: _(msg`Warn`),
|
||||
show: _(msg`Show`),
|
||||
}
|
||||
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
a.flex_row,
|
||||
a.justify_between,
|
||||
a.gap_sm,
|
||||
a.py_xs,
|
||||
a.px_xs,
|
||||
a.align_center,
|
||||
]}>
|
||||
<View style={[a.gap_xs, a.flex_1]}>
|
||||
<Text style={[a.font_bold]}>{labelStrings.name}</Text>
|
||||
<Text style={[t.atoms.text_contrast_medium, a.leading_snug]}>
|
||||
{labelStrings.description}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={[a.justify_center, {minHeight: 40}]}>
|
||||
{disabled ? (
|
||||
<Text style={[a.font_bold]}>
|
||||
<Trans>Hide</Trans>
|
||||
</Text>
|
||||
) : (
|
||||
<ToggleButton.Group
|
||||
label={_(
|
||||
msg`Configure content filtering setting for category: ${labelStrings.name.toLowerCase()}`,
|
||||
)}
|
||||
values={[visibility ?? 'hide']}
|
||||
onChange={onChange}>
|
||||
<ToggleButton.Button name="ignore" label={labels.show}>
|
||||
<ToggleButton.ButtonText>{labels.show}</ToggleButton.ButtonText>
|
||||
</ToggleButton.Button>
|
||||
<ToggleButton.Button name="warn" label={labels.warn}>
|
||||
<ToggleButton.ButtonText>{labels.warn}</ToggleButton.ButtonText>
|
||||
</ToggleButton.Button>
|
||||
<ToggleButton.Button name="hide" label={labels.hide}>
|
||||
<ToggleButton.ButtonText>{labels.hide}</ToggleButton.ButtonText>
|
||||
</ToggleButton.Button>
|
||||
</ToggleButton.Group>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,110 +0,0 @@
|
|||
import React from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {LABELS} from '@atproto/api'
|
||||
import {msg, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
import {useAnalytics} from '#/lib/analytics/analytics'
|
||||
import {logEvent} from '#/lib/statsig/statsig'
|
||||
import {usePreferencesQuery} from '#/state/queries/preferences'
|
||||
import {usePreferencesSetAdultContentMutation} from 'state/queries/preferences'
|
||||
import {
|
||||
DescriptionText,
|
||||
OnboardingControls,
|
||||
TitleText,
|
||||
} from '#/screens/Onboarding/Layout'
|
||||
import {Context} from '#/screens/Onboarding/state'
|
||||
import {AdultContentEnabledPref} from '#/screens/Onboarding/StepModeration/AdultContentEnabledPref'
|
||||
import {ModerationOption} from '#/screens/Onboarding/StepModeration/ModerationOption'
|
||||
import {atoms as a} from '#/alf'
|
||||
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
|
||||
import {IconCircle} from '#/components/IconCircle'
|
||||
import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
|
||||
import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash'
|
||||
import {Loader} from '#/components/Loader'
|
||||
|
||||
export function StepModeration() {
|
||||
const {_} = useLingui()
|
||||
const {track} = useAnalytics()
|
||||
const {state, dispatch} = React.useContext(Context)
|
||||
const {data: preferences} = usePreferencesQuery()
|
||||
const {mutate, variables} = usePreferencesSetAdultContentMutation()
|
||||
|
||||
// We need to know if the screen is mounted so we know if we want to run entering animations
|
||||
// https://github.com/software-mansion/react-native-reanimated/discussions/2513
|
||||
const isMounted = React.useRef(false)
|
||||
React.useLayoutEffect(() => {
|
||||
isMounted.current = true
|
||||
}, [])
|
||||
|
||||
const adultContentEnabled = !!(
|
||||
(variables && variables.enabled) ||
|
||||
(!variables && preferences?.moderationPrefs.adultContentEnabled)
|
||||
)
|
||||
|
||||
const onContinue = React.useCallback(() => {
|
||||
dispatch({type: 'next'})
|
||||
track('OnboardingV2:StepModeration:End')
|
||||
logEvent('onboarding:moderation:nextPressed', {})
|
||||
}, [track, dispatch])
|
||||
|
||||
React.useEffect(() => {
|
||||
track('OnboardingV2:StepModeration:Start')
|
||||
}, [track])
|
||||
|
||||
return (
|
||||
<View style={[a.align_start]}>
|
||||
<IconCircle icon={EyeSlash} style={[a.mb_2xl]} />
|
||||
|
||||
<TitleText>
|
||||
<Trans>You're in control</Trans>
|
||||
</TitleText>
|
||||
<DescriptionText style={[a.mb_xl]}>
|
||||
<Trans>
|
||||
Select what you want to see (or not see), and we’ll handle the rest.
|
||||
</Trans>
|
||||
</DescriptionText>
|
||||
|
||||
{!preferences ? (
|
||||
<View style={[a.pt_md]}>
|
||||
<Loader size="xl" />
|
||||
</View>
|
||||
) : (
|
||||
<>
|
||||
<AdultContentEnabledPref mutate={mutate} variables={variables} />
|
||||
|
||||
<View style={[a.gap_sm, a.w_full]}>
|
||||
<ModerationOption
|
||||
labelValueDefinition={LABELS.porn}
|
||||
disabled={!adultContentEnabled}
|
||||
/>
|
||||
<ModerationOption
|
||||
labelValueDefinition={LABELS.sexual}
|
||||
disabled={!adultContentEnabled}
|
||||
/>
|
||||
<ModerationOption
|
||||
labelValueDefinition={LABELS['graphic-media']}
|
||||
disabled={!adultContentEnabled}
|
||||
/>
|
||||
<ModerationOption labelValueDefinition={LABELS.nudity} />
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
|
||||
<OnboardingControls.Portal>
|
||||
<Button
|
||||
key={state.activeStep} // remove focus state on nav
|
||||
variant="gradient"
|
||||
color="gradient_sky"
|
||||
size="large"
|
||||
label={_(msg`Continue to next step`)}
|
||||
onPress={onContinue}>
|
||||
<ButtonText>
|
||||
<Trans>Continue</Trans>
|
||||
</ButtonText>
|
||||
<ButtonIcon icon={ChevronRight} position="right" />
|
||||
</Button>
|
||||
</OnboardingControls.Portal>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
@ -92,11 +92,7 @@ export function StepProfile() {
|
|||
}, [track])
|
||||
|
||||
React.useEffect(() => {
|
||||
// We have an experiment running for redueced onboarding, where this screen shows up as the first in onboarding.
|
||||
// We only want to request permissions when that gate is actually active to prevent pollution
|
||||
if (gate('reduced_onboarding_and_home_algo_v2')) {
|
||||
requestNotificationsPermission('StartOnboarding')
|
||||
}
|
||||
requestNotificationsPermission('StartOnboarding')
|
||||
}, [gate, requestNotificationsPermission])
|
||||
|
||||
const openPicker = React.useCallback(
|
||||
|
|
|
|||
|
|
@ -1,188 +0,0 @@
|
|||
import React from 'react'
|
||||
import {View, ViewStyle} from 'react-native'
|
||||
import {AppBskyActorDefs, moderateProfile} from '@atproto/api'
|
||||
|
||||
import {useModerationOpts} from '#/state/preferences/moderation-opts'
|
||||
import {UserAvatar} from '#/view/com/util/UserAvatar'
|
||||
import {atoms as a, flatten, useTheme} from '#/alf'
|
||||
import {useItemContext} from '#/components/forms/Toggle'
|
||||
import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
|
||||
import {RichText} from '#/components/RichText'
|
||||
import {Text} from '#/components/Typography'
|
||||
|
||||
export function SuggestedAccountCard({
|
||||
profile,
|
||||
moderationOpts,
|
||||
}: {
|
||||
profile: AppBskyActorDefs.ProfileViewDetailed
|
||||
moderationOpts: ReturnType<typeof useModerationOpts>
|
||||
}) {
|
||||
const t = useTheme()
|
||||
const ctx = useItemContext()
|
||||
const moderation = moderateProfile(profile, moderationOpts!)
|
||||
|
||||
const styles = React.useMemo(() => {
|
||||
const light = t.name === 'light'
|
||||
const base: ViewStyle[] = [t.atoms.bg_contrast_50]
|
||||
const hover: ViewStyle[] = [t.atoms.bg_contrast_25]
|
||||
const selected: ViewStyle[] = [
|
||||
{
|
||||
backgroundColor: light ? t.palette.primary_50 : t.palette.primary_950,
|
||||
},
|
||||
]
|
||||
const selectedHover: ViewStyle[] = [
|
||||
{
|
||||
backgroundColor: light ? t.palette.primary_25 : t.palette.primary_975,
|
||||
},
|
||||
]
|
||||
const checkboxBase: ViewStyle[] = [t.atoms.bg]
|
||||
const checkboxSelected: ViewStyle[] = [
|
||||
{
|
||||
backgroundColor: t.palette.primary_500,
|
||||
},
|
||||
]
|
||||
const avatarBase: ViewStyle[] = [t.atoms.bg_contrast_100]
|
||||
const avatarSelected: ViewStyle[] = [
|
||||
{
|
||||
backgroundColor: light ? t.palette.primary_100 : t.palette.primary_900,
|
||||
},
|
||||
]
|
||||
|
||||
return {
|
||||
base,
|
||||
hover: flatten(hover),
|
||||
selected: flatten(selected),
|
||||
selectedHover: flatten(selectedHover),
|
||||
checkboxBase: flatten(checkboxBase),
|
||||
checkboxSelected: flatten(checkboxSelected),
|
||||
avatarBase: flatten(avatarBase),
|
||||
avatarSelected: flatten(avatarSelected),
|
||||
}
|
||||
}, [t])
|
||||
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
a.w_full,
|
||||
a.p_md,
|
||||
a.pr_lg,
|
||||
a.gap_md,
|
||||
a.rounded_md,
|
||||
styles.base,
|
||||
(ctx.hovered || ctx.focused || ctx.pressed) && styles.hover,
|
||||
ctx.selected && styles.selected,
|
||||
ctx.selected &&
|
||||
(ctx.hovered || ctx.focused || ctx.pressed) &&
|
||||
styles.selectedHover,
|
||||
]}>
|
||||
<View style={[a.flex_row, a.align_center, a.justify_between, a.gap_lg]}>
|
||||
<View style={[a.flex_row, a.flex_1, a.align_center, a.gap_md]}>
|
||||
<View
|
||||
style={[
|
||||
{width: 48, height: 48},
|
||||
a.relative,
|
||||
a.rounded_full,
|
||||
styles.avatarBase,
|
||||
ctx.selected && styles.avatarSelected,
|
||||
]}>
|
||||
<UserAvatar
|
||||
size={48}
|
||||
avatar={profile.avatar}
|
||||
moderation={moderation.ui('avatar')}
|
||||
/>
|
||||
</View>
|
||||
<View style={[a.flex_1]}>
|
||||
<Text style={[a.font_bold, a.text_md, a.pb_xs]} numberOfLines={1}>
|
||||
{profile.displayName}
|
||||
</Text>
|
||||
<Text style={[t.atoms.text_contrast_medium]}>{profile.handle}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={[
|
||||
a.justify_center,
|
||||
a.align_center,
|
||||
a.rounded_sm,
|
||||
styles.checkboxBase,
|
||||
ctx.selected && styles.checkboxSelected,
|
||||
{
|
||||
width: 28,
|
||||
height: 28,
|
||||
},
|
||||
]}>
|
||||
{ctx.selected && <Check size="sm" fill={t.palette.white} />}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{profile.description && (
|
||||
<>
|
||||
<View
|
||||
style={[
|
||||
{
|
||||
opacity: ctx.selected ? 0.3 : 1,
|
||||
borderTopWidth: 1,
|
||||
},
|
||||
a.w_full,
|
||||
t.atoms.border_contrast_low,
|
||||
ctx.selected && {
|
||||
borderTopColor: t.palette.primary_200,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<RichText
|
||||
value={profile.description}
|
||||
disableLinks
|
||||
numberOfLines={2}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export function SuggestedAccountCardPlaceholder() {
|
||||
const t = useTheme()
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
a.w_full,
|
||||
a.flex_row,
|
||||
a.justify_between,
|
||||
a.align_center,
|
||||
a.p_md,
|
||||
a.pr_lg,
|
||||
a.gap_xl,
|
||||
a.rounded_md,
|
||||
t.atoms.bg_contrast_25,
|
||||
]}>
|
||||
<View style={[a.flex_row, a.align_center, a.gap_md]}>
|
||||
<View
|
||||
style={[
|
||||
{width: 48, height: 48},
|
||||
a.relative,
|
||||
a.rounded_full,
|
||||
t.atoms.bg_contrast_100,
|
||||
]}
|
||||
/>
|
||||
<View style={[a.gap_xs]}>
|
||||
<View
|
||||
style={[
|
||||
{width: 100, height: 16},
|
||||
a.rounded_sm,
|
||||
t.atoms.bg_contrast_100,
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
{width: 60, height: 12},
|
||||
a.rounded_sm,
|
||||
t.atoms.bg_contrast_100,
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,210 +0,0 @@
|
|||
import React from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {AppBskyActorDefs} from '@atproto/api'
|
||||
import {msg, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
import {useAnalytics} from '#/lib/analytics/analytics'
|
||||
import {logEvent} from '#/lib/statsig/statsig'
|
||||
import {capitalize} from '#/lib/strings/capitalize'
|
||||
import {useModerationOpts} from '#/state/preferences/moderation-opts'
|
||||
import {useProfilesQuery} from '#/state/queries/profile'
|
||||
import {
|
||||
DescriptionText,
|
||||
OnboardingControls,
|
||||
TitleText,
|
||||
} from '#/screens/Onboarding/Layout'
|
||||
import {Context} from '#/screens/Onboarding/state'
|
||||
import {
|
||||
SuggestedAccountCard,
|
||||
SuggestedAccountCardPlaceholder,
|
||||
} from '#/screens/Onboarding/StepSuggestedAccounts/SuggestedAccountCard'
|
||||
import {aggregateInterestItems} from '#/screens/Onboarding/util'
|
||||
import {atoms as a, useBreakpoints} from '#/alf'
|
||||
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
|
||||
import * as Toggle from '#/components/forms/Toggle'
|
||||
import {IconCircle} from '#/components/IconCircle'
|
||||
import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At'
|
||||
import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
|
||||
import {Loader} from '#/components/Loader'
|
||||
import {Text} from '#/components/Typography'
|
||||
|
||||
export function Inner({
|
||||
profiles,
|
||||
onSelect,
|
||||
moderationOpts,
|
||||
}: {
|
||||
profiles: AppBskyActorDefs.ProfileViewDetailed[]
|
||||
onSelect: (dids: string[]) => void
|
||||
moderationOpts: ReturnType<typeof useModerationOpts>
|
||||
}) {
|
||||
const {_} = useLingui()
|
||||
const [dids, setDids] = React.useState<string[]>(profiles.map(p => p.did))
|
||||
|
||||
React.useEffect(() => {
|
||||
onSelect(dids)
|
||||
}, [dids, onSelect])
|
||||
|
||||
return (
|
||||
<Toggle.Group
|
||||
values={dids}
|
||||
onChange={setDids}
|
||||
label={_(msg`Select some accounts below to follow`)}>
|
||||
<View style={[a.gap_md]}>
|
||||
{profiles.map(profile => (
|
||||
<Toggle.Item
|
||||
key={profile.did}
|
||||
name={profile.did}
|
||||
label={_(msg`Follow ${profile.handle}`)}>
|
||||
<SuggestedAccountCard
|
||||
profile={profile}
|
||||
moderationOpts={moderationOpts}
|
||||
/>
|
||||
</Toggle.Item>
|
||||
))}
|
||||
</View>
|
||||
</Toggle.Group>
|
||||
)
|
||||
}
|
||||
|
||||
export function StepSuggestedAccounts() {
|
||||
const {_} = useLingui()
|
||||
const {gtMobile} = useBreakpoints()
|
||||
const {track} = useAnalytics()
|
||||
const {state, dispatch, interestsDisplayNames} = React.useContext(Context)
|
||||
const suggestedDids = React.useMemo(() => {
|
||||
return aggregateInterestItems(
|
||||
state.interestsStepResults.selectedInterests,
|
||||
state.interestsStepResults.apiResponse.suggestedAccountDids,
|
||||
state.interestsStepResults.apiResponse.suggestedAccountDids.default || [],
|
||||
)
|
||||
}, [state.interestsStepResults])
|
||||
const moderationOpts = useModerationOpts()
|
||||
const {
|
||||
isLoading: isProfilesLoading,
|
||||
isError,
|
||||
data,
|
||||
error,
|
||||
} = useProfilesQuery({
|
||||
handles: suggestedDids,
|
||||
})
|
||||
const [dids, setDids] = React.useState<string[]>([])
|
||||
const [saving, setSaving] = React.useState(false)
|
||||
|
||||
const interestsText = React.useMemo(() => {
|
||||
const i = state.interestsStepResults.selectedInterests.map(
|
||||
i => interestsDisplayNames[i] || capitalize(i),
|
||||
)
|
||||
return i.join(', ')
|
||||
}, [state.interestsStepResults.selectedInterests, interestsDisplayNames])
|
||||
|
||||
const handleContinue = React.useCallback(async () => {
|
||||
setSaving(true)
|
||||
|
||||
if (dids.length) {
|
||||
dispatch({type: 'setSuggestedAccountsStepResults', accountDids: dids})
|
||||
}
|
||||
|
||||
setSaving(false)
|
||||
dispatch({type: 'next'})
|
||||
track('OnboardingV2:StepSuggestedAccounts:End', {
|
||||
selectedAccountsLength: dids.length,
|
||||
})
|
||||
logEvent('onboarding:suggestedAccounts:nextPressed', {
|
||||
selectedAccountsLength: dids.length,
|
||||
skipped: false,
|
||||
})
|
||||
}, [dids, setSaving, dispatch, track])
|
||||
|
||||
const handleSkip = React.useCallback(() => {
|
||||
// if a user comes back and clicks skip, erase follows
|
||||
dispatch({type: 'setSuggestedAccountsStepResults', accountDids: []})
|
||||
dispatch({type: 'next'})
|
||||
logEvent('onboarding:suggestedAccounts:nextPressed', {
|
||||
selectedAccountsLength: 0,
|
||||
skipped: true,
|
||||
})
|
||||
}, [dispatch])
|
||||
|
||||
const isLoading = isProfilesLoading && moderationOpts
|
||||
|
||||
React.useEffect(() => {
|
||||
track('OnboardingV2:StepSuggestedAccounts:Start')
|
||||
}, [track])
|
||||
|
||||
return (
|
||||
<View style={[a.align_start]}>
|
||||
<IconCircle icon={At} style={[a.mb_2xl]} />
|
||||
|
||||
<TitleText>
|
||||
<Trans>Here are some accounts for you to follow</Trans>
|
||||
</TitleText>
|
||||
<DescriptionText>
|
||||
{state.interestsStepResults.selectedInterests.length ? (
|
||||
<Trans>Based on your interest in {interestsText}</Trans>
|
||||
) : (
|
||||
<Trans>These are popular accounts you might like:</Trans>
|
||||
)}
|
||||
</DescriptionText>
|
||||
|
||||
<View style={[a.w_full, a.pt_xl]}>
|
||||
{isLoading ? (
|
||||
<View style={[a.gap_md]}>
|
||||
{Array(10)
|
||||
.fill(0)
|
||||
.map((_, i) => (
|
||||
<SuggestedAccountCardPlaceholder key={i} />
|
||||
))}
|
||||
</View>
|
||||
) : isError || !data ? (
|
||||
<Text>{error?.toString()}</Text>
|
||||
) : (
|
||||
<Inner
|
||||
profiles={data.profiles}
|
||||
onSelect={setDids}
|
||||
moderationOpts={moderationOpts}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<OnboardingControls.Portal>
|
||||
<View
|
||||
style={[
|
||||
a.gap_md,
|
||||
gtMobile ? {flexDirection: 'row-reverse'} : a.flex_col,
|
||||
]}>
|
||||
<Button
|
||||
disabled={dids.length === 0}
|
||||
variant="gradient"
|
||||
color="gradient_sky"
|
||||
size="large"
|
||||
label={_(
|
||||
msg`Follow selected accounts and continue to the next step`,
|
||||
)}
|
||||
onPress={handleContinue}>
|
||||
<ButtonText>
|
||||
{dids.length === 20 ? (
|
||||
<Trans>Follow All</Trans>
|
||||
) : (
|
||||
<Trans>Follow</Trans>
|
||||
)}
|
||||
</ButtonText>
|
||||
<ButtonIcon icon={saving ? Loader : Plus} position="right" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="solid"
|
||||
color="secondary"
|
||||
size="large"
|
||||
label={_(
|
||||
msg`Continue to the next step without following any accounts`,
|
||||
)}
|
||||
onPress={handleSkip}>
|
||||
<ButtonText>
|
||||
<Trans>Skip</Trans>
|
||||
</ButtonText>
|
||||
</Button>
|
||||
</View>
|
||||
</OnboardingControls.Portal>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,125 +0,0 @@
|
|||
import React from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {msg, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
import {useAnalytics} from '#/lib/analytics/analytics'
|
||||
import {logEvent} from '#/lib/statsig/statsig'
|
||||
import {capitalize} from '#/lib/strings/capitalize'
|
||||
import {IS_TEST_USER} from 'lib/constants'
|
||||
import {useSession} from 'state/session'
|
||||
import {
|
||||
DescriptionText,
|
||||
OnboardingControls,
|
||||
TitleText,
|
||||
} from '#/screens/Onboarding/Layout'
|
||||
import {Context} from '#/screens/Onboarding/state'
|
||||
import {FeedCard} from '#/screens/Onboarding/StepAlgoFeeds/FeedCard'
|
||||
import {aggregateInterestItems} from '#/screens/Onboarding/util'
|
||||
import {atoms as a} from '#/alf'
|
||||
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
|
||||
import * as Toggle from '#/components/forms/Toggle'
|
||||
import {IconCircle} from '#/components/IconCircle'
|
||||
import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
|
||||
import {ListMagnifyingGlass_Stroke2_Corner0_Rounded as ListMagnifyingGlass} from '#/components/icons/ListMagnifyingGlass'
|
||||
import {Loader} from '#/components/Loader'
|
||||
|
||||
export function StepTopicalFeeds() {
|
||||
const {_} = useLingui()
|
||||
const {track} = useAnalytics()
|
||||
const {currentAccount} = useSession()
|
||||
const {state, dispatch, interestsDisplayNames} = React.useContext(Context)
|
||||
const [selectedFeedUris, setSelectedFeedUris] = React.useState<string[]>([])
|
||||
const [saving, setSaving] = React.useState(false)
|
||||
const suggestedFeedUris = React.useMemo(() => {
|
||||
if (IS_TEST_USER(currentAccount?.handle)) return []
|
||||
return aggregateInterestItems(
|
||||
state.interestsStepResults.selectedInterests,
|
||||
state.interestsStepResults.apiResponse.suggestedFeedUris,
|
||||
state.interestsStepResults.apiResponse.suggestedFeedUris.default || [],
|
||||
).slice(0, 10)
|
||||
}, [
|
||||
currentAccount?.handle,
|
||||
state.interestsStepResults.apiResponse.suggestedFeedUris,
|
||||
state.interestsStepResults.selectedInterests,
|
||||
])
|
||||
|
||||
const interestsText = React.useMemo(() => {
|
||||
const i = state.interestsStepResults.selectedInterests.map(
|
||||
i => interestsDisplayNames[i] || capitalize(i),
|
||||
)
|
||||
return i.join(', ')
|
||||
}, [state.interestsStepResults.selectedInterests, interestsDisplayNames])
|
||||
|
||||
const saveFeeds = React.useCallback(async () => {
|
||||
setSaving(true)
|
||||
|
||||
dispatch({type: 'setTopicalFeedsStepResults', feedUris: selectedFeedUris})
|
||||
|
||||
setSaving(false)
|
||||
dispatch({type: 'next'})
|
||||
track('OnboardingV2:StepTopicalFeeds:End', {
|
||||
selectedFeeds: selectedFeedUris,
|
||||
selectedFeedsLength: selectedFeedUris.length,
|
||||
})
|
||||
logEvent('onboarding:topicalFeeds:nextPressed', {
|
||||
selectedFeeds: selectedFeedUris,
|
||||
selectedFeedsLength: selectedFeedUris.length,
|
||||
})
|
||||
}, [selectedFeedUris, dispatch, track])
|
||||
|
||||
React.useEffect(() => {
|
||||
track('OnboardingV2:StepTopicalFeeds:Start')
|
||||
}, [track])
|
||||
|
||||
return (
|
||||
<View style={[a.align_start]}>
|
||||
<IconCircle icon={ListMagnifyingGlass} style={[a.mb_2xl]} />
|
||||
|
||||
<TitleText>
|
||||
<Trans>Feeds can be topical as well!</Trans>
|
||||
</TitleText>
|
||||
<DescriptionText>
|
||||
{state.interestsStepResults.selectedInterests.length ? (
|
||||
<Trans>
|
||||
Here are some topical feeds based on your interests: {interestsText}
|
||||
. You can choose to follow as many as you like.
|
||||
</Trans>
|
||||
) : (
|
||||
<Trans>
|
||||
Here are some popular topical feeds. You can choose to follow as
|
||||
many as you like.
|
||||
</Trans>
|
||||
)}
|
||||
</DescriptionText>
|
||||
|
||||
<View style={[a.w_full, a.pb_2xl, a.pt_2xl]}>
|
||||
<Toggle.Group
|
||||
values={selectedFeedUris}
|
||||
onChange={setSelectedFeedUris}
|
||||
label={_(msg`Select topical feeds to follow from the list below`)}>
|
||||
<View style={[a.gap_md]}>
|
||||
{suggestedFeedUris.map(uri => (
|
||||
<FeedCard key={uri} config={{default: false, uri}} />
|
||||
))}
|
||||
</View>
|
||||
</Toggle.Group>
|
||||
</View>
|
||||
|
||||
<OnboardingControls.Portal>
|
||||
<Button
|
||||
key={state.activeStep} // remove focus state on nav
|
||||
variant="gradient"
|
||||
color="gradient_sky"
|
||||
size="large"
|
||||
label={_(msg`Continue to next step`)}
|
||||
onPress={saveFeeds}>
|
||||
<ButtonText>
|
||||
<Trans>Continue</Trans>
|
||||
</ButtonText>
|
||||
<ButtonIcon icon={saving ? Loader : ChevronRight} position="right" />
|
||||
</Button>
|
||||
</OnboardingControls.Portal>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
@ -2,33 +2,18 @@ import React from 'react'
|
|||
import {msg} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
import {useGate} from '#/lib/statsig/statsig'
|
||||
import {Layout, OnboardingControls} from '#/screens/Onboarding/Layout'
|
||||
import {
|
||||
Context,
|
||||
initialState,
|
||||
initialStateReduced,
|
||||
reducer,
|
||||
reducerReduced,
|
||||
} from '#/screens/Onboarding/state'
|
||||
import {StepAlgoFeeds} from '#/screens/Onboarding/StepAlgoFeeds'
|
||||
import {Context, initialState, reducer} from '#/screens/Onboarding/state'
|
||||
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 gate = useGate()
|
||||
const isReducedOnboardingEnabled = gate('reduced_onboarding_and_home_algo_v2')
|
||||
const [state, dispatch] = React.useReducer(
|
||||
isReducedOnboardingEnabled ? reducerReduced : reducer,
|
||||
isReducedOnboardingEnabled ? {...initialStateReduced} : {...initialState},
|
||||
)
|
||||
const [state, dispatch] = React.useReducer(reducer, {
|
||||
...initialState,
|
||||
})
|
||||
|
||||
const interestsDisplayNames = React.useMemo(() => {
|
||||
return {
|
||||
|
|
@ -68,13 +53,6 @@ export function Onboarding() {
|
|||
<Layout>
|
||||
{state.activeStep === 'profile' && <StepProfile />}
|
||||
{state.activeStep === 'interests' && <StepInterests />}
|
||||
{state.activeStep === 'suggestedAccounts' && (
|
||||
<StepSuggestedAccounts />
|
||||
)}
|
||||
{state.activeStep === 'followingFeed' && <StepFollowingFeed />}
|
||||
{state.activeStep === 'algoFeeds' && <StepAlgoFeeds />}
|
||||
{state.activeStep === 'topicalFeeds' && <StepTopicalFeeds />}
|
||||
{state.activeStep === 'moderation' && <StepModeration />}
|
||||
{state.activeStep === 'finished' && <StepFinished />}
|
||||
</Layout>
|
||||
</Context.Provider>
|
||||
|
|
|
|||
|
|
@ -6,31 +6,13 @@ import {AvatarColor, Emoji} from '#/screens/Onboarding/StepProfile/types'
|
|||
export type OnboardingState = {
|
||||
hasPrev: boolean
|
||||
totalSteps: number
|
||||
activeStep:
|
||||
| 'profile'
|
||||
| 'interests'
|
||||
| 'suggestedAccounts'
|
||||
| 'followingFeed'
|
||||
| 'algoFeeds'
|
||||
| 'topicalFeeds'
|
||||
| 'moderation'
|
||||
| 'profile'
|
||||
| 'finished'
|
||||
activeStep: 'profile' | 'interests' | 'finished'
|
||||
activeStepIndex: number
|
||||
|
||||
interestsStepResults: {
|
||||
selectedInterests: string[]
|
||||
apiResponse: ApiResponseMap
|
||||
}
|
||||
suggestedAccountsStepResults: {
|
||||
accountDids: string[]
|
||||
}
|
||||
algoFeedsStepResults: {
|
||||
feedUris: string[]
|
||||
}
|
||||
topicalFeedsStepResults: {
|
||||
feedUris: string[]
|
||||
}
|
||||
profileStepResults: {
|
||||
isCreatedAvatar: boolean
|
||||
image?: {
|
||||
|
|
@ -64,18 +46,6 @@ export type OnboardingAction =
|
|||
selectedInterests: string[]
|
||||
apiResponse: ApiResponseMap
|
||||
}
|
||||
| {
|
||||
type: 'setSuggestedAccountsStepResults'
|
||||
accountDids: string[]
|
||||
}
|
||||
| {
|
||||
type: 'setAlgoFeedsStepResults'
|
||||
feedUris: string[]
|
||||
}
|
||||
| {
|
||||
type: 'setTopicalFeedsStepResults'
|
||||
feedUris: string[]
|
||||
}
|
||||
| {
|
||||
type: 'setProfileStepResults'
|
||||
isCreatedAvatar: boolean
|
||||
|
|
@ -98,37 +68,6 @@ export type ApiResponseMap = {
|
|||
}
|
||||
}
|
||||
|
||||
export const initialState: OnboardingState = {
|
||||
hasPrev: false,
|
||||
totalSteps: 7,
|
||||
activeStep: 'interests',
|
||||
activeStepIndex: 1,
|
||||
|
||||
interestsStepResults: {
|
||||
selectedInterests: [],
|
||||
apiResponse: {
|
||||
interests: [],
|
||||
suggestedAccountDids: {},
|
||||
suggestedFeedUris: {},
|
||||
},
|
||||
},
|
||||
suggestedAccountsStepResults: {
|
||||
accountDids: [],
|
||||
},
|
||||
algoFeedsStepResults: {
|
||||
feedUris: [],
|
||||
},
|
||||
topicalFeedsStepResults: {
|
||||
feedUris: [],
|
||||
},
|
||||
profileStepResults: {
|
||||
isCreatedAvatar: false,
|
||||
image: undefined,
|
||||
imageUri: '',
|
||||
imageMime: '',
|
||||
},
|
||||
}
|
||||
|
||||
export const INTEREST_TO_DISPLAY_NAME_DEFAULTS: {
|
||||
[key: string]: string
|
||||
} = {
|
||||
|
|
@ -156,125 +95,7 @@ export const INTEREST_TO_DISPLAY_NAME_DEFAULTS: {
|
|||
cooking: 'Cooking',
|
||||
}
|
||||
|
||||
export const Context = React.createContext<{
|
||||
state: OnboardingState
|
||||
dispatch: React.Dispatch<OnboardingAction>
|
||||
interestsDisplayNames: {[key: string]: string}
|
||||
}>({
|
||||
state: {...initialState},
|
||||
dispatch: () => {},
|
||||
interestsDisplayNames: INTEREST_TO_DISPLAY_NAME_DEFAULTS,
|
||||
})
|
||||
|
||||
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.debug(`onboarding: step changed`, {activeStep: state.activeStep})
|
||||
}
|
||||
|
||||
return state
|
||||
}
|
||||
|
||||
export const initialStateReduced: OnboardingState = {
|
||||
export const initialState: OnboardingState = {
|
||||
hasPrev: false,
|
||||
totalSteps: 3,
|
||||
activeStep: 'profile',
|
||||
|
|
@ -288,15 +109,6 @@ export const initialStateReduced: OnboardingState = {
|
|||
suggestedFeedUris: {},
|
||||
},
|
||||
},
|
||||
suggestedAccountsStepResults: {
|
||||
accountDids: [],
|
||||
},
|
||||
algoFeedsStepResults: {
|
||||
feedUris: [],
|
||||
},
|
||||
topicalFeedsStepResults: {
|
||||
feedUris: [],
|
||||
},
|
||||
profileStepResults: {
|
||||
isCreatedAvatar: false,
|
||||
image: undefined,
|
||||
|
|
@ -305,7 +117,17 @@ export const initialStateReduced: OnboardingState = {
|
|||
},
|
||||
}
|
||||
|
||||
export function reducerReduced(
|
||||
export const Context = React.createContext<{
|
||||
state: OnboardingState
|
||||
dispatch: React.Dispatch<OnboardingAction>
|
||||
interestsDisplayNames: {[key: string]: string}
|
||||
}>({
|
||||
state: {...initialState},
|
||||
dispatch: () => {},
|
||||
interestsDisplayNames: INTEREST_TO_DISPLAY_NAME_DEFAULTS,
|
||||
})
|
||||
|
||||
export function reducer(
|
||||
s: OnboardingState,
|
||||
a: OnboardingAction,
|
||||
): OnboardingState {
|
||||
|
|
@ -333,7 +155,7 @@ export function reducerReduced(
|
|||
break
|
||||
}
|
||||
case 'finish': {
|
||||
next = initialStateReduced
|
||||
next = initialState
|
||||
break
|
||||
}
|
||||
case 'setInterestsStepResults': {
|
||||
|
|
@ -343,15 +165,6 @@ export function reducerReduced(
|
|||
}
|
||||
break
|
||||
}
|
||||
case 'setSuggestedAccountsStepResults': {
|
||||
break
|
||||
}
|
||||
case 'setAlgoFeedsStepResults': {
|
||||
break
|
||||
}
|
||||
case 'setTopicalFeedsStepResults': {
|
||||
break
|
||||
}
|
||||
case 'setProfileStepResults': {
|
||||
next.profileStepResults = {
|
||||
isCreatedAvatar: a.isCreatedAvatar,
|
||||
|
|
@ -376,9 +189,6 @@ export function reducerReduced(
|
|||
interestsStepResults: {
|
||||
selectedInterests: state.interestsStepResults.selectedInterests,
|
||||
},
|
||||
suggestedAccountsStepResults: state.suggestedAccountsStepResults,
|
||||
algoFeedsStepResults: state.algoFeedsStepResults,
|
||||
topicalFeedsStepResults: state.topicalFeedsStepResults,
|
||||
profileStepResults: state.profileStepResults,
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -5,66 +5,6 @@ import {
|
|||
} from '@atproto/api'
|
||||
|
||||
import {until} from '#/lib/async/until'
|
||||
import {PRIMARY_FEEDS} from './StepAlgoFeeds'
|
||||
|
||||
function shuffle(array: any) {
|
||||
let currentIndex = array.length,
|
||||
randomIndex
|
||||
|
||||
// While there remain elements to shuffle.
|
||||
while (currentIndex > 0) {
|
||||
// Pick a remaining element.
|
||||
randomIndex = Math.floor(Math.random() * currentIndex)
|
||||
currentIndex--
|
||||
|
||||
// And swap it with the current element.
|
||||
;[array[currentIndex], array[randomIndex]] = [
|
||||
array[randomIndex],
|
||||
array[currentIndex],
|
||||
]
|
||||
}
|
||||
|
||||
return array
|
||||
}
|
||||
|
||||
export function aggregateInterestItems(
|
||||
interests: string[],
|
||||
map: {[key: string]: string[]},
|
||||
fallbackItems: string[],
|
||||
) {
|
||||
const selected = interests.length
|
||||
const all = interests
|
||||
.map(i => {
|
||||
// suggestions from server
|
||||
const rawSuggestions = map[i]
|
||||
|
||||
// safeguard against a missing interest->suggestion mapping
|
||||
if (!rawSuggestions || !rawSuggestions.length) {
|
||||
return []
|
||||
}
|
||||
|
||||
const suggestions = shuffle(rawSuggestions)
|
||||
|
||||
if (selected === 1) {
|
||||
return suggestions // return all
|
||||
} else if (selected === 2) {
|
||||
return suggestions.slice(0, 5) // return 5
|
||||
} else {
|
||||
return suggestions.slice(0, 3) // return 3
|
||||
}
|
||||
})
|
||||
.flat()
|
||||
// dedupe suggestions
|
||||
const results = Array.from(new Set(all))
|
||||
|
||||
// backfill
|
||||
if (results.length < 20) {
|
||||
results.push(...shuffle(fallbackItems))
|
||||
}
|
||||
|
||||
// dedupe and return 20
|
||||
return Array.from(new Set(results)).slice(0, 20)
|
||||
}
|
||||
|
||||
export async function bulkWriteFollows(agent: BskyAgent, dids: string[]) {
|
||||
const session = agent.session
|
||||
|
|
@ -109,19 +49,3 @@ async function whenFollowsIndexed(
|
|||
}),
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Kinda hacky, but we want Discover to appear as the first pinned
|
||||
* feed after Following
|
||||
*/
|
||||
export function sortPrimaryAlgorithmFeeds(uris: string[]) {
|
||||
return uris.sort((a, b) => {
|
||||
if (a === PRIMARY_FEEDS[0]?.uri) {
|
||||
return -1
|
||||
}
|
||||
if (b === PRIMARY_FEEDS[0]?.uri) {
|
||||
return 1
|
||||
}
|
||||
return a.localeCompare(b)
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import React from 'react'
|
|||
import {LogBox, Pressable, View} from 'react-native'
|
||||
import {useQueryClient} from '@tanstack/react-query'
|
||||
|
||||
import {useDangerousSetGate} from '#/lib/statsig/statsig'
|
||||
import {useModalControls} from '#/state/modals'
|
||||
import {useSessionApi} from '#/state/session'
|
||||
import {useLoggedOutViewControls} from '#/state/shell/logged-out'
|
||||
|
|
@ -25,7 +24,6 @@ export function TestCtrls() {
|
|||
const {openModal} = useModalControls()
|
||||
const onboardingDispatch = useOnboardingDispatch()
|
||||
const {setShowLoggedOut} = useLoggedOutViewControls()
|
||||
const setGate = useDangerousSetGate()
|
||||
const onPressSignInAlice = async () => {
|
||||
await login(
|
||||
{
|
||||
|
|
@ -117,8 +115,6 @@ export function TestCtrls() {
|
|||
<Pressable
|
||||
testID="e2eStartOnboarding"
|
||||
onPress={() => {
|
||||
// TODO remove when experiment is over
|
||||
setGate('reduced_onboarding_and_home_algo_v2', true)
|
||||
onboardingDispatch({type: 'start'})
|
||||
}}
|
||||
accessibilityRole="button"
|
||||
|
|
@ -128,8 +124,6 @@ export function TestCtrls() {
|
|||
<Pressable
|
||||
testID="e2eStartLongboarding"
|
||||
onPress={() => {
|
||||
// TODO remove when experiment is over
|
||||
setGate('reduced_onboarding_and_home_algo_v2', false)
|
||||
onboardingDispatch({type: 'start'})
|
||||
}}
|
||||
accessibilityRole="button"
|
||||
|
|
|
|||
Loading…
Reference in New Issue