diff options
Diffstat (limited to 'src/screens/Onboarding/StepAlgoFeeds')
| -rw-r--r-- | src/screens/Onboarding/StepAlgoFeeds/FeedCard.tsx | 378 | ||||
| -rw-r--r-- | src/screens/Onboarding/StepAlgoFeeds/index.tsx | 168 |
2 files changed, 0 insertions, 546 deletions
diff --git a/src/screens/Onboarding/StepAlgoFeeds/FeedCard.tsx b/src/screens/Onboarding/StepAlgoFeeds/FeedCard.tsx deleted file mode 100644 index 0aa063faa..000000000 --- a/src/screens/Onboarding/StepAlgoFeeds/FeedCard.tsx +++ /dev/null @@ -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> - ) -} diff --git a/src/screens/Onboarding/StepAlgoFeeds/index.tsx b/src/screens/Onboarding/StepAlgoFeeds/index.tsx deleted file mode 100644 index 19bb40104..000000000 --- a/src/screens/Onboarding/StepAlgoFeeds/index.tsx +++ /dev/null @@ -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> - ) -} |