Move invite-state to new persistence + context and replace the notifications with just showing uses in the modal (#1840)

src/App.native.tsx

···
 import {TestCtrls} from 'view/com/testing/TestCtrls'
 import {Provider as ShellStateProvider} from 'state/shell'
 import {Provider as MutedThreadsProvider} from 'state/muted-threads'
+import {Provider as InvitesStateProvider} from 'state/invites'
 
 SplashScreen.preventAutoHideAsync()
 
···
   return (
     <ShellStateProvider>
       <MutedThreadsProvider>
-        <InnerApp />
+        <InvitesStateProvider>
+          <InnerApp />
+        </InvitesStateProvider>
       </MutedThreadsProvider>
     </ShellStateProvider>
   )

src/App.web.tsx

···
 import {queryClient} from 'lib/react-query'
 import {Provider as ShellStateProvider} from 'state/shell'
 import {Provider as MutedThreadsProvider} from 'state/muted-threads'
+import {Provider as InvitesStateProvider} from 'state/invites'
 
 const InnerApp = observer(function AppImpl() {
   const colorMode = useColorMode()
···
   return (
     <ShellStateProvider>
       <MutedThreadsProvider>
-        <InnerApp />
+        <InvitesStateProvider>
+          <InnerApp />
+        </InvitesStateProvider>
       </MutedThreadsProvider>
     </ShellStateProvider>
   )

src/state/invites.tsx

···
+import React from 'react'
+import * as persisted from '#/state/persisted'
+
+type StateContext = persisted.Schema['invites']
+type ApiContext = {
+  setInviteCopied: (code: string) => void
+}
+
+const stateContext = React.createContext<StateContext>(
+  persisted.defaults.invites,
+)
+const apiContext = React.createContext<ApiContext>({
+  setInviteCopied(_: string) {},
+})
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const [state, setState] = React.useState(persisted.get('invites'))
+
+  const api = React.useMemo(
+    () => ({
+      setInviteCopied(code: string) {
+        setState(state => {
+          state = {
+            ...state,
+            copiedInvites: state.copiedInvites.includes(code)
+              ? state.copiedInvites
+              : state.copiedInvites.concat([code]),
+          }
+          persisted.write('invites', state)
+          return state
+        })
+      },
+    }),
+    [setState],
+  )
+
+  React.useEffect(() => {
+    return persisted.onUpdate(() => {
+      setState(persisted.get('invites'))
+    })
+  }, [setState])
+
+  return (
+    <stateContext.Provider value={state}>
+      <apiContext.Provider value={api}>{children}</apiContext.Provider>
+    </stateContext.Provider>
+  )
+}
+
+export function useInvitesState() {
+  return React.useContext(stateContext)
+}
+
+export function useInvitesAPI() {
+  return React.useContext(apiContext)
+}

src/state/models/feeds/notifications.ts

···
   }
 
   get unreadCountLabel(): string {
-    const count = this.unreadCount + this.rootStore.invitedUsers.numNotifs
+    const count = this.unreadCount
     if (count >= MAX_VISIBLE_NOTIFS) {
       return `${MAX_VISIBLE_NOTIFS}+`
     }

src/state/models/invited-users.ts

···
-import {makeAutoObservable, runInAction} from 'mobx'
-import {ComAtprotoServerDefs, AppBskyActorDefs} from '@atproto/api'
-import {RootStoreModel} from './root-store'
-import {isObj, hasProp, isStrArray} from 'lib/type-guards'
-import {logger} from '#/logger'
-
-export class InvitedUsers {
-  copiedInvites: string[] = []
-  seenDids: string[] = []
-  profiles: AppBskyActorDefs.ProfileViewDetailed[] = []
-
-  get numNotifs() {
-    return this.profiles.length
-  }
-
-  constructor(public rootStore: RootStoreModel) {
-    makeAutoObservable(
-      this,
-      {rootStore: false, serialize: false, hydrate: false},
-      {autoBind: true},
-    )
-  }
-
-  serialize() {
-    return {seenDids: this.seenDids, copiedInvites: this.copiedInvites}
-  }
-
-  hydrate(v: unknown) {
-    if (isObj(v) && hasProp(v, 'seenDids') && isStrArray(v.seenDids)) {
-      this.seenDids = v.seenDids
-    }
-    if (
-      isObj(v) &&
-      hasProp(v, 'copiedInvites') &&
-      isStrArray(v.copiedInvites)
-    ) {
-      this.copiedInvites = v.copiedInvites
-    }
-  }
-
-  async fetch(invites: ComAtprotoServerDefs.InviteCode[]) {
-    // pull the dids of invited users not marked seen
-    const dids = []
-    for (const invite of invites) {
-      for (const use of invite.uses) {
-        if (!this.seenDids.includes(use.usedBy)) {
-          dids.push(use.usedBy)
-        }
-      }
-    }
-
-    // fetch their profiles
-    this.profiles = []
-    if (dids.length) {
-      try {
-        const res = await this.rootStore.agent.app.bsky.actor.getProfiles({
-          actors: dids,
-        })
-        runInAction(() => {
-          // save the ones following -- these are the ones we want to notify the user about
-          this.profiles = res.data.profiles.filter(
-            profile => !profile.viewer?.following,
-          )
-        })
-        this.rootStore.me.follows.hydrateMany(this.profiles)
-      } catch (e) {
-        logger.error('Failed to fetch profiles for invited users', {
-          error: e,
-        })
-      }
-    }
-  }
-
-  isInviteCopied(invite: string) {
-    return this.copiedInvites.includes(invite)
-  }
-
-  setInviteCopied(invite: string) {
-    if (!this.isInviteCopied(invite)) {
-      this.copiedInvites.push(invite)
-    }
-  }
-
-  markSeen(did: string) {
-    this.seenDids.push(did)
-    this.profiles = this.profiles.filter(profile => profile.did !== did)
-  }
-}

src/state/models/me.ts

···
           error: e,
         })
       }
