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

src/screens/Onboarding/StepInterests/InterestButton.tsx

@@ -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()

src/screens/Onboarding/StepInterests/index.tsx

@@ -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>
   )

src/screens/Onboarding/StepSuggestedAccounts/index.tsx

@@ -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={[

src/screens/Onboarding/state.ts

@@ -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
     }