populate the real starter packs

src/components/StarterPack/ProfileStarterPacks.tsx

@@ -80,9 +80,9 @@ export const ProfileStarterPacks = React.forwardRef<
     } else if (isEmpty) {
       items = items.concat([EMPTY])
     } else if (data?.pages) {
-      for (const page of data?.pages) {
+      console.log('has pages')
-        items = page.starterPacks
+      console.log(data?.pages)
-      }
+      items = data?.pages.flatMap(page => page.starterPacks)
     }
     if (isError && !isEmpty) {
       items = items.concat([LOAD_MORE_ERROR_ITEM])
@@ -147,7 +147,13 @@ export const ProfileStarterPacks = React.forwardRef<
         return <FeedLoadingPlaceholder />
       }
       if (preferences) {
-        return <StarterPackCard type="list" hideTopBorder={index === 0} />
+        return (
+          <StarterPackCard
+            starterPack={item}
+            type="list"
+            hideTopBorder={index === 0}
+          />
+        )
       }
       return null
     },
@@ -175,7 +181,6 @@ export const ProfileStarterPacks = React.forwardRef<
         contentContainerStyle={isNative && {paddingBottom: headerOffset + 100}}
         indicatorStyle={theme.colorScheme === 'dark' ? 'white' : 'black'}
         removeClippedSubviews={true}
-        // @ts-ignore our .web version only -prf
         desktopFixedHeight
         onEndReached={onEndReached}
       />

src/components/StarterPack/StarterPackCard.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import {View} from 'react-native'
+import {StarterPackViewBasic} from '@atproto/api/dist/client/types/app/bsky/graph/defs'
 
 import {atoms as a, useTheme} from '#/alf'
 import {StarterPackIcon} from '#/components/icons/StarterPackIcon'
@@ -7,16 +8,18 @@ import {Link} from '#/components/Link'
 import {Text} from '#/components/Typography'
 
 export function StarterPackCard({
+  starterPack,
   type,
   hideTopBorder,
 }: {
+  starterPack: StarterPackViewBasic
   hideTopBorder?: boolean
   type: 'list' | 'notification'
 }) {
   const t = useTheme()
 
   return (
-    <Link to={{screen: 'StarterPack', params: {id: '123'}}}>
+    <Link to={{screen: 'StarterPack', params: {id: starterPack.uri}}}>
       <View
         style={[
           a.flex_row,

src/state/queries/useStarterPackQuery.ts

@@ -15,7 +15,6 @@ export function useStarterPackQuery({id}: {id: string}) {
       const res = await agent.app.bsky.graph.getStarterPack({
         starterPack: id,
       })
-
       return res.data
     },
     staleTime: STALE.MINUTES.FIVE,