rework state

src/components/hooks/useStarterPackEntry.android.ts

@@ -1,16 +1,14 @@
 import React from 'react'
 
 import {makeStarterPackLink} from 'lib/routes/links'
-import {
+import {useSetCurrentStarterPack} from 'state/preferences/starter-pack'
-  useSetUsedStarterPack,
+import {useUsedStarterPacks} from 'state/preferences/used-starter-packs'
-  useUsedStarterPack,
-} from 'state/preferences/starter-pack'
 import GooglePlayReferrer from '../../../modules/expo-google-play-referrer'
 
 export function useStarterPackEntry() {
   const [ready, setReady] = React.useState(false)
-  const usedStarterPack = useUsedStarterPack()
+  const setCurrentStarterPack = useSetCurrentStarterPack()
-  const setUsedStarterPack = useSetUsedStarterPack()
+  const usedStarterPacks = useUsedStarterPacks()
 
   React.useEffect(() => {
     if (ready) return
@@ -32,8 +30,8 @@ export function useStarterPackEntry() {
           // We won't actually set `lastUsedUri` until a _successful_ use of the starter pack, meaning a new account
           // has actually completed onboarding with the given starter pack.
           const uri = makeStarterPackLink(sourceParts[1], sourceParts[2])
-          if (uri !== usedStarterPack?.lastUsedUri) {
+          if (!usedStarterPacks?.includes(uri)) {
-            setUsedStarterPack({
+            setCurrentStarterPack({
               uri: makeStarterPackLink(sourceParts[1], sourceParts[2]),
             })
           }
@@ -41,7 +39,7 @@ export function useStarterPackEntry() {
       }
       setReady(true)
     })()
-  }, [ready, setUsedStarterPack, usedStarterPack?.lastUsedUri])
+  }, [ready, setCurrentStarterPack, usedStarterPacks])
 
   return ready
 }

src/components/hooks/useStarterPackEntry.ts

@@ -1,9 +1,9 @@
 import React from 'react'
 
-import {useSetUsedStarterPack} from 'state/preferences/starter-pack'
+import {useSetCurrentStarterPack} from 'state/preferences/starter-pack'
 
 export function useStarterPackEntry() {
-  const setUsedStarterPack = useSetUsedStarterPack()
+  const setCurrentStarterPack = useSetCurrentStarterPack()
 
   React.useEffect(() => {
     const url = new URL(window.location.href)
@@ -12,13 +12,13 @@ export function useStarterPackEntry() {
       const isClip = url.searchParams.get('clip') === 'true'
 
       if (name && rkey) {
-        setUsedStarterPack({
+        setCurrentStarterPack({
           uri: window.location.href,
           isClip,
         })
       }
     }
-  }, [setUsedStarterPack])
+  }, [setCurrentStarterPack])
 
   return true
 }

src/screens/Onboarding/StepFinished.tsx

@@ -15,10 +15,12 @@ import {useAgent} from '#/state/session'
 import {useOnboardingDispatch} from '#/state/shell'
 import {uploadBlob} from 'lib/api'
 import {useRequestNotificationsPermission} from 'lib/notifications/notifications'
+import {makeStarterPackLink} from 'lib/routes/links'
 import {
-  useSetUsedStarterPack,
+  useCurrentStarterPack,
-  useUsedStarterPack,
+  useSetCurrentStarterPack,
 } from 'state/preferences/starter-pack'
