Show feedback for Follow button in interstitials (#4738)
* Fix Follow in interstitials * Show feedback in toastzio/stable
parent
d5fd19df8f
commit
09dfc9edf8
|
@ -212,6 +212,7 @@ export function SuggestedFollows() {
|
||||||
/>
|
/>
|
||||||
<ProfileCard.FollowButton
|
<ProfileCard.FollowButton
|
||||||
profile={profile}
|
profile={profile}
|
||||||
|
moderationOpts={moderationOpts}
|
||||||
logContext="FeedInterstitial"
|
logContext="FeedInterstitial"
|
||||||
color="secondary_inverted"
|
color="secondary_inverted"
|
||||||
shape="round"
|
shape="round"
|
||||||
|
|
|
@ -62,7 +62,11 @@ export function Card({
|
||||||
<Header>
|
<Header>
|
||||||
<Avatar profile={profile} moderationOpts={moderationOpts} />
|
<Avatar profile={profile} moderationOpts={moderationOpts} />
|
||||||
<NameAndHandle profile={profile} moderationOpts={moderationOpts} />
|
<NameAndHandle profile={profile} moderationOpts={moderationOpts} />
|
||||||
<FollowButton profile={profile} logContext={logContext} />
|
<FollowButton
|
||||||
|
profile={profile}
|
||||||
|
moderationOpts={moderationOpts}
|
||||||
|
logContext={logContext}
|
||||||
|
/>
|
||||||
</Header>
|
</Header>
|
||||||
|
|
||||||
<ProfileCardPills
|
<ProfileCardPills
|
||||||
|
@ -261,6 +265,7 @@ export function DescriptionPlaceholder() {
|
||||||
|
|
||||||
export type FollowButtonProps = {
|
export type FollowButtonProps = {
|
||||||
profile: AppBskyActorDefs.ProfileViewBasic
|
profile: AppBskyActorDefs.ProfileViewBasic
|
||||||
|
moderationOpts: ModerationOpts
|
||||||
logContext: LogEvents['profile:follow']['logContext'] &
|
logContext: LogEvents['profile:follow']['logContext'] &
|
||||||
LogEvents['profile:unfollow']['logContext']
|
LogEvents['profile:unfollow']['logContext']
|
||||||
} & Partial<ButtonProps>
|
} & Partial<ButtonProps>
|
||||||
|
@ -273,11 +278,13 @@ export function FollowButton(props: FollowButtonProps) {
|
||||||
|
|
||||||
export function FollowButtonInner({
|
export function FollowButtonInner({
|
||||||
profile: profileUnshadowed,
|
profile: profileUnshadowed,
|
||||||
|
moderationOpts,
|
||||||
logContext,
|
logContext,
|
||||||
...rest
|
...rest
|
||||||
}: FollowButtonProps) {
|
}: FollowButtonProps) {
|
||||||
const {_} = useLingui()
|
const {_} = useLingui()
|
||||||
const profile = useProfileShadow(profileUnshadowed)
|
const profile = useProfileShadow(profileUnshadowed)
|
||||||
|
const moderation = moderateProfile(profile, moderationOpts)
|
||||||
const [queueFollow, queueUnfollow] = useProfileFollowMutationQueue(
|
const [queueFollow, queueUnfollow] = useProfileFollowMutationQueue(
|
||||||
profile,
|
profile,
|
||||||
logContext,
|
logContext,
|
||||||
|
@ -289,6 +296,14 @@ export function FollowButtonInner({
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
try {
|
try {
|
||||||
await queueFollow()
|
await queueFollow()
|
||||||
|
Toast.show(
|
||||||
|
_(
|
||||||
|
msg`Following ${sanitizeDisplayName(
|
||||||
|
profile.displayName || profile.handle,
|
||||||
|
moderation.ui('displayName'),
|
||||||
|
)}`,
|
||||||
|
),
|
||||||
|
)
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
if (e?.name !== 'AbortError') {
|
if (e?.name !== 'AbortError') {
|
||||||
Toast.show(_(msg`An issue occurred, please try again.`))
|
Toast.show(_(msg`An issue occurred, please try again.`))
|
||||||
|
@ -301,6 +316,14 @@ export function FollowButtonInner({
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
try {
|
try {
|
||||||
await queueUnfollow()
|
await queueUnfollow()
|
||||||
|
Toast.show(
|
||||||
|
_(
|
||||||
|
msg`No longer following ${sanitizeDisplayName(
|
||||||
|
profile.displayName || profile.handle,
|
||||||
|
moderation.ui('displayName'),
|
||||||
|
)}`,
|
||||||
|
),
|
||||||
|
)
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
if (e?.name !== 'AbortError') {
|
if (e?.name !== 'AbortError') {
|
||||||
Toast.show(_(msg`An issue occurred, please try again.`))
|
Toast.show(_(msg`An issue occurred, please try again.`))
|
||||||
|
|
|
@ -3,6 +3,7 @@ import {Image as RNImage} from 'react-native-image-crop-picker'
|
||||||
import {
|
import {
|
||||||
AppBskyActorDefs,
|
AppBskyActorDefs,
|
||||||
AppBskyActorGetProfile,
|
AppBskyActorGetProfile,
|
||||||
|
AppBskyActorGetProfiles,
|
||||||
AppBskyActorProfile,
|
AppBskyActorProfile,
|
||||||
AtUri,
|
AtUri,
|
||||||
BskyAgent,
|
BskyAgent,
|
||||||
|
@ -516,11 +517,11 @@ export function* findAllProfilesInQueryData(
|
||||||
queryClient: QueryClient,
|
queryClient: QueryClient,
|
||||||
did: string,
|
did: string,
|
||||||
): Generator<AppBskyActorDefs.ProfileViewDetailed, void> {
|
): Generator<AppBskyActorDefs.ProfileViewDetailed, void> {
|
||||||
const queryDatas =
|
const profileQueryDatas =
|
||||||
queryClient.getQueriesData<AppBskyActorDefs.ProfileViewDetailed>({
|
queryClient.getQueriesData<AppBskyActorDefs.ProfileViewDetailed>({
|
||||||
queryKey: [RQKEY_ROOT],
|
queryKey: [RQKEY_ROOT],
|
||||||
})
|
})
|
||||||
for (const [_queryKey, queryData] of queryDatas) {
|
for (const [_queryKey, queryData] of profileQueryDatas) {
|
||||||
if (!queryData) {
|
if (!queryData) {
|
||||||
continue
|
continue
|
||||||
}
|
}
|
||||||
|
@ -528,6 +529,20 @@ export function* findAllProfilesInQueryData(
|
||||||
yield queryData
|
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(
|
export function findProfileQueryData(
|
||||||
|
|
Loading…
Reference in New Issue