-      await this.rootStore.invitedUsers.fetch(this.invites)
     }
   }
 

src/state/models/root-store.ts

···
 import {PostsCache} from './cache/posts'
 import {LinkMetasCache} from './cache/link-metas'
 import {MeModel} from './me'
-import {InvitedUsers} from './invited-users'
 import {PreferencesModel} from './ui/preferences'
 import {resetToTab} from '../../Navigation'
 import {ImageSizesCache} from './cache/image-sizes'
···
   shell = new ShellUiModel(this)
   preferences = new PreferencesModel(this)
   me = new MeModel(this)
-  invitedUsers = new InvitedUsers(this)
   handleResolutions = new HandleResolutionsCache()
   profiles = new ProfilesCache(this)
   posts = new PostsCache(this)
···
       session: this.session.serialize(),
       me: this.me.serialize(),
       preferences: this.preferences.serialize(),
-      invitedUsers: this.invitedUsers.serialize(),
     }
   }
 
···
       }
       if (hasProp(v, 'preferences')) {
         this.preferences.hydrate(v.preferences)
-      }
-      if (hasProp(v, 'invitedUsers')) {
-        this.invitedUsers.hydrate(v.invitedUsers)
       }
     }
   }

src/state/persisted/legacy.ts

···
       legacy.preferences.requireAltTextEnabled ||
       defaults.requireAltTextEnabled,
     mutedThreads: legacy.mutedThreads.uris || defaults.mutedThreads,
-    invitedUsers: {
-      seenDids: legacy.invitedUsers.seenDids || defaults.invitedUsers.seenDids,
+    invites: {
       copiedInvites:
-        legacy.invitedUsers.copiedInvites ||
-        defaults.invitedUsers.copiedInvites,
+        legacy.invitedUsers.copiedInvites || defaults.invites.copiedInvites,
     },
     onboarding: {
       step: legacy.onboarding.step || defaults.onboarding.step,

src/state/persisted/schema.ts

···
   }),
   requireAltTextEnabled: z.boolean(), // should move to server
   mutedThreads: z.array(z.string()), // should move to server
