Move interests clientside and add finance (#9176)

* move interests clientside

* add finance

* try and ensure there's always data for the "all" category

* add empty state for suggested accounts

* simplify error wording
This commit is contained in:
Samuel Newman
2025-10-15 19:37:24 +03:00
committed by GitHub
parent b56d0c419b
commit be53a168ba
13 changed files with 180 additions and 330 deletions
+5 -1
View File
@@ -7,13 +7,14 @@ import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfoIcon} from '#/components
import {CircleX_Stroke2_Corner0_Rounded as CircleXIcon} from '#/components/icons/CircleX'
import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
import {Text as BaseText, type TextProps} from '#/components/Typography'
import {EmojiSad_Stroke2_Corner0_Rounded as EmojiSadIcon} from './icons/Emoji'
export const colors = {
warning: '#FFC404',
}
type Context = {
type: 'info' | 'tip' | 'warning' | 'error'
type: 'info' | 'tip' | 'warning' | 'error' | 'apology'
}
const Context = createContext<Context>({
@@ -29,12 +30,14 @@ export function Icon() {
tip: CircleInfoIcon,
warning: WarningIcon,
error: CircleXIcon,
apology: EmojiSadIcon,
}[type]
const fill = {
info: t.atoms.text_contrast_medium.color,
tip: t.palette.primary_500,
warning: colors.warning,
error: t.palette.negative_500,
apology: t.atoms.text_contrast_medium.color,
}[type]
return <Icon fill={fill} size="md" />
}
@@ -109,6 +112,7 @@ export function Outer({
tip: t.palette.primary_500,
warning: colors.warning,
error: t.palette.negative_500,
apology: t.atoms.border_contrast_high.borderColor,
}[type]
return (
<Context.Provider value={{type}}>
@@ -4,6 +4,7 @@ import {type ModerationOpts} from '@atproto/api'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {popularInterests, useInterestsDisplayNames} from '#/lib/interests'
import {logEvent} from '#/lib/statsig/statsig'
import {isWeb} from '#/platform/detection'
import {useModerationOpts} from '#/state/preferences/moderation-opts'
@@ -13,10 +14,6 @@ import {useGetSuggestedUsersQuery} from '#/state/queries/trending/useGetSuggeste
import {useSession} from '#/state/session'
import {type Follow10ProgressGuide} from '#/state/shell/progress-guide'
import {type ListMethods} from '#/view/com/util/List'
import {
popularInterests,
useInterestsDisplayNames,
} from '#/screens/Onboarding/state'
import {
atoms as a,
native,
+78
View File
@@ -0,0 +1,78 @@
import {useMemo} from 'react'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
export const interests = [
'animals',
'art',
'books',
'comedy',
'comics',
'culture',
'dev',
'education',
'finance',
'food',
'gaming',
'journalism',
'movies',
'music',
'nature',
'news',
'pets',
'photography',
'politics',
'science',
'sports',
'tech',
'tv',
'writers',
] as const
export type Interest = (typeof interests)[number]
// most popular selected interests
export const popularInterests = [
'art',
'gaming',
'sports',
'comics',
'music',
'politics',
'photography',
'science',
'news',
] satisfies Interest[]
export function useInterestsDisplayNames() {
const {_} = useLingui()
return useMemo<Record<string, string>>(() => {
return {
// Keep this alphabetized
animals: _(msg`Animals`),
art: _(msg`Art`),
books: _(msg`Books`),
comedy: _(msg`Comedy`),
comics: _(msg`Comics`),
culture: _(msg`Culture`),
dev: _(msg`Software Dev`),
education: _(msg`Education`),
finance: _(msg`Finance`),
food: _(msg`Food`),
gaming: _(msg`Video Games`),
journalism: _(msg`Journalism`),
movies: _(msg`Movies`),
music: _(msg`Music`),
nature: _(msg`Nature`),
news: _(msg`News`),
pets: _(msg`Pets`),
photography: _(msg`Photography`),
politics: _(msg`Politics`),
science: _(msg`Science`),
sports: _(msg`Sports`),
tech: _(msg`Tech`),
tv: _(msg`TV`),
writers: _(msg`Writers`),
} satisfies Record<Interest, string>
}, [_])
}
@@ -1,13 +1,13 @@
import React from 'react'
import {type TextStyle, View, type ViewStyle} from 'react-native'
import {type Interest, useInterestsDisplayNames} from '#/lib/interests'
import {capitalize} from '#/lib/strings/capitalize'
import {useInterestsDisplayNames} from '#/screens/Onboarding/state'
import {atoms as a, native, useTheme} from '#/alf'
import * as Toggle from '#/components/forms/Toggle'
import {Text} from '#/components/Typography'
export function InterestButton({interest}: {interest: string}) {
export function InterestButton({interest}: {interest: Interest}) {
const t = useTheme()
const interestsDisplayNames = useInterestsDisplayNames()
const ctx = Toggle.useItemContext()
+42 -206
View File
@@ -2,97 +2,35 @@ import React from 'react'
import {View} from 'react-native'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useQuery} from '@tanstack/react-query'
import {interests, useInterestsDisplayNames} from '#/lib/interests'
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 {
DescriptionText,
OnboardingControls,
TitleText,
} from '#/screens/Onboarding/Layout'
import {
type ApiResponseMap,
Context,
useInterestsDisplayNames,
} from '#/screens/Onboarding/state'
import {Context} from '#/screens/Onboarding/state'
import {InterestButton} from '#/screens/Onboarding/StepInterests/InterestButton'
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
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 {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as ArrowRotateCounterClockwise} from '#/components/icons/ArrowRotateCounterClockwise'
import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
import {EmojiSad_Stroke2_Corner0_Rounded as EmojiSad} from '#/components/icons/Emoji'
import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag'
import {Loader} from '#/components/Loader'
import {Text} from '#/components/Typography'
export function StepInterests() {
const {_} = useLingui()
const t = useTheme()
const {gtMobile} = useBreakpoints()
const interestsDisplayNames = useInterestsDisplayNames()
const {state, dispatch} = React.useContext(Context)
const [saving, setSaving] = React.useState(false)
const [interests, setInterests] = React.useState<string[]>(
const [selectedInterests, setSelectedInterests] = React.useState<string[]>(
state.interestsStepResults.selectedInterests.map(i => i),
)
const onboardDispatch = useOnboardingDispatch()
const agent = useAgent()
const {isLoading, isError, error, data, refetch, isFetching} = useQuery({
queryKey: ['interests'],
queryFn: async () => {
try {
const {data} = await agent.app.bsky.unspecced.getTaggedSuggestions()
return data.suggestions.reduce(
(agg, s) => {
const {tag, subject, subjectType} = s
const isDefault = tag === 'default'
if (!agg.interests.includes(tag) && !isDefault) {
agg.interests.push(tag)
}
if (subjectType === 'user') {
agg.suggestedAccountDids[tag] =
agg.suggestedAccountDids[tag] || []
agg.suggestedAccountDids[tag].push(subject)
}
if (subjectType === 'feed') {
// agg all feeds into defaults
if (isDefault) {
agg.suggestedFeedUris[tag] = agg.suggestedFeedUris[tag] || []
} else {
agg.suggestedFeedUris[tag] = agg.suggestedFeedUris[tag] || []
agg.suggestedFeedUris[tag].push(subject)
agg.suggestedFeedUris.default.push(subject)
}
}
return agg
},
{
interests: [],
suggestedAccountDids: {},
suggestedFeedUris: {},
} as ApiResponseMap,
)
} catch (e: any) {
logger.info(
`onboarding: getTaggedSuggestions fetch or processing failed`,
)
logger.error(e)
throw new Error(`a network error occurred`)
}
},
})
const saveInterests = React.useCallback(async () => {
setSaving(true)
@@ -101,164 +39,62 @@ export function StepInterests() {
setSaving(false)
dispatch({
type: 'setInterestsStepResults',
apiResponse: data!,
selectedInterests: interests,
selectedInterests,
})
dispatch({type: 'next'})
logEvent('onboarding:interests:nextPressed', {
selectedInterests: interests,
selectedInterestsLength: interests.length,
selectedInterests,
selectedInterestsLength: selectedInterests.length,
})
} catch (e: any) {
logger.info(`onboading: error saving interests`)
logger.error(e)
}
}, [interests, data, setSaving, dispatch])
const skipOnboarding = React.useCallback(() => {
onboardDispatch({type: 'finish'})
dispatch({type: 'finish'})
}, [onboardDispatch, dispatch])
const title = isError ? (
<Trans>Oh no! Something went wrong.</Trans>
) : (
<Trans>What are your interests?</Trans>
)
const description = isError ? (
<Trans>
We weren't able to connect. Please try again to continue setting up your
account. If it continues to fail, you can skip this flow.
</Trans>
) : (
<Trans>We'll use this to help customize your experience.</Trans>
)
}, [selectedInterests, setSaving, dispatch])
return (
<View style={[a.align_start]} testID="onboardingInterests">
<IconCircle
icon={isError ? EmojiSad : Hashtag}
style={[
a.mb_2xl,
isError
? {
backgroundColor: t.palette.negative_50,
}
: {},
]}
iconStyle={[
isError
? {
color: t.palette.negative_900,
}
: {},
]}
/>
<IconCircle icon={Hashtag} style={[a.mb_2xl]} />
<TitleText>{title}</TitleText>
<DescriptionText>{description}</DescriptionText>
<TitleText>
<Trans>What are your interests?</Trans>
</TitleText>
<DescriptionText>
<Trans>We'll use this to help customize your experience.</Trans>
</DescriptionText>
<View style={[a.w_full, a.pt_2xl]}>
{isLoading ? (
<View
style={[
a.flex_1,
a.mt_md,
a.align_center,
a.justify_center,
{minHeight: 400},
]}>
<Loader size="xl" />
<Toggle.Group
values={selectedInterests}
onChange={setSelectedInterests}
label={_(msg`Select your interests from the options below`)}>
<View style={[a.flex_row, a.gap_md, a.flex_wrap]}>
{interests.map(interest => (
<Toggle.Item
key={interest}
name={interest}
label={interestsDisplayNames[interest] || capitalize(interest)}>
<InterestButton interest={interest} />
</Toggle.Item>
))}
</View>
) : isError || !data ? (
<View
style={[
a.w_full,
a.p_lg,
a.rounded_md,
{
backgroundColor: t.palette.negative_50,
},
]}>
<Text style={[a.text_md]}>
<Text
style={[
a.text_md,
a.font_semi_bold,
{
color: t.palette.negative_900,
},
]}>
<Trans>Error:</Trans>{' '}
</Text>
{error?.message || _(msg`an unknown error occurred`)}
</Text>
</View>
) : (
<Toggle.Group
values={interests}
onChange={setInterests}
label={_(msg`Select your interests from the options below`)}>
<View style={[a.flex_row, a.gap_md, a.flex_wrap]}>
{data.interests.map(interest => (
<Toggle.Item
key={interest}
name={interest}
label={
interestsDisplayNames[interest] || capitalize(interest)
}>
<InterestButton interest={interest} />
</Toggle.Item>
))}
</View>
</Toggle.Group>
)}
</Toggle.Group>
</View>
<OnboardingControls.Portal>
{isError ? (
<View style={[a.gap_md, gtMobile ? a.flex_row : a.flex_col]}>
<Button
disabled={isFetching}
variant="solid"
color="secondary"
size="large"
label={_(msg`Retry`)}
onPress={() => refetch()}>
<ButtonText>
<Trans>Retry</Trans>
</ButtonText>
<ButtonIcon icon={ArrowRotateCounterClockwise} position="right" />
</Button>
<Button
variant="outline"
color="secondary"
size="large"
label={_(msg`Skip this flow`)}
onPress={skipOnboarding}>
<ButtonText>
<Trans>Skip</Trans>
</ButtonText>
</Button>
</View>
) : (
<Button
disabled={saving || !data}
testID="onboardingContinue"
variant="solid"
color="primary"
size="large"
label={_(msg`Continue to next step`)}
onPress={saveInterests}>
<ButtonText>
<Trans>Continue</Trans>
</ButtonText>
<ButtonIcon
icon={saving ? Loader : ChevronRight}
position="right"
/>
</Button>
)}
<Button
disabled={saving}
testID="onboardingContinue"
variant="solid"
color="primary"
size="large"
label={_(msg`Continue to next step`)}
onPress={saveInterests}>
<ButtonText>
<Trans>Continue</Trans>
</ButtonText>
<ButtonIcon icon={saving ? Loader : ChevronRight} />
</Button>
</OnboardingControls.Portal>
</View>
)
@@ -7,6 +7,7 @@ import {useMutation, useQueryClient} from '@tanstack/react-query'
import * as bcp47Match from 'bcp-47-match'
import {wait} from '#/lib/async/wait'
import {popularInterests, useInterestsDisplayNames} from '#/lib/interests'
import {isBlockedOrBlocking, isMuted} from '#/lib/moderation/blocked-and-muted'
import {logger} from '#/logger'
import {isWeb} from '#/platform/detection'
@@ -16,11 +17,7 @@ import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {useAgent, useSession} from '#/state/session'
import {useOnboardingDispatch} from '#/state/shell'
import {OnboardingControls} from '#/screens/Onboarding/Layout'
import {
Context,
popularInterests,
useInterestsDisplayNames,
} from '#/screens/Onboarding/state'
import {Context} from '#/screens/Onboarding/state'
import {useSuggestedUsers} from '#/screens/Search/util/useSuggestedUsers'
import {atoms as a, tokens, useBreakpoints, useTheme} from '#/alf'
import {Admonition} from '#/components/Admonition'
@@ -77,6 +74,8 @@ export function StepSuggestedAccounts() {
})
const isError = !!error
const isEmpty =
!isLoading && suggestedUsers && suggestedUsers.actors.length === 0
const skipOnboarding = useCallback(() => {
onboardDispatch({type: 'finish'})
@@ -171,13 +170,21 @@ export function StepSuggestedAccounts() {
<Loader size="xl" />
</View>
) : isError ? (
<View style={[a.flex_1, a.px_xl, a.pt_5xl]}>
<View style={[a.flex_1, a.px_xl, a.pt_2xl]}>
<Admonition type="error">
<Trans>
An error occurred while fetching suggested accounts.
</Trans>
</Admonition>
</View>
) : isEmpty ? (
<View style={[a.flex_1, a.px_xl, a.pt_2xl]}>
<Admonition type="apology">
<Trans>
Sorry, we're unable to load account suggestions at this time.
</Trans>
</Admonition>
</View>
) : (
<View
style={[
-66
View File
@@ -1,6 +1,4 @@
import React from 'react'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {logger} from '#/logger'
import {
@@ -22,7 +20,6 @@ export type OnboardingState = {
interestsStepResults: {
selectedInterests: string[]
apiResponse: ApiResponseMap
}
profileStepResults: {
isCreatedAvatar: boolean
@@ -61,7 +58,6 @@ export type OnboardingAction =
| {
type: 'setInterestsStepResults'
selectedInterests: string[]
apiResponse: ApiResponseMap
}
| {
type: 'setProfileStepResults'
@@ -77,62 +73,6 @@ export type OnboardingAction =
| undefined
}
export type ApiResponseMap = {
interests: string[]
suggestedAccountDids: {
[key: string]: string[]
}
suggestedFeedUris: {
[key: string]: string[]
}
}
// most popular selected interests
export const popularInterests = [
'art',
'gaming',
'sports',
'comics',
'music',
'politics',
'photography',
'science',
'news',
]
export function useInterestsDisplayNames() {
const {_} = useLingui()
return React.useMemo<Record<string, string>>(() => {
return {
// Keep this alphabetized
animals: _(msg`Animals`),
art: _(msg`Art`),
books: _(msg`Books`),
comedy: _(msg`Comedy`),
comics: _(msg`Comics`),
culture: _(msg`Culture`),
dev: _(msg`Software Dev`),
education: _(msg`Education`),
food: _(msg`Food`),
gaming: _(msg`Video Games`),
journalism: _(msg`Journalism`),
movies: _(msg`Movies`),
music: _(msg`Music`),
nature: _(msg`Nature`),
news: _(msg`News`),
pets: _(msg`Pets`),
photography: _(msg`Photography`),
politics: _(msg`Politics`),
science: _(msg`Science`),
sports: _(msg`Sports`),
tech: _(msg`Tech`),
tv: _(msg`TV`),
writers: _(msg`Writers`),
}
}, [_])
}
export const initialState: OnboardingState = {
hasPrev: false,
totalSteps: 3,
@@ -142,11 +82,6 @@ export const initialState: OnboardingState = {
interestsStepResults: {
selectedInterests: [],
apiResponse: {
interests: [],
suggestedAccountDids: {},
suggestedFeedUris: {},
},
},
profileStepResults: {
isCreatedAvatar: false,
@@ -212,7 +147,6 @@ export function reducer(
case 'setInterestsStepResults': {
next.interestsStepResults = {
selectedInterests: a.selectedInterests,
apiResponse: a.apiResponse,
}
break
}
+1 -4
View File
@@ -10,6 +10,7 @@ import {useLingui} from '@lingui/react'
import {useQueryClient} from '@tanstack/react-query'
import * as bcp47Match from 'bcp-47-match'
import {popularInterests, useInterestsDisplayNames} from '#/lib/interests'
import {cleanError} from '#/lib/strings/errors'
import {sanitizeHandle} from '#/lib/strings/handles'
import {logger} from '#/logger'
@@ -41,10 +42,6 @@ import {ViewFullThread} from '#/view/com/posts/ViewFullThread'
import {List} from '#/view/com/util/List'
import {FeedFeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
import {LoadMoreRetryBtn} from '#/view/com/util/LoadMoreRetryBtn'
import {
popularInterests,
useInterestsDisplayNames,
} from '#/screens/Onboarding/state'
import {
StarterPackCard,
StarterPackCardSkeleton,
@@ -3,9 +3,9 @@ import {View} from 'react-native'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useInterestsDisplayNames} from '#/lib/interests'
import {Nux, useSaveNux} from '#/state/queries/nuxs'
import {usePreferencesQuery} from '#/state/queries/preferences'
import {useInterestsDisplayNames} from '#/screens/Onboarding/state'
import {atoms as a, useTheme} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {Shapes_Stroke2_Corner0_Rounded as Shapes} from '#/components/icons/Shapes'
@@ -5,13 +5,10 @@ import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {type InfiniteData} from '@tanstack/react-query'
import {popularInterests, useInterestsDisplayNames} from '#/lib/interests'
import {logger} from '#/logger'
import {usePreferencesQuery} from '#/state/queries/preferences'
import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture'
import {
popularInterests,
useInterestsDisplayNames,
} from '#/screens/Onboarding/state'
import {useTheme} from '#/alf'
import {atoms as a} from '#/alf'
import {boostInterests, InterestTabs} from '#/components/InterestTabs'
+1 -1
View File
@@ -1,8 +1,8 @@
import {useMemo} from 'react'
import {useInterestsDisplayNames} from '#/lib/interests'
import {useActorSearchPaginated} from '#/state/queries/actor-search'
import {useGetSuggestedUsersQuery} from '#/state/queries/trending/useGetSuggestedUsersQuery'
import {useInterestsDisplayNames} from '#/screens/Onboarding/state'
/**
* Conditional hook, used in case a user is a non-english speaker, in which
+7 -29
View File
@@ -6,6 +6,11 @@ import {type NativeStackScreenProps} from '@react-navigation/native-stack'
import {useQueryClient} from '@tanstack/react-query'
import debounce from 'lodash.debounce'
import {
type Interest,
interests as allInterests,
useInterestsDisplayNames,
} from '#/lib/interests'
import {type CommonNavigatorParams} from '#/lib/routes/types'
import {
preferencesQueryKey,
@@ -17,7 +22,6 @@ import {createGetSuggestedUsersQueryKey} from '#/state/queries/trending/useGetSu
import {createSuggestedStarterPacksQueryKey} from '#/state/queries/useSuggestedStarterPacksQuery'
import {useAgent} from '#/state/session'
import * as Toast from '#/view/com/util/Toast'
import {useInterestsDisplayNames} from '#/screens/Onboarding/state'
import {atoms as a, useGutters, useTheme} from '#/alf'
import {Admonition} from '#/components/Admonition'
import {Divider} from '#/components/Divider'
@@ -160,7 +164,7 @@ function Inner({
onChange={onChangeInterests}
label={_(msg`Select your interests from the options below`)}>
<View style={[a.flex_row, a.flex_wrap, a.gap_sm]}>
{INTERESTS.map(interest => {
{allInterests.map(interest => {
const name = interestsDisplayNames[interest]
if (!name) return null
return (
@@ -178,7 +182,7 @@ function Inner({
)
}
export function InterestButton({interest}: {interest: string}) {
export function InterestButton({interest}: {interest: Interest}) {
const t = useTheme()
const interestsDisplayNames = useInterestsDisplayNames()
const ctx = Toggle.useItemContext()
@@ -230,29 +234,3 @@ export function InterestButton({interest}: {interest: string}) {
</View>
)
}
const INTERESTS = [
'animals',
'art',
'books',
'comedy',
'comics',
'culture',
'dev',
'education',
'food',
'gaming',
'journalism',
'movies',
'music',
'nature',
'news',
'pets',
'photography',
'politics',
'science',
'sports',
'tech',
'tv',
'writers',
]
@@ -8,6 +8,7 @@ import {
aggregateUserInterests,
createBskyTopicsHeader,
} from '#/lib/api/feed/utils'
import {logger} from '#/logger'
import {getContentLanguages} from '#/state/preferences/languages'
import {STALE} from '#/state/queries'
import {usePreferencesQuery} from '#/state/queries/preferences'
@@ -38,7 +39,13 @@ export function useGetSuggestedUsersQuery(props: QueryProps) {
queryKey: createGetSuggestedUsersQueryKey(props),
queryFn: async () => {
const contentLangs = getContentLanguages().join(',')
const interests = aggregateUserInterests(preferences)
const userInterests = aggregateUserInterests(preferences)
const interests =
props.overrideInterests && props.overrideInterests.length > 0
? props.overrideInterests.join(',')
: userInterests
const {data} = await agent.app.bsky.unspecced.getSuggestedUsers(
{
category: props.category ?? undefined,
@@ -46,15 +53,30 @@ export function useGetSuggestedUsersQuery(props: QueryProps) {
},
{
headers: {
...createBskyTopicsHeader(
props.overrideInterests && props.overrideInterests.length > 0
? props.overrideInterests.join(',')
: interests,
),
...createBskyTopicsHeader(interests),
'Accept-Language': contentLangs,
},
},
)
// FALLBACK: if no results for 'all', try again with no interests specified
if (!props.category && data.actors.length === 0) {
logger.error(
`Did not get any suggested users, falling back - interests: ${interests}`,
)
const {data: fallbackData} =
await agent.app.bsky.unspecced.getSuggestedUsers(
{
category: props.category ?? undefined,
limit: props.limit || 10,
},
{
headers: {
'Accept-Language': contentLangs,
},
},
)
return fallbackData
}
return data
},