+import {useAddUsedStarterPack} from 'state/preferences/used-starter-packs'
 import {
   DescriptionText,
   OnboardingControls,
@@ -46,17 +48,18 @@ export function StepFinished() {
   const queryClient = useQueryClient()
   const agent = useAgent()
   const requestNotificationsPermission = useRequestNotificationsPermission()
-  const usedStarterPack = useUsedStarterPack()
+  const currentStarterPack = useCurrentStarterPack()
-  const setUsedStarterPack = useSetUsedStarterPack()
+  const setCurrentStarterPack = useSetCurrentStarterPack()
+  const addUsedStarterPack = useAddUsedStarterPack()
 
   const finishOnboarding = React.useCallback(async () => {
     setSaving(true)
     try {
       let starterPack: AppBskyGraphDefs.StarterPackView | undefined
       let listItems: AppBskyGraphDefs.ListItemView[] | undefined
-      if (usedStarterPack) {
+      if (currentStarterPack) {
         const spRes = await agent.app.bsky.graph.getStarterPack({
-          starterPack: usedStarterPack.uri,
+          starterPack: currentStarterPack.uri,
         })
         starterPack = spRes.data.starterPack
 
@@ -133,12 +136,12 @@ export function StepFinished() {
         requestNotificationsPermission('AfterOnboarding'),
       ])
 
-      if (usedStarterPack) {
+      if (currentStarterPack && starterPack) {
-        setUsedStarterPack({
+        setCurrentStarterPack({
-          ...usedStarterPack,
+          ...currentStarterPack,
           initialFeed: starterPack?.feeds?.[0].uri ?? 'following',
-          lastUsedUri: usedStarterPack.uri,
         })
+        addUsedStarterPack(makeStarterPackLink(starterPack))
       }
     } catch (e: any) {
       logger.info(`onboarding: bulk save failed`)
@@ -171,10 +174,11 @@ export function StepFinished() {
     dispatch,
     onboardDispatch,
     track,
-    usedStarterPack,
+    currentStarterPack,
     state,
     requestNotificationsPermission,
-    setUsedStarterPack,
+    setCurrentStarterPack,
+    addUsedStarterPack,
   ])
 
   React.useEffect(() => {

src/screens/StarterPack/StarterPackLandingScreen.tsx

@@ -1,15 +1,15 @@
 import React from 'react'
 import {Pressable, ScrollView, View} from 'react-native'
 import Animated, {FadeIn, FadeOut} from 'react-native-reanimated'
-import {AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api'
+import {AppBskyGraphDefs, AppBskyGraphStarterpack, AtUri} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {isAndroidWeb} from 'lib/browser'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {
-  useSetUsedStarterPack,
+  useCurrentStarterPack,
-  useUsedStarterPack,
+  useSetCurrentStarterPack,
 } from 'state/preferences/starter-pack'
 import {useResolveDidQuery} from 'state/queries/resolve-uri'
 import {useStarterPackQuery} from 'state/queries/useStarterPackQuery'
@@ -40,11 +40,15 @@ function postAppClipMessage(message: AppClipMessage) {
 }
 
 function parseStarterPackHttpUri(uri: string): {name?: string; rkey?: string} {
-  const parsed = new URL(uri)
+  try {
-  const [_, _path, name, rkey] = parsed.pathname.split('/')
+    const parsed = new URL(uri)
-  return {
+    const [_, _path, name, rkey] = parsed.pathname.split('/')
-    name,
+    return {
-    rkey,
+      name,
+      rkey,
+    }
+  } catch (e) {
+    return {}
   }
 }
 
@@ -57,8 +61,9 @@ export function LandingScreen({
 }: {
   setScreenState: (state: LoggedOutScreenState) => void
 }) {
-  const usedStarterPack = useUsedStarterPack()
+  const currentStarterPack = useCurrentStarterPack()
-  const {name, rkey} = parseStarterPackHttpUri(usedStarterPack?.uri || '')
+  const {name, rkey} =
+    parseStarterPackHttpUri(currentStarterPack?.uri || '') ?? {}
 
   const {
     data: did,
@@ -108,8 +113,8 @@ function LandingScreenInner({
   const {record, creator, listItemsSample, feeds, joinedWeekCount} = starterPack
   const {_} = useLingui()
   const t = useTheme()
-  const setUsedStarterPack = useSetUsedStarterPack()
+  const currentStarterPack = useCurrentStarterPack()
-  const usedStarterPack = useUsedStarterPack()
+  const setCurrentStarterPack = useSetCurrentStarterPack()
   const {isTabletOrDesktop} = useWebMediaQueries()
   const androidDialogControl = useDialogControl()
 
@@ -119,14 +124,14 @@ function LandingScreenInner({
   const listItemsCount = starterPack.list?.listItemCount ?? 0
 
   const onContinue = () => {
-    setUsedStarterPack({
+    setCurrentStarterPack({
       uri: starterPack.uri,
     })
     setScreenState(LoggedOutScreenState.S_CreateAccount)
   }
 
   const onJoinPress = () => {
-    if (usedStarterPack?.isClip) {
+    if (currentStarterPack?.isClip) {
       setAppClipOverlayVisible(true)
       postAppClipMessage({
         action: 'present',
@@ -156,7 +161,7 @@ function LandingScreenInner({
               borderBottomLeftRadius: 10,
               borderBottomRightRadius: 10,
             },
-            usedStarterPack?.isClip && {
+            currentStarterPack?.isClip && {
               paddingTop: 100,
             },
           ]}>
@@ -210,7 +215,7 @@ function LandingScreenInner({
             {starterPack.feeds?.length ? (
               <View style={[a.gap_md]}>
                 <Text style={[a.font_bold, a.text_lg]}>
-                  Join Bluesky and subscribe to these feeds
+                  These great feeds will be available after signing up!
                 </Text>
 
                 <View
@@ -240,24 +245,23 @@ function LandingScreenInner({
                   {feeds?.length ? (
                     <>
                       {listItemsCount <= 8 ? (
-                        <Trans>Also follow these people right away!</Trans>
+                        <Trans>
+                          You'll also follow these people right away!
+                        </Trans>
                       ) : (
                         <Trans>
-                          Also follow these people and {listItemsCount - 8}{' '}
+                          You'll also follow these people and{' '}
-                          others!
+                          {listItemsCount - 8} others!
                         </Trans>
                       )}
                     </>
                   ) : (
                     <>
                       {listItemsCount <= 8 ? (
-                        <Trans>
+                        <Trans>You'll follow these people right away!</Trans>
-                          Get started by following these people right away!
-                        </Trans>
                       ) : (
                         <Trans>
-                          Get started by following these people and{' '}
+                          You'll follow these people and {listItemsCount - 8}
-                          {listItemsCount - 8}
                           others!
                         </Trans>
                       )}
@@ -289,24 +293,31 @@ function LandingScreenInner({
         setIsVisible={setAppClipOverlayVisible}
       />
       <Prompt.Outer control={androidDialogControl}>
-        <Prompt.TitleText />
+        <Prompt.TitleText>
-        <Prompt.DescriptionText />
+          <Trans>Download Bluesky</Trans>
+        </Prompt.TitleText>
+        <Prompt.DescriptionText>
+          <Trans>
+            The experience is better in the app. Download Bluesky now and we'll
+            pick back up where you left off.
+          </Trans>
+        </Prompt.DescriptionText>
         <Prompt.Actions>
-          <Prompt.Action
-            cta="Continue on web"
-            color="secondary"
-            onPress={onContinue}
-          />
           <Prompt.Action
             cta="Download on Google Play"
             color="primary"
             onPress={() => {
-              const rkey = parseStarterPackHttpUri(starterPack.uri).rkey
+              const rkey = new AtUri(starterPack.uri).rkey
               if (!rkey) return
 
               window.location.href = createGooglePlayLink(creator.handle, rkey)
             }}
           />
+          <Prompt.Action
+            cta="Continue on web"
+            color="secondary"
+            onPress={onContinue}
+          />
         </Prompt.Actions>
       </Prompt.Outer>
     </CenteredView>

src/screens/StarterPack/StarterPackScreen.tsx

@@ -12,7 +12,7 @@ import {CommonNavigatorParams, NavigationProp} from 'lib/routes/types'
 import {shareUrl} from 'lib/sharing'
 import {logEvent} from 'lib/statsig/statsig'
 import {isWeb} from 'platform/detection'
-import {useSetUsedStarterPack} from 'state/preferences/starter-pack'
+import {useSetCurrentStarterPack} from 'state/preferences/starter-pack'
 import {RQKEY} from 'state/queries/list-members'
 import {useResolveDidQuery} from 'state/queries/resolve-uri'
 import {useStarterPackQuery} from 'state/queries/useStarterPackQuery'
@@ -128,7 +128,7 @@ function Header({
   const agent = useAgent()
   const queryClient = useQueryClient()
   const qrCodeDialogControl = useDialogControl()
-  const setUsedStarterPack = useSetUsedStarterPack()
+  const setCurrentStarterPack = useSetCurrentStarterPack()
   const {setShowLoggedOut} = useLoggedOutViewControls()
 
   const [isProcessing, setIsProcessing] = React.useState(false)
@@ -190,7 +190,7 @@ function Header({
               color="secondary"
               size="small"
               onPress={() => {
-                setUsedStarterPack({uri: starterPack.uri})
+                setCurrentStarterPack({uri: starterPack.uri})
                 setShowLoggedOut(true)
               }}>
               <ButtonText>

src/state/persisted/schema.ts

@@ -88,14 +88,14 @@ export const schema = z.object({
   disableHaptics: z.boolean().optional(),
   disableAutoplay: z.boolean().optional(),
   kawaii: z.boolean().optional(),
-  usedStarterPack: z
+  currentStarterPack: z
     .object({
       uri: z.string(),
       initialFeed: z.string().optional(),
       isClip: z.boolean().optional(),
-      lastUsedUri: z.string().optional(),
     })
     .optional(),
+  usedStarterPacks: z.array(z.string()).optional(),
 })
 export type Schema = z.infer<typeof schema>
 
@@ -134,5 +134,6 @@ export const defaults: Schema = {
   disableHaptics: false,
   disableAutoplay: prefersReducedMotion,
   kawaii: false,
-  usedStarterPack: undefined,
+  currentStarterPack: undefined,
+  usedStarterPacks: [],
 }

src/state/preferences/starter-pack.tsx

@@ -5,9 +5,9 @@ import * as persisted from '#/state/persisted'
 type StateContext =
   | {
       uri: string
+      cid?: string
       initialFeed?: string
       isClip?: boolean
-      lastUsedUri?: string
     }
   | undefined
 type SetContext = (v: StateContext) => void
@@ -20,12 +20,12 @@ export function Provider({children}: {children: React.ReactNode}) {
 
   const setStateWrapped = (v: StateContext) => {
     setState(v)
-    persisted.write('usedStarterPack', v)
+    persisted.write('currentStarterPack', v)
   }
 
   React.useEffect(() => {
     return persisted.onUpdate(() => {
-      setState(persisted.get('usedStarterPack'))
+      setState(persisted.get('currentStarterPack'))
     })
   }, [])
 
@@ -38,5 +38,5 @@ export function Provider({children}: {children: React.ReactNode}) {
   )
 }
 
-export const useUsedStarterPack = () => React.useContext(stateContext)
+export const useCurrentStarterPack = () => React.useContext(stateContext)
-export const useSetUsedStarterPack = () => React.useContext(setContext)
+export const useSetCurrentStarterPack = () => React.useContext(setContext)

src/state/preferences/used-starter-packs.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import * as persisted from '#/state/persisted'
+
+type StateContext = string[] | undefined
+type SetContext = (v: string) => void
+
+const stateContext = React.createContext<StateContext>([])
+const setContext = React.createContext<SetContext>((_: string) => {})
+
+export function Provider({children}: {children: React.ReactNode}) {
+  const [state, setState] = React.useState<StateContext>()
+
+  const setStateWrapped = (v: StateContext) => {
+    persisted.write('usedStarterPacks', [...state, v])
+    setState(prev => [...prev, v])
+  }
+
+  React.useEffect(() => {
+    return persisted.onUpdate(() => {
+      setState(persisted.get('usedStarterPack'))
+    })
+  }, [])
+
+  return (
+    <stateContext.Provider value={state}>
+      <setContext.Provider value={setStateWrapped}>
+        {children}
+      </setContext.Provider>
+    </stateContext.Provider>
+  )
+}
+
+export const useUsedStarterPacks = () => React.useContext(stateContext)
+export const useAddUsedStarterPack = () => React.useContext(setContext)

src/view/screens/Home.tsx

@@ -23,8 +23,8 @@ import {useOTAUpdates} from 'lib/hooks/useOTAUpdates'
 import {useRequestNotificationsPermission} from 'lib/notifications/notifications'
 import {HomeTabNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
 import {
-  useSetUsedStarterPack,
+  useCurrentStarterPack,
-  useUsedStarterPack,
+  useSetCurrentStarterPack,
 } from 'state/preferences/starter-pack'
 import {useLoggedOutViewControls} from 'state/shell/logged-out'
 import {FeedPage} from 'view/com/feeds/FeedPage'
@@ -40,15 +40,19 @@ export function HomeScreen(props: Props) {
   const {data: preferences} = usePreferencesQuery()
   const {data: pinnedFeedInfos, isLoading: isPinnedFeedsLoading} =
     usePinnedFeedsInfos()
-  const usedStarterPack = useUsedStarterPack()
+  const currentStarterPack = useCurrentStarterPack()
   const {setShowLoggedOut, requestSwitchToAccount} = useLoggedOutViewControls()
 
   React.useEffect(() => {
-    if (usedStarterPack && !usedStarterPack.initialFeed) {
+    if (!currentStarterPack?.initialFeed) {
       setShowLoggedOut(true)
       requestSwitchToAccount({requestedAccount: 'starterpack'})
     }
-  }, [usedStarterPack, setShowLoggedOut, requestSwitchToAccount])
+  }, [
+    setShowLoggedOut,
+    requestSwitchToAccount,
+    currentStarterPack?.initialFeed,
+  ])
 
   if (preferences && pinnedFeedInfos && !isPinnedFeedsLoading) {
     return (
@@ -84,8 +88,8 @@ function HomeScreenReady({
   const selectedIndex = Math.max(0, maybeFoundIndex)
   const selectedFeed = allFeeds[selectedIndex]
   const requestNotificationsPermission = useRequestNotificationsPermission()
-  const usedStarterPack = useUsedStarterPack()
+  const currentStarterPack = useCurrentStarterPack()
-  const setUsedStarterPack = useSetUsedStarterPack()
+  const setCurrentStarterPack = useSetCurrentStarterPack()
 
   useSetTitle(pinnedFeedInfos[selectedIndex]?.displayName)
   useOTAUpdates()
@@ -98,21 +102,18 @@ function HomeScreenReady({
   const lastPagerReportedIndexRef = React.useRef(selectedIndex)
   React.useLayoutEffect(() => {
     let initialIndex = selectedIndex
-    if (usedStarterPack?.initialFeed) {
+    if (currentStarterPack?.initialFeed) {
-      if (usedStarterPack.initialFeed === 'following') {
+      if (currentStarterPack.initialFeed === 'following') {
         initialIndex = allFeeds.findIndex(f => f === 'following')
       } else {
         initialIndex = allFeeds.findIndex(
-          f => f === `feedgen|${usedStarterPack.initialFeed}`,
+          f => f === `feedgen|${currentStarterPack.initialFeed}`,
         )
       }
       if (initialIndex === -1) {
         initialIndex = 0
       }
-      setUsedStarterPack({
+      setCurrentStarterPack(undefined)
-        ...usedStarterPack,
-        initialFeed: undefined,
-      })
     }
 
     // Since the pager is not a controlled component, adjust it imperatively
@@ -125,7 +126,12 @@ function HomeScreenReady({
       lastPagerReportedIndexRef.current = selectedIndex
       pagerRef.current?.setPage(selectedIndex, 'desktop-sidebar-click')
     }
-  }, [selectedIndex, usedStarterPack, setUsedStarterPack, allFeeds])
+  }, [
+    selectedIndex,
+    allFeeds,
+    currentStarterPack?.initialFeed,
+    setCurrentStarterPack,
+  ])
 
   const {hasSession} = useSession()
   const setMinimalShellMode = useSetMinimalShellMode()