Eric Bailey
25a1ed1209
* WIP * Clean up growthbook code, integrate into init and sessions * Move everything out of React * Add metrics client * Move to separate file * Shared metadata cache * Ensure we update metadata when session ID changes * Ensure userMetadata is cleared when logging out * WIP revamp * Integrate feature gates into analytics context * Clean up old code * Fix useMeta util * Some comments and cleanup * Add logger to base analytics context * Refactor current route handling * Rip out LogEvent from navigation * Update tracking endpoint * Migrate toClout * Clear out statsig client * Add todo, reset logger readme * Ope fix statsig noop * Refactor logging in feed-feedback, add debug logging to metrics client * Remove LogEvents alias for Metrics * Prefer root package export * Remove Metrics alias from logger * [APP-1782] Migrate to new analytics APIs (#9735) * Migrate logEvent to useAnalytics * Migrate logger.metric to useAnalytics * Migrate tricky spot, fix types * Migrate remaining tricky spot * Missed one * Remove metric() from logger * Migrate useGate to useAnalytics * Remove all other StatSig mentions * Update event payload * Update logger tests * Mock expo method * Fix session ID bug * Add session ID test * Add test for metrics client * Clarify intent * Clean up core analytics file * Clean up the call once utils * Fix TODO * Fix TODO * Fix TODO * Fix TODO * Fix TODO * Remove debug code * Fix navigation context * OK nav context is not working, todo * Checkpoint: works but feels hacky * Fix navigation context issue * Improve feature API * Improve metric logging * Update logger tests
100 lines
3.2 KiB
TypeScript
100 lines
3.2 KiB
TypeScript
import React from 'react'
|
|
import {View} from 'react-native'
|
|
import {msg, Trans} from '@lingui/macro'
|
|
import {useLingui} from '@lingui/react'
|
|
|
|
import {interests, useInterestsDisplayNames} from '#/lib/interests'
|
|
import {capitalize} from '#/lib/strings/capitalize'
|
|
import {logger} from '#/logger'
|
|
import {
|
|
OnboardingControls,
|
|
OnboardingDescriptionText,
|
|
OnboardingPosition,
|
|
OnboardingTitleText,
|
|
} from '#/screens/Onboarding/Layout'
|
|
import {useOnboardingInternalState} from '#/screens/Onboarding/state'
|
|
import {InterestButton} from '#/screens/Onboarding/StepInterests/InterestButton'
|
|
import {atoms as a} from '#/alf'
|
|
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
|
|
import * as Toggle from '#/components/forms/Toggle'
|
|
import {Loader} from '#/components/Loader'
|
|
import {useAnalytics} from '#/analytics'
|
|
|
|
export function StepInterests() {
|
|
const {_} = useLingui()
|
|
const ax = useAnalytics()
|
|
const interestsDisplayNames = useInterestsDisplayNames()
|
|
|
|
const {state, dispatch} = useOnboardingInternalState()
|
|
const [saving, setSaving] = React.useState(false)
|
|
const [selectedInterests, setSelectedInterests] = React.useState<string[]>(
|
|
state.interestsStepResults.selectedInterests.map(i => i),
|
|
)
|
|
|
|
const saveInterests = React.useCallback(async () => {
|
|
setSaving(true)
|
|
|
|
try {
|
|
setSaving(false)
|
|
dispatch({
|
|
type: 'setInterestsStepResults',
|
|
selectedInterests,
|
|
})
|
|
dispatch({type: 'next'})
|
|
ax.metric('onboarding:interests:nextPressed', {
|
|
selectedInterests,
|
|
selectedInterestsLength: selectedInterests.length,
|
|
})
|
|
} catch (e: any) {
|
|
logger.info(`onboading: error saving interests`)
|
|
logger.error(e)
|
|
}
|
|
}, [ax, selectedInterests, setSaving, dispatch])
|
|
|
|
return (
|
|
<View style={[a.align_start, a.gap_sm]} testID="onboardingInterests">
|
|
<OnboardingPosition />
|
|
<OnboardingTitleText>
|
|
<Trans>What are your interests?</Trans>
|
|
</OnboardingTitleText>
|
|
<OnboardingDescriptionText>
|
|
<Trans>We'll use this to help customize your experience.</Trans>
|
|
</OnboardingDescriptionText>
|
|
|
|
<View style={[a.w_full, a.pt_lg]}>
|
|
<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>
|
|
</Toggle.Group>
|
|
</View>
|
|
|
|
<OnboardingControls.Portal>
|
|
<Button
|
|
disabled={saving}
|
|
testID="onboardingContinue"
|
|
variant="solid"
|
|
color="primary"
|
|
size="large"
|
|
label={_(msg`Continue to next step`)}
|
|
onPress={saveInterests}>
|
|
<ButtonText>
|
|
<Trans>Continue</Trans>
|
|
</ButtonText>
|
|
{saving && <ButtonIcon icon={Loader} />}
|
|
</Button>
|
|
</OnboardingControls.Portal>
|
|
</View>
|
|
)
|
|
}
|