Show feedback for Follow button in interstitials (#4738)

* Fix Follow in interstitials

* Show feedback in toast

src/components/FeedInterstitials.tsx

@@ -212,6 +212,7 @@ export function SuggestedFollows() {
                   />
                   <ProfileCard.FollowButton
                     profile={profile}
+                    moderationOpts={moderationOpts}
                     logContext="FeedInterstitial"
                     color="secondary_inverted"
                     shape="round"

src/components/ProfileCard.tsx

@@ -62,7 +62,11 @@ export function Card({
       <Header>
         <Avatar profile={profile} moderationOpts={moderationOpts} />
         <NameAndHandle profile={profile} moderationOpts={moderationOpts} />
-        <FollowButton profile={profile} logContext={logContext} />
+        <FollowButton
+          profile={profile}
+          moderationOpts={moderationOpts}
+          logContext={logContext}
+        />
       </Header>
 
       <ProfileCardPills
@@ -261,6 +265,7 @@ export function DescriptionPlaceholder() {
 
 export type FollowButtonProps = {
   profile: AppBskyActorDefs.ProfileViewBasic
+  moderationOpts: ModerationOpts
   logContext: LogEvents['profile:follow']['logContext'] &
     LogEvents['profile:unfollow']['logContext']
 } & Partial<ButtonProps>
@@ -273,11 +278,13 @@ export function FollowButton(props: FollowButtonProps) {
 
 export function FollowButtonInner({
   profile: profileUnshadowed,
+  moderationOpts,
   logContext,
   ...rest
 }: FollowButtonProps) {
   const {_} = useLingui()
   const profile = useProfileShadow(profileUnshadowed)
+  const moderation = moderateProfile(profile, moderationOpts)
   const [queueFollow, queueUnfollow] = useProfileFollowMutationQueue(
     profile,
     logContext,
@@ -289,6 +296,14 @@ export function FollowButtonInner({
     e.stopPropagation()
     try {
       await queueFollow()
+      Toast.show(
+        _(
+          msg`Following ${sanitizeDisplayName(
+            profile.displayName || profile.handle,
+            moderation.ui('displayName'),
+          )}`,
+        ),
+      )
     } catch (e: any) {
       if (e?.name !== 'AbortError') {
         Toast.show(_(msg`An issue occurred, please try again.`))
@@ -301,6 +316,14 @@ export function FollowButtonInner({
     e.stopPropagation()
     try {
       await queueUnfollow()
+      Toast.show(
+        _(
+          msg`No longer following ${sanitizeDisplayName(
+            profile.displayName || profile.handle,
+            moderation.ui('displayName'),
+          )}`,
+        ),
+      )
     } catch (e: any) {
       if (e?.name !== 'AbortError') {
         Toast.show(_(msg`An issue occurred, please try again.`))

src/state/queries/profile.ts

@@ -3,6 +3,7 @@ import {Image as RNImage} from 'react-native-image-crop-picker'
 import {
   AppBskyActorDefs,
   AppBskyActorGetProfile,
+  AppBskyActorGetProfiles,
   AppBskyActorProfile,
   AtUri,
   BskyAgent,
@@ -516,11 +517,11 @@ export function* findAllProfilesInQueryData(
   queryClient: QueryClient,
   did: string,
 ): Generator<AppBskyActorDefs.ProfileViewDetailed, void> {
-  const queryDatas =
+  const profileQueryDatas =
     queryClient.getQueriesData<AppBskyActorDefs.ProfileViewDetailed>({
       queryKey: [RQKEY_ROOT],
     })
-  for (const [_queryKey, queryData] of queryDatas) {
+  for (const [_queryKey, queryData] of profileQueryDatas) {
     if (!queryData) {
       continue
     }
@@ -528,6 +529,20 @@ export function* findAllProfilesInQueryData(
       yield queryData
     }
   }
+  const profilesQueryDatas =
+    queryClient.getQueriesData<AppBskyActorGetProfiles.OutputSchema>({
+      queryKey: [profilesQueryKeyRoot],
+    })
+  for (const [_queryKey, queryData] of profilesQueryDatas) {
+    if (!queryData) {
+      continue
+    }
+    for (let profile of queryData.profiles) {
+      if (profile.did === did) {
+        yield profile
+      }
+    }
+  }
 }
 
 export function findProfileQueryData(