use real data in landing

src/screens/StarterPack/Main/ProfilesList.tsx

@@ -4,6 +4,7 @@ import {AppBskyActorDefs} from '@atproto/api'
 
 import {useBottomBarOffset} from 'lib/hooks/useBottomBarOffset'
 import {isNative} from 'platform/detection'
+import {useListMembersQuery} from 'state/queries/list-members'
 import {ProfileCardWithFollowBtn} from 'view/com/profile/ProfileCard'
 import {List, ListRef} from 'view/com/util/List'
 import {SectionRef} from '#/screens/Profile/Sections/types'
@@ -17,16 +18,19 @@ function keyExtractor(item: AppBskyActorDefs.ProfileViewBasic, index: number) {
 }
 
 interface ProfilesListProps {
-  profiles: AppBskyActorDefs.ProfileViewBasic[]
+  listUri: string
   headerHeight: number
   scrollElRef: ListRef
 }
 
 export const ProfilesList = React.forwardRef<SectionRef, ProfilesListProps>(
-  function ProfilesListImpl({profiles, headerHeight, scrollElRef}, ref) {
+  function ProfilesListImpl({listUri, headerHeight, scrollElRef}, ref) {
     const [initialHeaderHeight] = React.useState(headerHeight)
     const bottomBarOffset = useBottomBarOffset(20)
 
+    const {data} = useListMembersQuery(listUri)
+    const profiles = data?.pages.flatMap(p => p.items[0].subject)
+
     const onScrollToTop = useCallback(() => {
       scrollElRef.current?.scrollToOffset({
         animated: isNative,
@@ -49,7 +53,6 @@ export const ProfilesList = React.forwardRef<SectionRef, ProfilesListProps>(
           <View style={[{height: initialHeaderHeight + bottomBarOffset}]} />
         }
         showsVerticalScrollIndicator={false}
-        // @ts-ignore
         desktopFixedHeight
       />
     )

src/screens/StarterPack/Main/index.tsx

@@ -1,12 +1,17 @@
 import React from 'react'
 import {View} from 'react-native'
+import {AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
 
+import {makeProfileLink} from 'lib/routes/links'
 import {CommonNavigatorParams} from 'lib/routes/types'
 import {shareUrl} from 'lib/sharing'
 import {isWeb} from 'platform/detection'
+import {useResolveDidQuery} from 'state/queries/resolve-uri'
+import {useStarterPackQuery} from 'state/queries/useStarterPackQuery'
+import {useSession} from 'state/session'
 import {PagerWithHeader} from 'view/com/pager/PagerWithHeader'
 import {ProfileSubpageHeader} from 'view/com/profile/ProfileSubpageHeader'
 import {CenteredView} from 'view/com/util/Views'
@@ -17,148 +22,100 @@ import {Button, ButtonText} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
 import {ArrowOutOfBox_Stroke2_Corner0_Rounded as ArrowOutOfBox} from '#/components/icons/ArrowOutOfBox'
 import {QrCode_Stroke2_Corner0_Rounded as QrCode} from '#/components/icons/QrCode'
+import {ListMaybePlaceholder} from '#/components/Lists'
 import * as Menu from '#/components/Menu'
 import {QrCodeDialog} from '#/components/StarterPack/QrCodeDialog'
 import {Text} from '#/components/Typography'
 
-/**
- * TEMPORARY CONTENT, DO NOT TRANSLATE
- */
-/**
- * TEMPORARY CONTENT, DO NOT TRANSLATE
- */
-/**
- * TEMPORARY CONTENT, DO NOT TRANSLATE
- */
+export function StarterPackScreen({
+  route,
+}: NativeStackScreenProps<CommonNavigatorParams, 'StarterPackLanding'>) {
+  const {name, rkey} = route.params
+  const {
+    data: did,
+    isLoading: isLoadingDid,
+    isError: isErrorDid,
+  } = useResolveDidQuery(name)
+  const {
+    data: starterPack,
+    isLoading: isLoadingStarterPack,
+    isError: isErrorStarterPack,
+  } = useStarterPackQuery({did, rkey})
 
-const PLACEHOLDER_USERS = [
-  {
-    did: 'did:plc:qjeavhlw222ppsre4rscd3n2',
-    handle: 'test.handle',
-    displayName: 'Bossett',
-    avatar:
-      'https://cdn.bsky.app/img/avatar/plain/did:plc:jfhpnnst6flqway4eaeqzj2a/bafkreid42e2su4sju7hl2nm4ouacw3icvvytf7r6gab3pvc2qxhqhc5ji4@jpeg',
-    description: 'he/him\n' + '📍 🇦🇺',
-  },
-  {
-    did: 'did:plc:qjeavhlw222ppsre4rscd3n2',
-    handle: 'test.handle',
-    displayName: 'hailey',
-    avatar:
-      'https://cdn.bsky.app/img/avatar/plain/did:plc:oisofpd7lj26yvgiivf3lxsi/bafkreia4lpswywb5yx3gsezqb5io73kt7icw634ks4m4mmbfvp7e62cxku@jpeg',
-    description:
-      'React Native @ Bluesky\n' + 'Tomato hater 🍅 ❌\n' + 'she/her',
-  },
-  {
-    did: 'did:plc:qjeavhlw222ppsre4rscd3n2',
-    handle: 'test.handle',
-    displayName: 'samuel',
-    avatar:
-      'https://cdn.bsky.app/img/avatar/plain/did:plc:p2cp5gopk7mgjegy6wadk3ep/bafkreias5vktko4jpg4mwp4audptcbdfkb4o3cfyzt4426mj2h7ewwvg7q@jpeg',
-    description: 'formerly mozzius. developer at bluesky\n' + '📍London',
-  },
+  if (!did || !starterPack) {
+    return (
+      <ListMaybePlaceholder
+        isLoading={isLoadingDid || isLoadingStarterPack}
+        isError={isErrorDid || isErrorStarterPack}
+      />
+    )
+  }
 
-  {
-    did: 'did:plc:qjeavhlw222ppsre4rscd3n2',
-    handle: 'test.handle',
-    displayName: 'Paul “Frazee” 🦋',
-    avatar:
-      'https://cdn.bsky.app/img/avatar/plain/did:plc:ragtjsm2j2vknwkz3zp4oxrd/bafkreihhpqdyntku66himwor5wlhtdo44hllmngj2ofmbqnm25bdm454wq@jpeg',
-    description: 'Developer at Bluesky. Go Mets.',
-  },
-  {
-    did: 'did:plc:qjeavhlw222ppsre4rscd3n2',
-    handle: 'test.handle',
-    displayName: 'Jay',
-    avatar:
-      'https://cdn.bsky.app/img/avatar/plain/did:plc:oky5czdrnfjpqslsw2a5iclo/bafkreihidru2xruxdxlvvcixc7lbgoudzicjbrdgacdhdhxyfw4yut4nfq@jpeg',
-  },
-  {
-    did: 'did:plc:qjeavhlw222ppsre4rscd3n2',
-    handle: 'test.handle',
-    displayName: 'Emily 🦋',
-    avatar:
-      'https://cdn.bsky.app/img/avatar/plain/did:plc:vjug55kidv6sye7ykr5faxxn/bafkreia63347vwjt4sgfkedgvytodt22ugfck5o36qotwaflsf3qq5xj3y@jpeg',
-  },
-  {
-    did: 'did:plc:qjeavhlw222ppsre4rscd3n2',
-    handle: 'test.handle',
-    displayName: 'Rose 🌹',
-    avatar:
-      'https://cdn.bsky.app/img/avatar/plain/did:plc:qjeavhlw222ppsre4rscd3n2/bafkreiehdi7v7bmz64anqam72ybtkkeodfe22sh7dcsh7m6wei2cf5liye@jpeg',
-  },
-  {
-    did: 'did:plc:qjeavhlw222ppsre4rscd3n2',
-    handle: 'test.handle',
-    displayName: 'dan',
-    avatar:
-      'https://cdn.bsky.app/img/avatar/plain/did:plc:fpruhuo22xkm5o7ttr2ktxdo/bafkreif65cz6sp4cvwue6dnsy7lhy7o7vdelknwd6hermcbzg2npealz5q@jpeg',
-  },
-]
-
-const PLACEHOLDER_FEEDS = [
-  'at://did:plc:jfhpnnst6flqway4eaeqzj2a/app.bsky.feed.generator/for-science',
-  'at://did:plc:upmfcx5muayjhkg5sltj625o/app.bsky.feed.generator/aaachrckxlsh2',
-]
-
-export function StarterPackScreen({}: NativeStackScreenProps<
-  CommonNavigatorParams,
-  'StarterPackLanding'
->) {
-  // const {id} = route.params
+  const items = [
+    ...(starterPack.list ? ['People'] : []),
+    ...(starterPack.feeds ? ['Feeds'] : []),
+  ]
 
   return (
     <CenteredView style={[a.h_full_vh]}>
-      <StarterPackScreenInner />
+      <View style={isWeb ? {minHeight: '100%'} : {height: '100%'}}>
+        <PagerWithHeader
+          items={items}
+          isHeaderReady={true}
+          renderHeader={() => <Header starterPack={starterPack} />}>
+          {starterPack.list
+            ? ({headerHeight, scrollElRef}) => (
+                <ProfilesList
+                  key={0}
+                  listUri={starterPack.list.uri}
+                  headerHeight={headerHeight}
+                  // @ts-expect-error
+                  scrollElRef={scrollElRef}
+                />
+              )
+            : null}
+          {starterPack.feeds
+            ? ({headerHeight, scrollElRef}) => (
+                <FeedsList
+                  key={1}
+                  feeds={starterPack.feeds}
+                  headerHeight={headerHeight}
+                  // @ts-expect-error
+                  scrollElRef={scrollElRef}
+                />
+              )
+            : null}
+        </PagerWithHeader>
+      </View>
     </CenteredView>
   )
 }
 
-function StarterPackScreenInner() {
-  const isOwn = true
-
-  return (
-    <View style={isWeb ? {minHeight: '100%'} : {height: '100%'}}>
-      <PagerWithHeader
-        items={['People', 'Feeds']}
-        isHeaderReady={true}
-        renderHeader={() => <Header isOwn={isOwn} />}>
-        {({headerHeight, scrollElRef}) => (
-          <ProfilesList
-            key={0}
-            profiles={PLACEHOLDER_USERS}
-            headerHeight={headerHeight}
-            // @ts-expect-error
-            scrollElRef={scrollElRef}
-          />
-        )}
-        {({headerHeight, scrollElRef}) => (
-          <FeedsList
-            key={1}
-            feeds={PLACEHOLDER_FEEDS}
-            headerHeight={headerHeight}
-            // @ts-expect-error
-            scrollElRef={scrollElRef}
-          />
-        )}
-      </PagerWithHeader>
-    </View>
-  )
-}
-
-function Header({isOwn}: {isOwn: boolean}) {
+function Header({
+  starterPack,
+}: {
+  starterPack: AppBskyGraphDefs.StarterPackView
+}) {
   const {_} = useLingui()
+  const {currentAccount} = useSession()
   const qrCodeDialogControl = useDialogControl()
 
+  const {record, creator} = starterPack
+  const isOwn = creator.did === currentAccount?.did
+
+  if (!AppBskyGraphStarterpack.isRecord(record)) {
+    return null
+  }
+
   return (
     <>
       <ProfileSubpageHeader
         isLoading={false}
-        href=""
-        title="Science"
-        isOwner={false}
+        href={makeProfileLink(creator)}
+        title={record.name}
+        isOwner={isOwn}
         avatar={undefined}
-        creator={undefined}
+        creator={creator}
         avatarType="starter-pack">
         <View style={[a.flex_row, a.gap_sm]}>
           <Menu.Root>
@@ -218,10 +175,7 @@ function Header({isOwn}: {isOwn: boolean}) {
         </View>
       </ProfileSubpageHeader>
       <View style={[a.px_md, a.py_lg]}>
-        <Text style={[a.text_md]}>
-          (This is the description) A collection of feeds and users to get you
-          started with the science community on Bluesky!
-        </Text>
+        <Text style={[a.text_md]}>{record.description}</Text>
       </View>
 
       <QrCodeDialog control={qrCodeDialogControl} url="https://bsky.app" />