-  invitedUsers: z.object({
-    seenDids: z.array(z.string()),
+  invites: z.object({
     copiedInvites: z.array(z.string()),
   }),
   onboarding: z.object({
···
   },
   requireAltTextEnabled: false,
   mutedThreads: [],
-  invitedUsers: {
-    seenDids: [],
+  invites: {
     copiedInvites: [],
   },
   onboarding: {

src/view/com/modals/InviteCodes.tsx

···
 import React from 'react'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
+import {ComAtprotoServerDefs} from '@atproto/api'
 import {
   FontAwesomeIcon,
   FontAwesomeIconStyle,
···
 import {usePalette} from 'lib/hooks/usePalette'
 import {isWeb} from 'platform/detection'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {useInvitesState, useInvitesAPI} from '#/state/invites'
+import {UserInfoText} from '../util/UserInfoText'
+import {makeProfileLink} from '#/lib/routes/links'
+import {Link} from '../util/Link'
 
 export const snapPoints = ['70%']
 
···
           <InviteCode
             testID={`inviteCode-${i}`}
             key={invite.code}
-            code={invite.code}
+            invite={invite}
             used={invite.available - invite.uses.length <= 0 || invite.disabled}
           />
         ))}
···
 
 const InviteCode = observer(function InviteCodeImpl({
   testID,
-  code,
+  invite,
   used,
 }: {
   testID: string
-  code: string
+  invite: ComAtprotoServerDefs.InviteCode
   used?: boolean
 }) {
   const pal = usePalette('default')
   const store = useStores()
   const {invitesAvailable} = store.me
+  const invitesState = useInvitesState()
+  const {setInviteCopied} = useInvitesAPI()
 
   const onPress = React.useCallback(() => {
-    Clipboard.setString(code)
+    Clipboard.setString(invite.code)
     Toast.show('Copied to clipboard')
-    store.invitedUsers.setInviteCopied(code)
-  }, [store, code])
+    setInviteCopied(invite.code)
+  }, [setInviteCopied, invite])
 
   return (
-    <TouchableOpacity
-      testID={testID}
-      style={[styles.inviteCode, pal.border]}
-      onPress={onPress}
-      accessibilityRole="button"
-      accessibilityLabel={
-        invitesAvailable === 1
-          ? 'Invite codes: 1 available'
-          : `Invite codes: ${invitesAvailable} available`
-      }
-      accessibilityHint="Opens list of invite codes">
-      <Text
-        testID={`${testID}-code`}
-        type={used ? 'md' : 'md-bold'}
-        style={used ? [pal.textLight, styles.strikeThrough] : pal.text}>
-        {code}
-      </Text>
-      <View style={styles.flex1} />
-      {!used && store.invitedUsers.isInviteCopied(code) && (
-        <Text style={[pal.textLight, styles.codeCopied]}>Copied</Text>
-      )}
-      {!used && (
-        <FontAwesomeIcon
-          icon={['far', 'clone']}
-          style={pal.text as FontAwesomeIconStyle}
-        />
-      )}
-    </TouchableOpacity>
+    <View
+      style={[
+        pal.border,
+        {borderBottomWidth: 1, paddingHorizontal: 20, paddingVertical: 14},
+      ]}>
+      <TouchableOpacity
+        testID={testID}
+        style={[styles.inviteCode]}
+        onPress={onPress}
+        accessibilityRole="button"
+        accessibilityLabel={
+          invitesAvailable === 1
+            ? 'Invite codes: 1 available'
+            : `Invite codes: ${invitesAvailable} available`
+        }
+        accessibilityHint="Opens list of invite codes">
+        <Text
+          testID={`${testID}-code`}
+          type={used ? 'md' : 'md-bold'}
+          style={used ? [pal.textLight, styles.strikeThrough] : pal.text}>
+          {invite.code}
+        </Text>
+        <View style={styles.flex1} />
+        {!used && invitesState.copiedInvites.includes(invite.code) && (
+          <Text style={[pal.textLight, styles.codeCopied]}>Copied</Text>
+        )}
+        {!used && (
+          <FontAwesomeIcon
+            icon={['far', 'clone']}
+            style={pal.text as FontAwesomeIconStyle}
+          />
+        )}
+      </TouchableOpacity>
+      {invite.uses.length > 0 ? (
+        <View
+          style={{
+            flexDirection: 'column',
+            gap: 8,
+            paddingTop: 6,
+          }}>
+          <Text style={pal.text}>Used by:</Text>
+          {invite.uses.map(use => (
+            <Link
+              key={use.usedBy}
+              href={makeProfileLink({handle: use.usedBy, did: ''})}
+              style={{
+                flexDirection: 'row',
+              }}>
+              <Text style={pal.text}>• </Text>
+              <UserInfoText did={use.usedBy} style={pal.link} />
+            </Link>
+          ))}
+        </View>
+      ) : null}
+    </View>
   )
 })
 
···
   inviteCode: {
     flexDirection: 'row',
     alignItems: 'center',
-    borderBottomWidth: 1,
-    paddingHorizontal: 20,
-    paddingVertical: 14,
   },
   codeCopied: {
     marginRight: 8,

src/view/com/notifications/InvitedUsers.tsx

···
-import React from 'react'
-import {
-  FontAwesomeIcon,
-  FontAwesomeIconStyle,
-} from '@fortawesome/react-native-fontawesome'
-import {StyleSheet, View} from 'react-native'
-import {observer} from 'mobx-react-lite'
-import {AppBskyActorDefs} from '@atproto/api'
-import {UserAvatar} from '../util/UserAvatar'
-import {Text} from '../util/text/Text'
-import {Link, TextLink} from '../util/Link'
-import {Button} from '../util/forms/Button'
-import {FollowButton} from '../profile/FollowButton'
-import {CenteredView} from '../util/Views.web'
-import {useStores} from 'state/index'
-import {usePalette} from 'lib/hooks/usePalette'
-import {s} from 'lib/styles'
-import {sanitizeDisplayName} from 'lib/strings/display-names'
-import {makeProfileLink} from 'lib/routes/links'
-
-export const InvitedUsers = observer(function InvitedUsersImpl() {
-  const store = useStores()
-  return (
-    <CenteredView>
-      {store.invitedUsers.profiles.map(profile => (
-        <InvitedUser key={profile.did} profile={profile} />
-      ))}
-    </CenteredView>
-  )
-})
-
-function InvitedUser({
-  profile,
-}: {
-  profile: AppBskyActorDefs.ProfileViewDetailed
-}) {
-  const pal = usePalette('default')
-  const store = useStores()
-
-  const onPressDismiss = React.useCallback(() => {
-    store.invitedUsers.markSeen(profile.did)
-  }, [store, profile])
-
-  return (
-    <View
-      testID="invitedUser"
-      style={[
-        styles.layout,
-        {
-          backgroundColor: pal.colors.unreadNotifBg,
-          borderColor: pal.colors.unreadNotifBorder,
-        },
-      ]}>
-      <View style={styles.layoutIcon}>
-        <FontAwesomeIcon
-          icon="user-plus"
-          size={24}
-          style={[styles.icon, s.blue3 as FontAwesomeIconStyle]}
-        />
-      </View>
-      <View style={s.flex1}>
-        <Link href={makeProfileLink(profile)}>
-          <UserAvatar avatar={profile.avatar} size={35} />
-        </Link>
-        <Text style={[styles.desc, pal.text]}>
-          <TextLink
-            type="md-bold"
-            style={pal.text}
-            href={makeProfileLink(profile)}
-            text={sanitizeDisplayName(profile.displayName || profile.handle)}
-          />{' '}
-          joined using your invite code!
-        </Text>
-        <View style={styles.btns}>
-          <FollowButton
-            unfollowedType="primary"
-            followedType="primary-light"
-            profile={profile}
-          />
-          <Button
-            testID="dismissBtn"
-            type="primary-light"
-            label="Dismiss"
-            onPress={onPressDismiss}
-          />
-        </View>
-      </View>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  layout: {
-    flexDirection: 'row',
-    borderTopWidth: 1,
-    padding: 10,
-  },
-  layoutIcon: {
-    width: 70,
-    alignItems: 'flex-end',
-    paddingTop: 2,
-  },
-  icon: {
-    marginRight: 10,
-    marginTop: 4,
-  },
-  desc: {
-    paddingVertical: 6,
-  },
-  btns: {
-    flexDirection: 'row',
-    gap: 10,
-  },
-})

src/view/screens/Notifications.tsx

···
 import {ViewHeader} from '../com/util/ViewHeader'
 import {Feed} from '../com/notifications/Feed'
 import {TextLink} from 'view/com/util/Link'
-import {InvitedUsers} from '../com/notifications/InvitedUsers'
 import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn'
 import {useStores} from 'state/index'
 import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
···
     return (
       <View testID="notificationsScreen" style={s.hContentRegion}>
         <ViewHeader title="Notifications" canGoBack={false} />
-        <InvitedUsers />
         <Feed
           view={store.me.notifications}
           onPressTryAgain={onPressTryAgain}