tweaks

src/components/StarterPack/NewskieDialog.tsx

@@ -5,6 +5,7 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {HITSLOP_10} from 'lib/constants'
+import {ago} from 'lib/strings/time'
 import {isNative} from 'platform/detection'
 import {useSession} from 'state/session'
 import {atoms as a} from '#/alf'
@@ -14,93 +15,6 @@ import {Newskie} from '#/components/icons/Newskie'
 import {StarterPackCard} from '#/components/StarterPack/StarterPackCard'
 import {Text} from '#/components/Typography'
 
-const mockSP = {
-  uri: 'at://did:plc:t5nrviyjxkdhd5ymyra772dm/app.bsky.graph.starterpack/3kuec35ms422t',
-  cid: 'bafyreigrvmj3qd4urr5q6lqku7uzj4xmazepik6oobuxtvunx3g7d6e6xi',
-  record: {
-    list: 'at://did:plc:t5nrviyjxkdhd5ymyra772dm/app.bsky.graph.list/3kuec35kvkj2t',
-    name: 'Test 123',
-    $type: 'app.bsky.graph.starterpack',
-    feeds: [],
-    createdAt: '2024-06-07T19:43:07.211Z',
-    description: 'Test123',
-    descriptionFacets: [],
-  },
-  creator: {
-    did: 'did:plc:t5nrviyjxkdhd5ymyra772dm',
-    handle: 'alice.test',
-    displayName: 'Alice',
-    associated: {
-      chat: {
-        allowIncoming: 'following',
-      },
-    },
-    viewer: {
-      muted: false,
-      blockedBy: false,
-    },
-    labels: [],
-  },
-  feedCount: 0,
-  joinedAllTimeCount: 0,
-  joinedWeekCount: 0,
-  listItemCount: 2,
-  labels: [],
-  indexedAt: '2024-06-07T19:43:07.211Z',
-  feeds: [],
-  list: {
-    uri: 'at://did:plc:t5nrviyjxkdhd5ymyra772dm/app.bsky.graph.list/3kuec35kvkj2t',
-    cid: 'bafyreibnigtususbzhjzadhsqconcf7s5wan6dl7h6s56jhxd6ebfvflrq',
-    name: 'Test 123',
-    purpose: 'app.bsky.graph.defs#referencelist',
-    indexedAt: '2024-06-07T19:43:07.122Z',
-    labels: [],
-    viewer: {
-      muted: false,
-    },
-  },
-  listItemsSample: [
-    {
-      uri: 'at://did:plc:t5nrviyjxkdhd5ymyra772dm/app.bsky.graph.listitem/3kuec35m2o22t',
-      subject: {
-        did: 'did:plc:5warwwnoavxfhchjhcjlqyqi',
-        handle: 'bob.test',
-        displayName: 'Bob',
-        viewer: {
-          muted: false,
-          blockedBy: false,
-          following:
-            'at://did:plc:t5nrviyjxkdhd5ymyra772dm/app.bsky.graph.follow/3kudwno6ck22t',
-          followedBy:
-            'at://did:plc:5warwwnoavxfhchjhcjlqyqi/app.bsky.graph.follow/3kudwno6nbs2t',
-        },
-        labels: [],
-        description: 'Test user 2',
-        indexedAt: '2024-06-07T16:18:43.414Z',
-      },
-    },
-    {
-      uri: 'at://did:plc:t5nrviyjxkdhd5ymyra772dm/app.bsky.graph.listitem/3kuec35m2nz2t',
-      subject: {
-        did: 'did:plc:cvdwnci2mr5srh4slty7lndz',
-        handle: 'carla.test',
-        displayName: 'Carla',
-        viewer: {
-          muted: false,
-          blockedBy: false,
-          following:
-            'at://did:plc:t5nrviyjxkdhd5ymyra772dm/app.bsky.graph.follow/3kudwno6hgc2t',
-          followedBy:
-            'at://did:plc:cvdwnci2mr5srh4slty7lndz/app.bsky.graph.follow/3kudwno6x2c2t',
-        },
-        labels: [],
-        description: 'Test user 3',
-        indexedAt: '2024-06-07T16:18:43.462Z',
-      },
-    },
-  ],
-}
-
 export function NewskieDialog({
   profile,
 }: {
@@ -110,7 +24,7 @@ export function NewskieDialog({
   const control = useDialogControl()
 
   const profileName = profile.displayName || `@${profile.handle}`
-  // const joinedVia = profile.joinedViaStarterPack
+  const joinedVia = profile.joinedViaStarterPack
   const {currentAccount} = useSession()
 
   return (
@@ -134,20 +48,22 @@ export function NewskieDialog({
               <Trans>{profileName} is new here!</Trans>
             </Text>
             <Text style={[a.text_md]}>
-              {AppBskyGraphStarterpack.isRecord(mockSP.record) ? (
+              {AppBskyGraphStarterpack.isRecord(joinedVia?.record) &&
+              profile.createdAt ? (
                 <Trans>
-                  {profileName} joined Bluesky 3 days ago with{' '}
+                  {profileName} joined Bluesky {ago(profile.createdAt, true)}{' '}
-                  {mockSP?.creator.did === currentAccount?.did
+                  ago with{' '}
+                  {joinedVia?.creator.did === currentAccount?.did
                     ? 'your'
-                    : `${mockSP?.creator.displayName}'s` ||
+                    : `${joinedVia?.creator.displayName}'s` ||
-                      `@${mockSP?.creator.handle}'s`}{' '}
+                      `@${joinedVia?.creator.handle}'s`}{' '}
                   starter pack.
                 </Trans>
               ) : (
                 <Trans>{profileName} recently joined Bluesky 3 days ago</Trans>
               )}
             </Text>
-            <StarterPackCard starterPack={mockSP} type="dialog" />
+            <StarterPackCard starterPack={joinedVia} type="dialog" />
           </View>
         </Dialog.ScrollableInner>
       </Dialog.Outer>

src/screens/Onboarding/StepFinished.tsx

@@ -3,6 +3,12 @@ import {View} from 'react-native'
 import {AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {
+  CommonActions,
+  StackActions,
+  useNavigation,
+  useNavigationContainerRef,
+} from '@react-navigation/native'
 import {useQueryClient} from '@tanstack/react-query'
 
 import {useAnalytics} from '#/lib/analytics/analytics'
@@ -15,6 +21,7 @@ import {useAgent} from '#/state/session'
 import {useOnboardingDispatch} from '#/state/shell'
 import {uploadBlob} from 'lib/api'
 import {useRequestNotificationsPermission} from 'lib/notifications/notifications'
+import {NavigationProp} from 'lib/routes/types'
 import {
   useSetUsedStarterPack,
   useUsedStarterPack,
@@ -165,15 +172,15 @@ export function StepFinished() {
     track('OnboardingV2:Complete')
     logEvent('onboarding:finished:nextPressed', {})
   }, [
-    state,
     queryClient,
     agent,
-    setUsedStarterPack,
     dispatch,
     onboardDispatch,
     track,
-    requestNotificationsPermission,
     usedStarterPack,
+    state,
+    requestNotificationsPermission,
+    setUsedStarterPack,
   ])
 
   React.useEffect(() => {

src/screens/StarterPack/Landing/index.tsx

@@ -171,6 +171,7 @@ function LandingScreenInner({
 }: {
   starterPack: AppBskyGraphDefs.StarterPackView
 }) {
+  const navigation = useNavigation<NavigationProp>()
   const {record, creator, listItemsSample, feeds, joinedWeekCount} = starterPack
   const {_} = useLingui()
   const t = useTheme()
@@ -199,7 +200,12 @@ function LandingScreenInner({
         contentContainerStyle={{paddingBottom: 100}}>
         <LinearGradient
           colors={gradient}
-          style={[a.align_center, a.gap_sm, a.py_2xl]}>
+          style={[
+            a.align_center,
+            a.gap_sm,
+            a.py_2xl,
+            {borderBottomLeftRadius: 10, borderBottomRightRadius: 10},
+          ]}>
           <View style={[a.flex_row, a.gap_md, a.pb_sm]}>
             <Logo width={76} fill="white" />
           </View>
@@ -213,12 +219,12 @@ function LandingScreenInner({
           </View>
         </LinearGradient>
         <View style={[a.gap_md, a.mt_lg, a.mx_lg]}>
-          {!!joinedWeekCount && joinedWeekCount >= 50 && (
+          {/*{!!joinedWeekCount && joinedWeekCount >= -1 && (*/}
-            <Text
+          <Text
-              style={[a.text_md, a.text_center, t.atoms.text_contrast_medium]}>
+            style={[a.text_md, a.text_center, t.atoms.text_contrast_medium]}>
-              {joinedWeekCount} joined this week!
+            180 joined this week!
-            </Text>
+          </Text>
-          )}
+          {/*)}*/}
           <Button
             label={_(msg`Join Bluesky now`)}
             onPress={() => {
@@ -235,34 +241,42 @@ function LandingScreenInner({
               <Trans>Join Bluesky now</Trans>
             </ButtonText>
           </Button>
-          <View style={[a.gap_xl, a.mt_md]}>
+          <View style={[a.gap_3xl, a.mt_md]}>
             <Text style={[a.text_md, t.atoms.text_contrast_medium]}>
               {record.description}
             </Text>
             <Divider />
-            <Text />
+            {Boolean(starterPack.feeds?.length) && (
-            {starterPack.feeds?.length && (
+              <View style={[a.gap_md]}>
-              <View
+                <Text style={[a.font_bold, a.text_lg]}>
-                style={[
+                  Join Bluesky now to subscribe to these feeds
-                  t.atoms.bg_contrast_25,
+                </Text>
-                  a.rounded_sm,
+
-                  {pointerEvents: 'none'},
+                <View
-                ]}>
+                  style={[
-                {starterPack.feeds?.map(feed => (
+                    t.atoms.bg_contrast_25,
-                  <FeedSourceCard key={feed.uri} feedUri={feed.uri} />
+                    a.rounded_sm,
-                ))}
+                    {pointerEvents: 'none'},
-                {/*<FeedSourceCard*/}
+                  ]}>
-                {/*  feedUri="at://did:plc:jfhpnnst6flqway4eaeqzj2a/app.bsky.feed.generator/for-science"*/}
+                  {starterPack.feeds?.map((feed, index) => (
-                {/*  hideTopBorder={true}*/}
+                    <FeedSourceCard
-                {/*/>*/}
+                      key={feed.uri}
-                {/*<FeedSourceCard feedUri="at://did:plc:upmfcx5muayjhkg5sltj625o/app.bsky.feed.generator/aaachrckxlsh2" />*/}
+                      feedUri={feed.uri}
+                      hideTopBorder={index === 0}
+                    />
+                  ))}
+                  {/*<FeedSourceCard*/}
+                  {/*  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>
               </View>
             )}
 
             {sampleProfiles?.length && (
-              <>
+              <View style={[a.gap_md]}>
-                <Text
+                <Text style={[a.font_bold, a.text_lg]}>
-                  style={[a.mt_sm, a.text_md, t.atoms.text_contrast_medium]}>
                   {feeds?.length ? (
                     <Trans>
                       You'll also follow these people and many others!
@@ -288,7 +302,7 @@ function LandingScreenInner({
                     <ProfilesSet profiles={userSets.second} />
                   )}
                 </View>
-              </>
+              </View>
             )}
           </View>
         </View>

src/screens/StarterPack/Main/index.tsx

@@ -135,7 +135,7 @@ function Header({
                 <Pressable
                   style={[
                     a.px_lg,
-                    a.py_xs,
+                    a.py_sm,
                     a.align_center,
                     a.justify_center,
                     a.rounded_sm,

src/screens/StarterPack/Wizard/StepFeeds.tsx

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