fix race when adding pinned feed

src/screens/Onboarding/StepFinished.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import {View} from 'react-native'
-import {AppBskyGraphDefs, AppBskyGraphStarterpack, AtUri} from '@atproto/api'
+import {AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'
@@ -78,20 +78,18 @@ export function StepFinished() {
           ...(listItems?.map(i => i.subject.did) ?? []),
         ]),
         (async () => {
+          await agent.setInterestsPref({tags: selectedInterests})
+
           if (starterPack?.feeds?.length) {
             await agent.addSavedFeeds(
               starterPack.feeds.map(f => ({
                 type: 'feed',
                 value: f.uri,
                 pinned: true,
-                id: new AtUri(f.uri).rkey,
               })),
             )
           }
         })(),
-        (async () => {
-          await agent.setInterestsPref({tags: selectedInterests})
-        })(),
         (async () => {
           const {imageUri, imageMime} = profileStepResults
           if (imageUri && imageMime) {

src/screens/StarterPack/Landing/index.tsx

@@ -9,9 +9,12 @@ import {
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
+import {NativeStackScreenProps} from '@react-navigation/native-stack'
 
-import {NavigationProp} from 'lib/routes/types'
+import {CommonNavigatorParams, NavigationProp} from 'lib/routes/types'
 import {useSetUsedStarterPack} from 'state/preferences/starter-pack'
+import {useResolveDidQuery} from 'state/queries/resolve-uri'
+import {useStarterPackQuery} from 'state/queries/useStarterPackQuery'
 import {useSession} from 'state/session'
 import {useSetMinimalShellMode} from 'state/shell'
 import {useLoggedOutViewControls} from 'state/shell/logged-out'
@@ -22,125 +25,128 @@ import {Logo} from 'view/icons/Logo'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {Divider} from '#/components/Divider'
+import {ListMaybePlaceholder} from '#/components/Lists'
 import {Text} from '#/components/Typography'
 
-const mockSP = {
+// const mockSP = {
-  uri: 'at://did:plc:t5nrviyjxkdhd5ymyra772dm/app.bsky.graph.starterpack/3kuec35ms422t',
+//   uri: 'at://did:plc:t5nrviyjxkdhd5ymyra772dm/app.bsky.graph.starterpack/3kuec35ms422t',
-  cid: 'bafyreigrvmj3qd4urr5q6lqku7uzj4xmazepik6oobuxtvunx3g7d6e6xi',
+//   cid: 'bafyreigrvmj3qd4urr5q6lqku7uzj4xmazepik6oobuxtvunx3g7d6e6xi',
-  record: {
+//   record: {
-    list: 'at://did:plc:t5nrviyjxkdhd5ymyra772dm/app.bsky.graph.list/3kuec35kvkj2t',
+//     list: 'at://did:plc:t5nrviyjxkdhd5ymyra772dm/app.bsky.graph.list/3kuec35kvkj2t',
-    name: 'Bluesky Team',
+//     name: 'Bluesky Team',
-    $type: 'app.bsky.graph.starterpack',
+//     $type: 'app.bsky.graph.starterpack',
-    feeds: [
+//     feeds: [
-      {
+//       {
-        uri: 'at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/bsky-team',
+//         uri: 'at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/bsky-team',
-      },
+//       },
-      {
+//       {
-        uri: 'at://did:plc:oio4hkxaop4ao4wz2pp3f4cr/app.bsky.feed.generator/atproto',
+//         uri: 'at://did:plc:oio4hkxaop4ao4wz2pp3f4cr/app.bsky.feed.generator/atproto',
-      },
+//       },
-    ],
+//     ],
-    createdAt: '2024-06-07T19:43:07.211Z',
+//     createdAt: '2024-06-07T19:43:07.211Z',
-    description:
+//     description:
-      'A starter pack including all the members of the Bluesky Team!',
+//       'A starter pack including all the members of the Bluesky Team!',
-    descriptionFacets: [],
+//     descriptionFacets: [],
-  },
+//   },
-  creator: {
+//   creator: {
-    did: 'did:plc:t5nrviyjxkdhd5ymyra772dm',
+//     did: 'did:plc:t5nrviyjxkdhd5ymyra772dm',
-    handle: 'haileyok.com',
+//     handle: 'haileyok.com',
-    displayName: 'hailey',
+//     displayName: 'hailey',
-    associated: {
+//     associated: {
-      chat: {
+//       chat: {
-        allowIncoming: 'following',
+//         allowIncoming: 'following',
-      },
+//       },
-    },
+//     },
-    viewer: {
+//     viewer: {
-      muted: false,
+//       muted: false,
-      blockedBy: false,
+//       blockedBy: false,
-    },
+//     },
-    labels: [],
+//     labels: [],
-  },
+//   },
-  feedCount: 0,
+//   feedCount: 0,
-  joinedAllTimeCount: 302,
+//   joinedAllTimeCount: 302,
-  joinedWeekCount: 143,
+//   joinedWeekCount: 143,
-  listItemCount: 2,
+//   listItemCount: 2,
-  labels: [],
+//   labels: [],
-  indexedAt: '2024-06-07T19:43:07.211Z',
+//   indexedAt: '2024-06-07T19:43:07.211Z',
-  feeds: [],
+//   feeds: [],
-  list: {
+//   list: {
-    uri: 'at://did:plc:oisofpd7lj26yvgiivf3lxsi/app.bsky.graph.list/3kuc6z2xxd22j',
+//     uri: 'at://did:plc:oisofpd7lj26yvgiivf3lxsi/app.bsky.graph.list/3kuc6z2xxd22j',
-    cid: 'bafyreibnigtususbzhjzadhsqconcf7s5wan6dl7h6s56jhxd6ebfvflrq',
+//     cid: 'bafyreibnigtususbzhjzadhsqconcf7s5wan6dl7h6s56jhxd6ebfvflrq',
-    name: 'Bluesky Team',
+//     name: 'Bluesky Team',
-    purpose: 'app.bsky.graph.defs#referencelist',
+//     purpose: 'app.bsky.graph.defs#referencelist',
-    indexedAt: '2024-06-07T19:43:07.122Z',
+//     indexedAt: '2024-06-07T19:43:07.122Z',
-    labels: [],
+//     labels: [],
-    viewer: {
+//     viewer: {
-      muted: false,
+//       muted: false,
-    },
+//     },
-  },
+//   },
-  listItemsSample: [
+//   listItemsSample: [
-    {
+//     {
-      uri: 'at://did:plc:t5nrviyjxkdhd5ymyra772dm/app.bsky.graph.listitem/3kuec35m2o22t',
+//       uri: 'at://did:plc:t5nrviyjxkdhd5ymyra772dm/app.bsky.graph.listitem/3kuec35m2o22t',
-      subject: {
+//       subject: {
-        did: 'did:plc:5warwwnoavxfhchjhcjlqyqi',
+//         did: 'did:plc:5warwwnoavxfhchjhcjlqyqi',
-        handle: 'bob.test',
+//         handle: 'bob.test',
-        displayName: 'Bob',
+//         displayName: 'Bob',
-        viewer: {
+//         viewer: {
-          muted: false,
+//           muted: false,
-          blockedBy: false,
+//           blockedBy: false,
-          following:
+//           following:
-            'at://did:plc:t5nrviyjxkdhd5ymyra772dm/app.bsky.graph.follow/3kudwno6ck22t',
+//             'at://did:plc:t5nrviyjxkdhd5ymyra772dm/app.bsky.graph.follow/3kudwno6ck22t',
-          followedBy:
+//           followedBy:
-            'at://did:plc:5warwwnoavxfhchjhcjlqyqi/app.bsky.graph.follow/3kudwno6nbs2t',
+//             'at://did:plc:5warwwnoavxfhchjhcjlqyqi/app.bsky.graph.follow/3kudwno6nbs2t',
-        },
+//         },
-        labels: [],
+//         labels: [],
-        description: 'Test user 2',
+//         description: 'Test user 2',
-        indexedAt: '2024-06-07T16:18:43.414Z',
+//         indexedAt: '2024-06-07T16:18:43.414Z',
-      },
+//       },
-    },
+//     },
-    {
+//     {
-      uri: 'at://did:plc:t5nrviyjxkdhd5ymyra772dm/app.bsky.graph.listitem/3kuec35m2nz2t',
+//       uri: 'at://did:plc:t5nrviyjxkdhd5ymyra772dm/app.bsky.graph.listitem/3kuec35m2nz2t',
-      subject: {
+//       subject: {
-        did: 'did:plc:cvdwnci2mr5srh4slty7lndz',
+//         did: 'did:plc:cvdwnci2mr5srh4slty7lndz',
-        handle: 'carla.test',
+//         handle: 'carla.test',
-        displayName: 'Carla',
+//         displayName: 'Carla',
-        viewer: {
+//         viewer: {
-          muted: false,
+//           muted: false,
-          blockedBy: false,
+//           blockedBy: false,
-          following:
+//           following:
-            'at://did:plc:t5nrviyjxkdhd5ymyra772dm/app.bsky.graph.follow/3kudwno6hgc2t',
+//             'at://did:plc:t5nrviyjxkdhd5ymyra772dm/app.bsky.graph.follow/3kudwno6hgc2t',
-          followedBy:
+//           followedBy:
-            'at://did:plc:cvdwnci2mr5srh4slty7lndz/app.bsky.graph.follow/3kudwno6x2c2t',
+//             'at://did:plc:cvdwnci2mr5srh4slty7lndz/app.bsky.graph.follow/3kudwno6x2c2t',
-        },
+//         },
-        labels: [],
+//         labels: [],
-        description: 'Test user 3',
+//         description: 'Test user 3',
-        indexedAt: '2024-06-07T16:18:43.462Z',
+//         indexedAt: '2024-06-07T16:18:43.462Z',
-      },
+//       },
-    },
+//     },
-  ],
+//   ],
-}
+// }
 
-export function LandingScreen({}) {
+export function LandingScreen({
-  // const {name, rkey} = route.params
+  route,
+}: NativeStackScreenProps<CommonNavigatorParams, 'StarterPackLanding'>) {
+  const {name, rkey} = route.params
   const navigation = useNavigation<NavigationProp>()
   const {currentAccount} = useSession()
   const setMinimalShellMode = useSetMinimalShellMode()
 
-  // const {
+  const {
-  //   data: did,
+    data: did,
-  //   isLoading: isLoadingDid,
+    isLoading: isLoadingDid,
-  //   isError: isErrorDid,
+    isError: isErrorDid,
-  // } = useResolveDidQuery(name)
+  } = useResolveDidQuery(name)
-  // const {
+  const {
-  //   data: starterPack,
+    data: starterPack,
-  //   isLoading: isLoadingStarterPack,
+    isLoading: isLoadingStarterPack,
-  //   isError: isErrorStarterPack,
+    isError: isErrorStarterPack,
-  // } = useStarterPackQuery({did, rkey})
+  } = useStarterPackQuery({did, rkey})
 
   React.useEffect(() => {
-    if (currentAccount) {
+    // if (currentAccount) {
-      navigation.navigate('Home')
+    //   navigation.navigate('Home')
-      return
+    //   return
-    }
+    // }
 
     setMinimalShellMode(true)
     return () => {
@@ -148,16 +154,16 @@ export function LandingScreen({}) {
     }
   }, [currentAccount, navigation, setMinimalShellMode])
 
-  // if (!did || !starterPack) {
+  if (!did || !starterPack) {
-  //   return (
+    return (
-  //     <ListMaybePlaceholder
+      <ListMaybePlaceholder
-  //       isLoading={isLoadingDid || isLoadingStarterPack}
+        isLoading={isLoadingDid || isLoadingStarterPack}
-  //       isError={isErrorDid || isErrorStarterPack}
+        isError={isErrorDid || isErrorStarterPack}
-  //     />
+      />
-  //   )
+    )
-  // }
+  }
 
-  return <LandingScreenInner starterPack={mockSP} />
+  return <LandingScreenInner starterPack={starterPack} />
 }
 
 function LandingScreenInner({
@@ -234,20 +240,24 @@ function LandingScreenInner({
               {record.description}
             </Text>
             <Divider />
-            <>
+            <Text />
+            {starterPack.feeds?.length && (
               <View
                 style={[
                   t.atoms.bg_contrast_25,
                   a.rounded_sm,
                   {pointerEvents: 'none'},
                 ]}>
-                <FeedSourceCard
+                {starterPack.feeds?.map(feed => (
-                  feedUri="at://did:plc:jfhpnnst6flqway4eaeqzj2a/app.bsky.feed.generator/for-science"
+                  <FeedSourceCard key={feed.uri} feedUri={feed.uri} />
-                  hideTopBorder={true}
+                ))}
-                />
+                {/*<FeedSourceCard*/}
-                <FeedSourceCard feedUri="at://did:plc:upmfcx5muayjhkg5sltj625o/app.bsky.feed.generator/aaachrckxlsh2" />
+                {/*  feedUri="at://did:plc:jfhpnnst6flqway4eaeqzj2a/app.bsky.feed.generator/for-science"*/}
+                {/*  hideTopBorder={true}*/}
+                {/*/>*/}
+                {/*<FeedSourceCard feedUri="at://did:plc:upmfcx5muayjhkg5sltj625o/app.bsky.feed.generator/aaachrckxlsh2" />*/}
               </View>
-            </>
+            )}
 
             {sampleProfiles?.length && (
               <>

src/screens/StarterPack/Main/FeedsList.tsx

@@ -1,5 +1,6 @@
 import React, {useCallback} from 'react'
 import {View} from 'react-native'
+import {AppBskyFeedDefs} from '@atproto/api'
 
 import {useBottomBarOffset} from 'lib/hooks/useBottomBarOffset'
 import {isNative} from 'platform/detection'
@@ -7,16 +8,16 @@ import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard'
 import {List, ListRef} from 'view/com/util/List'
 import {SectionRef} from '#/screens/Profile/Sections/types'
 
-function renderItem({item}: {item: string}) {
+function renderItem({item}: {item: AppBskyFeedDefs.GeneratorView}) {
-  return <FeedSourceCard feedUri={item} />
+  return <FeedSourceCard feedUri={item.uri} />
 }
 
-function keyExtractor(item: string) {
+function keyExtractor(item: AppBskyFeedDefs.GeneratorView) {
-  return item
+  return item.uri
 }
 
 interface ProfilesListProps {
-  feeds: string[]
+  feeds: AppBskyFeedDefs.GeneratorView[]
   headerHeight: number
   scrollElRef: ListRef
 }

src/screens/StarterPack/Wizard/StepFeeds.tsx

@@ -26,9 +26,38 @@ export function StepFeeds() {
   const [query, setQuery] = useState('')
 
   const {data: popularFeedsPages, fetchNextPage} = useGetPopularFeedsQuery(30)
+  // const popularFeeds =
+  //   popularFeedsPages?.pages.flatMap(page => page.feeds) || []
 
-  const popularFeeds =
+  const popularFeeds = [
-    popularFeedsPages?.pages.flatMap(page => page.feeds) || []
+    {
+      uri: 'at://did:plc:6262fucmqlkgz23yaslhuuq6/app.bsky.feed.generator/alice-favs',
+      cid: 'bafyreidgvy4vlvvhx3lhpyej2qido3m5sk2l5643bhbmqtgfuxwz53xqlm',
+      did: 'did:plc:epfqsozl6rso6ebd6mkfyzpl',
+      creator: {
+        did: 'did:plc:vyhhvdf4xw5nziakfxxsynwk',
+        handle: 'alice.test',
+        displayName: 'Alice',
+        viewer: {
+          muted: false,
+          blockedBy: false,
+        },
+        labels: [],
+        description: 'Test user 1',
+        indexedAt: '2024-06-10T17:37:36.662Z',
+      },
+      displayName: 'alices feed',
+      description: 'all my fav stuff',
+      avatar:
+        'http://localhost:2584/img/avatar/plain/did:plc:vyhhvdf4xw5nziakfxxsynwk/bafkreihem6nzbu462kcx5cqnrkonpq75fe5dlbhgnzcmuvvhqk7s5vcq3u@jpeg',
+      likeCount: 3,
+      labels: [],
+      viewer: {
+        like: 'at://did:plc:vyhhvdf4xw5nziakfxxsynwk/app.bsky.feed.like/3kulmhjxuoc2g',
+      },
+      indexedAt: '2022-07-15T00:51:16.914Z',
+    },
+  ]
 
   const {
     data: searchedFeeds,