use new API

Author: mozzius

package.json

@@ -71,7 +71,7 @@
     "icons:optimize": "svgo -f ./assets/icons"
   },
   "dependencies": {
-    "@atproto/api": "^0.16.7",
+    "@atproto/api": "^0.16.11",
     "@bitdrift/react-native": "^0.6.8",
     "@braintree/sanitize-url": "^6.0.2",
     "@bsky.app/alf": "^0.1.2",
@@ -220,7 +220,7 @@
     "zod": "^3.20.2"
   },
   "devDependencies": {
-    "@atproto/dev-env": "^0.3.172",
+    "@atproto/dev-env": "^0.3.179",
     "@babel/core": "^7.26.0",
     "@babel/preset-env": "^7.26.0",
     "@babel/runtime": "^7.26.0",

src/screens/Onboarding/StepSuggestedStarterpacks/index.tsx

@@ -4,7 +4,7 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
-import {useSuggestedStarterPacksQuery} from '#/state/queries/useSuggestedStarterPacksQuery'
+import {useOnboardingSuggestedStarterPacksQuery} from '#/state/queries/useOnboardingSuggestedStarterPacksQuery'
 import {useOnboardingDispatch} from '#/state/shell'
 import {OnboardingControls} from '#/screens/Onboarding/Layout'
 import {Context} from '#/screens/Onboarding/state'
@@ -34,12 +34,12 @@ export function StepSuggestedStarterpacks() {
   // }, [contentLanguages])
 
   const {
-    data: suggestedUsers,
+    data: suggestedStarterPacks,
     isLoading,
     error,
     isRefetching,
     refetch,
-  } = useSuggestedStarterPacksQuery({
+  } = useOnboardingSuggestedStarterPacksQuery({
     enabled: true,
     overrideInterests: state.interestsStepResults.selectedInterests,
   })
@@ -53,7 +53,7 @@ export function StepSuggestedStarterpacks() {
 
   return (
     <View style={[a.align_start]} testID="onboardingInterests">
-      <Text style={[a.font_heavy, a.text_3xl]}>
+      <Text style={[a.font_bold, a.text_3xl]}>
         <Trans comment="Accounts suggested to the user for them to follow">
           Suggested for you
         </Trans>
@@ -100,7 +100,7 @@ export function StepSuggestedStarterpacks() {
           </View>
         ) : (
           <View style={[a.flex_1, a.mt_md]}>
-            {suggestedUsers?.starterPacks.map(starterPack => (
+            {suggestedStarterPacks?.starterPacks.map(starterPack => (
               <View style={[a.pb_lg]} key={starterPack.uri}>
                 <StarterPackCard view={starterPack} />
               </View>
@@ -150,49 +150,3 @@ export function StepSuggestedStarterpacks() {
     </View>
   )
 }
-
-// function TabBar({
-//   selectedInterest,
-//   onSelectInterest,
-//   selectedInterests,
-//   hideDefaultTab,
-//   defaultTabLabel,
-// }: {
-//   selectedInterest: string | null
-//   onSelectInterest: (interest: string | null) => void
-//   selectedInterests: string[]
-//   hideDefaultTab?: boolean
-//   defaultTabLabel?: string
-// }) {
-//   const {_} = useLingui()
-//   const interestsDisplayNames = useInterestsDisplayNames()
-//   const interests = Object.keys(interestsDisplayNames)
-//     .sort(boostInterests(popularInterests))
-//     .sort(boostInterests(selectedInterests))
-
-//   return (
-//     <InterestTabs
-//       interests={hideDefaultTab ? interests : ['all', ...interests]}
-//       selectedInterest={
-//         selectedInterest || (hideDefaultTab ? interests[0] : 'all')
-//       }
-//       onSelectTab={tab => {
-//         logger.metric(
-//           'onboarding:suggestedAccounts:tabPressed',
-//           {tab: tab},
-//           {statsig: true},
-//         )
-//         onSelectInterest(tab === 'all' ? null : tab)
-//       }}
-//       interestsDisplayNames={
-//         hideDefaultTab
-//           ? interestsDisplayNames
-//           : {
-//               all: defaultTabLabel || _(msg`For You`),
-//               ...interestsDisplayNames,
-//             }
-//       }
-//       gutterWidth={isWeb ? 0 : tokens.space.xl}
-//     />
-//   )
-// }

src/state/queries/useOnboardingSuggestedStarterPacksQuery.ts

@@ -0,0 +1,49 @@
+import {useQuery} from '@tanstack/react-query'
+
+import {
+  aggregateUserInterests,
+  createBskyTopicsHeader,
+} from '#/lib/api/feed/utils'
+import {getContentLanguages} from '#/state/preferences/languages'
+import {STALE} from '#/state/queries'
+import {usePreferencesQuery} from '#/state/queries/preferences'
+import {useAgent} from '#/state/session'
+
+export const createOnboardingSuggestedStarterPacksQueryKey = (
+  interests?: string[],
+) => ['onboarding-suggested-starter-packs', interests?.join(',')]
+
+export function useOnboardingSuggestedStarterPacksQuery({
+  enabled,
+  overrideInterests,
+}: {
+  enabled?: boolean
+  overrideInterests?: string[]
+}) {
+  const agent = useAgent()
+  const {data: preferences} = usePreferencesQuery()
+  const contentLangs = getContentLanguages().join(',')
+
+  return useQuery({
+    enabled: !!preferences && enabled !== false,
+    staleTime: STALE.MINUTES.THREE,
+    queryKey: createOnboardingSuggestedStarterPacksQueryKey(overrideInterests),
+    queryFn: async () => {
+      const {data} =
+        await agent.app.bsky.unspecced.getOnboardingSuggestedStarterPacks(
+          {limit: 5},
+          {
+            headers: {
+              ...createBskyTopicsHeader(
+                overrideInterests
+                  ? overrideInterests.join(',')
+                  : aggregateUserInterests(preferences),
+              ),
+              'Accept-Language': contentLangs,
+            },
+          },
+        )
+      return data
+    },
+  })
+}