Port Profile Followers/Follows to RQ (#1893)
* Port user followers to RQ * Port user follows to RQ * Start porting FollowButton to RQ * Fix RQ key * Check pending * Fix shadow and pending states * Rm unused * Remove last usage of useFollowProfile
This commit is contained in:
dan
GitHub
parent
d1cb74febe
commit
e699df21c6
11 changed files with 370 additions and 485 deletions
|
|
@ -1,47 +1,76 @@
|
|||
import React from 'react'
|
||||
import {StyleProp, TextStyle, View} from 'react-native'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {AppBskyActorDefs} from '@atproto/api'
|
||||
import {Button, ButtonType} from '../util/forms/Button'
|
||||
import * as Toast from '../util/Toast'
|
||||
import {FollowState} from 'state/models/cache/my-follows'
|
||||
import {useFollowProfile} from 'lib/hooks/useFollowProfile'
|
||||
import {
|
||||
useProfileFollowMutation,
|
||||
useProfileUnfollowMutation,
|
||||
} from '#/state/queries/profile'
|
||||
import {Shadow} from '#/state/cache/types'
|
||||
|
||||
export const FollowButton = observer(function FollowButtonImpl({
|
||||
export function FollowButton({
|
||||
unfollowedType = 'inverted',
|
||||
followedType = 'default',
|
||||
profile,
|
||||
onToggleFollow,
|
||||
labelStyle,
|
||||
}: {
|
||||
unfollowedType?: ButtonType
|
||||
followedType?: ButtonType
|
||||
profile: AppBskyActorDefs.ProfileViewBasic
|
||||
onToggleFollow?: (v: boolean) => void
|
||||
profile: Shadow<AppBskyActorDefs.ProfileViewBasic>
|
||||
labelStyle?: StyleProp<TextStyle>
|
||||
}) {
|
||||
const {state, following, toggle} = useFollowProfile(profile)
|
||||
const followMutation = useProfileFollowMutation()
|
||||
const unfollowMutation = useProfileUnfollowMutation()
|
||||
|
||||
const onPress = React.useCallback(async () => {
|
||||
try {
|
||||
const {following} = await toggle()
|
||||
onToggleFollow?.(following)
|
||||
} catch (e: any) {
|
||||
Toast.show('An issue occurred, please try again.')
|
||||
const onPressFollow = async () => {
|
||||
if (profile.viewer?.following) {
|
||||
return
|
||||
}
|
||||
}, [toggle, onToggleFollow])
|
||||
try {
|
||||
await followMutation.mutateAsync({did: profile.did})
|
||||
} catch (e: any) {
|
||||
Toast.show(`An issue occurred, please try again.`)
|
||||
}
|
||||
}
|
||||
|
||||
if (state === FollowState.Unknown) {
|
||||
const onPressUnfollow = async () => {
|
||||
if (!profile.viewer?.following) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
await unfollowMutation.mutateAsync({
|
||||
did: profile.did,
|
||||
followUri: profile.viewer?.following,
|
||||
})
|
||||
} catch (e: any) {
|
||||
Toast.show(`An issue occurred, please try again.`)
|
||||
}
|
||||
}
|
||||
|
||||
if (!profile.viewer) {
|
||||
return <View />
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
type={following ? followedType : unfollowedType}
|
||||
labelStyle={labelStyle}
|
||||
onPress={onPress}
|
||||
label={following ? 'Unfollow' : 'Follow'}
|
||||
withLoading={true}
|
||||
/>
|
||||
)
|
||||
})
|
||||
if (profile.viewer.following) {
|
||||
return (
|
||||
<Button
|
||||
type={followedType}
|
||||
labelStyle={labelStyle}
|
||||
onPress={onPressUnfollow}
|
||||
label="Unfollow"
|
||||
withLoading={true}
|
||||
/>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<Button
|
||||
type={unfollowedType}
|
||||
labelStyle={labelStyle}
|
||||
onPress={onPressFollow}
|
||||
label="Follow"
|
||||
withLoading={true}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,8 +21,10 @@ import {
|
|||
getProfileModerationCauses,
|
||||
getModerationCauseKey,
|
||||
} from 'lib/moderation'
|
||||
import {Shadow} from '#/state/cache/types'
|
||||
import {useModerationOpts} from '#/state/queries/preferences'
|
||||
import {useProfileShadow} from '#/state/cache/profile-shadow'
|
||||
import {useSession} from '#/state/session'
|
||||
|
||||
export function ProfileCard({
|
||||
testID,
|
||||
|
|
@ -40,7 +42,9 @@ export function ProfileCard({
|
|||
noBg?: boolean
|
||||
noBorder?: boolean
|
||||
followers?: AppBskyActorDefs.ProfileView[] | undefined
|
||||
renderButton?: (profile: AppBskyActorDefs.ProfileViewBasic) => React.ReactNode
|
||||
renderButton?: (
|
||||
profile: Shadow<AppBskyActorDefs.ProfileViewBasic>,
|
||||
) => React.ReactNode
|
||||
style?: StyleProp<ViewStyle>
|
||||
}) {
|
||||
const pal = usePalette('default')
|
||||
|
|
@ -188,34 +192,37 @@ const FollowersList = observer(function FollowersListImpl({
|
|||
)
|
||||
})
|
||||
|
||||
export const ProfileCardWithFollowBtn = observer(
|
||||
function ProfileCardWithFollowBtnImpl({
|
||||
profile,
|
||||
noBg,
|
||||
noBorder,
|
||||
followers,
|
||||
}: {
|
||||
profile: AppBskyActorDefs.ProfileViewBasic
|
||||
noBg?: boolean
|
||||
noBorder?: boolean
|
||||
followers?: AppBskyActorDefs.ProfileView[] | undefined
|
||||
}) {
|
||||
const store = useStores()
|
||||
const isMe = store.me.did === profile.did
|
||||
export function ProfileCardWithFollowBtn({
|
||||
profile,
|
||||
noBg,
|
||||
noBorder,
|
||||
followers,
|
||||
dataUpdatedAt,
|
||||
}: {
|
||||
profile: AppBskyActorDefs.ProfileViewBasic
|
||||
noBg?: boolean
|
||||
noBorder?: boolean
|
||||
followers?: AppBskyActorDefs.ProfileView[] | undefined
|
||||
dataUpdatedAt: number
|
||||
}) {
|
||||
const {currentAccount} = useSession()
|
||||
const isMe = profile.did === currentAccount?.did
|
||||
|
||||
return (
|
||||
<ProfileCard
|
||||
profile={profile}
|
||||
noBg={noBg}
|
||||
noBorder={noBorder}
|
||||
followers={followers}
|
||||
renderButton={
|
||||
isMe ? undefined : () => <FollowButton profile={profile} />
|
||||
}
|
||||
/>
|
||||
)
|
||||
},
|
||||
)
|
||||
return (
|
||||
<ProfileCard
|
||||
profile={profile}
|
||||
noBg={noBg}
|
||||
noBorder={noBorder}
|
||||
followers={followers}
|
||||
renderButton={
|
||||
isMe
|
||||
? undefined
|
||||
: profileShadow => <FollowButton profile={profileShadow} />
|
||||
}
|
||||
dataUpdatedAt={dataUpdatedAt}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
outer: {
|
||||
|
|
|
|||
|
|
@ -1,49 +1,73 @@
|
|||
import React, {useEffect} from 'react'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import React from 'react'
|
||||
import {ActivityIndicator, RefreshControl, StyleSheet, View} from 'react-native'
|
||||
import {
|
||||
UserFollowersModel,
|
||||
FollowerItem,
|
||||
} from 'state/models/lists/user-followers'
|
||||
import {AppBskyActorDefs as ActorDefs} from '@atproto/api'
|
||||
import {CenteredView, FlatList} from '../util/Views'
|
||||
import {ErrorMessage} from '../util/error/ErrorMessage'
|
||||
import {ProfileCardWithFollowBtn} from './ProfileCard'
|
||||
import {useStores} from 'state/index'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {useProfileFollowersQuery} from '#/state/queries/profile-followers'
|
||||
import {useResolveDidQuery} from '#/state/queries/resolve-uri'
|
||||
import {logger} from '#/logger'
|
||||
import {cleanError} from '#/lib/strings/errors'
|
||||
|
||||
export const ProfileFollowers = observer(function ProfileFollowers({
|
||||
name,
|
||||
}: {
|
||||
name: string
|
||||
}) {
|
||||
export function ProfileFollowers({name}: {name: string}) {
|
||||
const pal = usePalette('default')
|
||||
const store = useStores()
|
||||
const view = React.useMemo(
|
||||
() => new UserFollowersModel(store, {actor: name}),
|
||||
[store, name],
|
||||
const [isPTRing, setIsPTRing] = React.useState(false)
|
||||
const {
|
||||
data: resolvedDid,
|
||||
error: resolveError,
|
||||
isFetching: isFetchingDid,
|
||||
} = useResolveDidQuery(name)
|
||||
const {
|
||||
data,
|
||||
dataUpdatedAt,
|
||||
isFetching,
|
||||
isFetched,
|
||||
isFetchingNextPage,
|
||||
hasNextPage,
|
||||
fetchNextPage,
|
||||
isError,
|
||||
error,
|
||||
refetch,
|
||||
} = useProfileFollowersQuery(resolvedDid?.did)
|
||||
|
||||
const followers = React.useMemo(() => {
|
||||
if (data?.pages) {
|
||||
return data.pages.flatMap(page => page.followers)
|
||||
}
|
||||
}, [data])
|
||||
|
||||
const onRefresh = React.useCallback(async () => {
|
||||
setIsPTRing(true)
|
||||
try {
|
||||
await refetch()
|
||||
} catch (err) {
|
||||
logger.error('Failed to refresh followers', {error: err})
|
||||
}
|
||||
setIsPTRing(false)
|
||||
}, [refetch, setIsPTRing])
|
||||
|
||||
const onEndReached = async () => {
|
||||
if (isFetching || !hasNextPage || isError) return
|
||||
try {
|
||||
await fetchNextPage()
|
||||
} catch (err) {
|
||||
logger.error('Failed to load more followers', {error: err})
|
||||
}
|
||||
}
|
||||
|
||||
const renderItem = React.useCallback(
|
||||
({item}: {item: ActorDefs.ProfileViewBasic}) => (
|
||||
<ProfileCardWithFollowBtn
|
||||
key={item.did}
|
||||
profile={item}
|
||||
dataUpdatedAt={dataUpdatedAt}
|
||||
/>
|
||||
),
|
||||
[dataUpdatedAt],
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
view
|
||||
.loadMore()
|
||||
.catch(err =>
|
||||
logger.error('Failed to fetch user followers', {error: err}),
|
||||
)
|
||||
}, [view])
|
||||
|
||||
const onRefresh = () => {
|
||||
view.refresh()
|
||||
}
|
||||
const onEndReached = () => {
|
||||
view.loadMore().catch(err =>
|
||||
logger.error('Failed to load more followers', {
|
||||
error: err,
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
if (!view.hasLoaded) {
|
||||
if (isFetchingDid || !isFetched) {
|
||||
return (
|
||||
<CenteredView>
|
||||
<ActivityIndicator />
|
||||
|
|
@ -53,26 +77,26 @@ export const ProfileFollowers = observer(function ProfileFollowers({
|
|||
|
||||
// error
|
||||
// =
|
||||
if (view.hasError) {
|
||||
if (resolveError || isError) {
|
||||
return (
|
||||
<CenteredView>
|
||||
<ErrorMessage message={view.error} onPressTryAgain={onRefresh} />
|
||||
<ErrorMessage
|
||||
message={cleanError(resolveError || error)}
|
||||
onPressTryAgain={onRefresh}
|
||||
/>
|
||||
</CenteredView>
|
||||
)
|
||||
}
|
||||
|
||||
// loaded
|
||||
// =
|
||||
const renderItem = ({item}: {item: FollowerItem}) => (
|
||||
<ProfileCardWithFollowBtn key={item.did} profile={item} />
|
||||
)
|
||||
return (
|
||||
<FlatList
|
||||
data={view.followers}
|
||||
data={followers}
|
||||
keyExtractor={item => item.did}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={view.isRefreshing}
|
||||
refreshing={isPTRing}
|
||||
onRefresh={onRefresh}
|
||||
tintColor={pal.colors.text}
|
||||
titleColor={pal.colors.text}
|
||||
|
|
@ -85,15 +109,14 @@ export const ProfileFollowers = observer(function ProfileFollowers({
|
|||
// eslint-disable-next-line react/no-unstable-nested-components
|
||||
ListFooterComponent={() => (
|
||||
<View style={styles.footer}>
|
||||
{view.isLoading && <ActivityIndicator />}
|
||||
{(isFetching || isFetchingNextPage) && <ActivityIndicator />}
|
||||
</View>
|
||||
)}
|
||||
extraData={view.isLoading}
|
||||
// @ts-ignore our .web version only -prf
|
||||
desktopFixedHeight
|
||||
/>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
footer: {
|
||||
|
|
|
|||
|
|
@ -1,42 +1,73 @@
|
|||
import React, {useEffect} from 'react'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import React from 'react'
|
||||
import {ActivityIndicator, RefreshControl, StyleSheet, View} from 'react-native'
|
||||
import {AppBskyActorDefs as ActorDefs} from '@atproto/api'
|
||||
import {CenteredView, FlatList} from '../util/Views'
|
||||
import {UserFollowsModel, FollowItem} from 'state/models/lists/user-follows'
|
||||
import {ErrorMessage} from '../util/error/ErrorMessage'
|
||||
import {ProfileCardWithFollowBtn} from './ProfileCard'
|
||||
import {useStores} from 'state/index'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {useProfileFollowsQuery} from '#/state/queries/profile-follows'
|
||||
import {useResolveDidQuery} from '#/state/queries/resolve-uri'
|
||||
import {logger} from '#/logger'
|
||||
import {cleanError} from '#/lib/strings/errors'
|
||||
|
||||
export const ProfileFollows = observer(function ProfileFollows({
|
||||
name,
|
||||
}: {
|
||||
name: string
|
||||
}) {
|
||||
export function ProfileFollows({name}: {name: string}) {
|
||||
const pal = usePalette('default')
|
||||
const store = useStores()
|
||||
const view = React.useMemo(
|
||||
() => new UserFollowsModel(store, {actor: name}),
|
||||
[store, name],
|
||||
const [isPTRing, setIsPTRing] = React.useState(false)
|
||||
const {
|
||||
data: resolvedDid,
|
||||
error: resolveError,
|
||||
isFetching: isFetchingDid,
|
||||
} = useResolveDidQuery(name)
|
||||
const {
|
||||
data,
|
||||
dataUpdatedAt,
|
||||
isFetching,
|
||||
isFetched,
|
||||
isFetchingNextPage,
|
||||
hasNextPage,
|
||||
fetchNextPage,
|
||||
isError,
|
||||
error,
|
||||
refetch,
|
||||
} = useProfileFollowsQuery(resolvedDid?.did)
|
||||
|
||||
const follows = React.useMemo(() => {
|
||||
if (data?.pages) {
|
||||
return data.pages.flatMap(page => page.follows)
|
||||
}
|
||||
}, [data])
|
||||
|
||||
const onRefresh = React.useCallback(async () => {
|
||||
setIsPTRing(true)
|
||||
try {
|
||||
await refetch()
|
||||
} catch (err) {
|
||||
logger.error('Failed to refresh follows', {error: err})
|
||||
}
|
||||
setIsPTRing(false)
|
||||
}, [refetch, setIsPTRing])
|
||||
|
||||
const onEndReached = async () => {
|
||||
if (isFetching || !hasNextPage || isError) return
|
||||
try {
|
||||
await fetchNextPage()
|
||||
} catch (err) {
|
||||
logger.error('Failed to load more follows', {error: err})
|
||||
}
|
||||
}
|
||||
|
||||
const renderItem = React.useCallback(
|
||||
({item}: {item: ActorDefs.ProfileViewBasic}) => (
|
||||
<ProfileCardWithFollowBtn
|
||||
key={item.did}
|
||||
profile={item}
|
||||
dataUpdatedAt={dataUpdatedAt}
|
||||
/>
|
||||
),
|
||||
[dataUpdatedAt],
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
view
|
||||
.loadMore()
|
||||
.catch(err => logger.error('Failed to fetch user follows', err))
|
||||
}, [view])
|
||||
|
||||
const onRefresh = () => {
|
||||
view.refresh()
|
||||
}
|
||||
const onEndReached = () => {
|
||||
view
|
||||
.loadMore()
|
||||
.catch(err => logger.error('Failed to load more follows', err))
|
||||
}
|
||||
|
||||
if (!view.hasLoaded) {
|
||||
if (isFetchingDid || !isFetched) {
|
||||
return (
|
||||
<CenteredView>
|
||||
<ActivityIndicator />
|
||||
|
|
@ -46,26 +77,26 @@ export const ProfileFollows = observer(function ProfileFollows({
|
|||
|
||||
// error
|
||||
// =
|
||||
if (view.hasError) {
|
||||
if (resolveError || isError) {
|
||||
return (
|
||||
<CenteredView>
|
||||
<ErrorMessage message={view.error} onPressTryAgain={onRefresh} />
|
||||
<ErrorMessage
|
||||
message={cleanError(resolveError || error)}
|
||||
onPressTryAgain={onRefresh}
|
||||
/>
|
||||
</CenteredView>
|
||||
)
|
||||
}
|
||||
|
||||
// loaded
|
||||
// =
|
||||
const renderItem = ({item}: {item: FollowItem}) => (
|
||||
<ProfileCardWithFollowBtn key={item.did} profile={item} />
|
||||
)
|
||||
return (
|
||||
<FlatList
|
||||
data={view.follows}
|
||||
data={follows}
|
||||
keyExtractor={item => item.did}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={view.isRefreshing}
|
||||
refreshing={isPTRing}
|
||||
onRefresh={onRefresh}
|
||||
tintColor={pal.colors.text}
|
||||
titleColor={pal.colors.text}
|
||||
|
|
@ -78,15 +109,14 @@ export const ProfileFollows = observer(function ProfileFollows({
|
|||
// eslint-disable-next-line react/no-unstable-nested-components
|
||||
ListFooterComponent={() => (
|
||||
<View style={styles.footer}>
|
||||
{view.isLoading && <ActivityIndicator />}
|
||||
{(isFetching || isFetchingNextPage) && <ActivityIndicator />}
|
||||
</View>
|
||||
)}
|
||||
extraData={view.isLoading}
|
||||
// @ts-ignore our .web version only -prf
|
||||
desktopFixedHeight
|
||||
/>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
footer: {
|
||||
|
|
|
|||
|
|
@ -6,20 +6,16 @@ import Animated, {
|
|||
useAnimatedStyle,
|
||||
Easing,
|
||||
} from 'react-native-reanimated'
|
||||
import {useQuery} from '@tanstack/react-query'
|
||||
import {AppBskyActorDefs, moderateProfile} from '@atproto/api'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {
|
||||
FontAwesomeIcon,
|
||||
FontAwesomeIconStyle,
|
||||
} from '@fortawesome/react-native-fontawesome'
|
||||
|
||||
import * as Toast from '../util/Toast'
|
||||
import {useStores} from 'state/index'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {Text} from 'view/com/util/text/Text'
|
||||
import {UserAvatar} from 'view/com/util/UserAvatar'
|
||||
import {useFollowProfile} from 'lib/hooks/useFollowProfile'
|
||||
import {Button} from 'view/com/util/forms/Button'
|
||||
import {sanitizeDisplayName} from 'lib/strings/display-names'
|
||||
import {sanitizeHandle} from 'lib/strings/handles'
|
||||
|
|
@ -27,6 +23,13 @@ import {makeProfileLink} from 'lib/routes/links'
|
|||
import {Link} from 'view/com/util/Link'
|
||||
import {useAnalytics} from 'lib/analytics/analytics'
|
||||
import {isWeb} from 'platform/detection'
|
||||
import {useModerationOpts} from '#/state/queries/preferences'
|
||||
import {useSuggestedFollowsByActorQuery} from '#/state/queries/suggested-follows'
|
||||
import {useProfileShadow} from '#/state/cache/profile-shadow'
|
||||
import {
|
||||
useProfileFollowMutation,
|
||||
useProfileUnfollowMutation,
|
||||
} from '#/state/queries/profile'
|
||||
|
||||
const OUTER_PADDING = 10
|
||||
const INNER_PADDING = 14
|
||||
|
|
@ -43,7 +46,6 @@ export function ProfileHeaderSuggestedFollows({
|
|||
}) {
|
||||
const {track} = useAnalytics()
|
||||
const pal = usePalette('default')
|
||||
const store = useStores()
|
||||
const animatedHeight = useSharedValue(0)
|
||||
const animatedStyles = useAnimatedStyle(() => ({
|
||||
opacity: animatedHeight.value / TOTAL_HEIGHT,
|
||||
|
|
@ -66,31 +68,8 @@ export function ProfileHeaderSuggestedFollows({
|
|||
}
|
||||
}, [active, animatedHeight, track])
|
||||
|
||||
const {isLoading, data: suggestedFollows} = useQuery({
|
||||
enabled: active,
|
||||
cacheTime: 0,
|
||||
staleTime: 0,
|
||||
queryKey: ['suggested_follows_by_actor', actorDid],
|
||||
async queryFn() {
|
||||
try {
|
||||
const {
|
||||
data: {suggestions},
|
||||
success,
|
||||
} = await store.agent.app.bsky.graph.getSuggestedFollowsByActor({
|
||||
actor: actorDid,
|
||||
})
|
||||
|
||||
if (!success) {
|
||||
return []
|
||||
}
|
||||
|
||||
store.me.follows.hydrateMany(suggestions)
|
||||
|
||||
return suggestions
|
||||
} catch (e) {
|
||||
return []
|
||||
}
|
||||
},
|
||||
const {isLoading, data, dataUpdatedAt} = useSuggestedFollowsByActorQuery({
|
||||
did: actorDid,
|
||||
})
|
||||
|
||||
return (
|
||||
|
|
@ -149,9 +128,13 @@ export function ProfileHeaderSuggestedFollows({
|
|||
<SuggestedFollowSkeleton />
|
||||
<SuggestedFollowSkeleton />
|
||||
</>
|
||||
) : suggestedFollows ? (
|
||||
suggestedFollows.map(profile => (
|
||||
<SuggestedFollow key={profile.did} profile={profile} />
|
||||
) : data ? (
|
||||
data.suggestions.map(profile => (
|
||||
<SuggestedFollow
|
||||
key={profile.did}
|
||||
profile={profile}
|
||||
dataUpdatedAt={dataUpdatedAt}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<View />
|
||||
|
|
@ -214,29 +197,51 @@ function SuggestedFollowSkeleton() {
|
|||
)
|
||||
}
|
||||
|
||||
const SuggestedFollow = observer(function SuggestedFollowImpl({
|
||||
profile,
|
||||
function SuggestedFollow({
|
||||
profile: profileUnshadowed,
|
||||
dataUpdatedAt,
|
||||
}: {
|
||||
profile: AppBskyActorDefs.ProfileView
|
||||
dataUpdatedAt: number
|
||||
}) {
|
||||
const {track} = useAnalytics()
|
||||
const pal = usePalette('default')
|
||||
const store = useStores()
|
||||
const {following, toggle} = useFollowProfile(profile)
|
||||
const moderation = moderateProfile(profile, store.preferences.moderationOpts)
|
||||
const moderationOpts = useModerationOpts()
|
||||
const profile = useProfileShadow(profileUnshadowed, dataUpdatedAt)
|
||||
const followMutation = useProfileFollowMutation()
|
||||
const unfollowMutation = useProfileUnfollowMutation()
|
||||
|
||||
const onPress = React.useCallback(async () => {
|
||||
const onPressFollow = React.useCallback(async () => {
|
||||
if (profile.viewer?.following) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
const {following: isFollowing} = await toggle()
|
||||
|
||||
if (isFollowing) {
|
||||
track('ProfileHeader:SuggestedFollowFollowed')
|
||||
}
|
||||
track('ProfileHeader:SuggestedFollowFollowed')
|
||||
await followMutation.mutateAsync({did: profile.did})
|
||||
} catch (e: any) {
|
||||
Toast.show('An issue occurred, please try again.')
|
||||
}
|
||||
}, [toggle, track])
|
||||
}, [followMutation, profile, track])
|
||||
|
||||
const onPressUnfollow = React.useCallback(async () => {
|
||||
if (!profile.viewer?.following) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
await unfollowMutation.mutateAsync({
|
||||
did: profile.did,
|
||||
followUri: profile.viewer?.following,
|
||||
})
|
||||
} catch (e: any) {
|
||||
Toast.show('An issue occurred, please try again.')
|
||||
}
|
||||
}, [unfollowMutation, profile])
|
||||
|
||||
if (!moderationOpts) {
|
||||
return null
|
||||
}
|
||||
const moderation = moderateProfile(profile, moderationOpts)
|
||||
const following = profile.viewer?.following
|
||||
return (
|
||||
<Link
|
||||
href={makeProfileLink(profile)}
|
||||
|
|
@ -278,13 +283,13 @@ const SuggestedFollow = observer(function SuggestedFollowImpl({
|
|||
label={following ? 'Unfollow' : 'Follow'}
|
||||
type="inverted"
|
||||
labelStyle={{textAlign: 'center'}}
|
||||
onPress={onPress}
|
||||
onPress={following ? onPressUnfollow : onPressFollow}
|
||||
withLoading
|
||||
/>
|
||||
</View>
|
||||
</Link>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
suggestedFollowCardOuter: {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue