Add feedgens tab to profile (#1889)

zio/stable
Paul Frazee 2023-11-13 14:46:19 -08:00 committed by GitHub
parent b04748e703
commit 9fca7b3af6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 296 additions and 34 deletions

View File

@ -24,7 +24,7 @@ export function useProfileExtraInfoQuery(did: string) {
])
return {
hasLists: listsRes.data.lists.length > 0,
hasFeeds: feedsRes.data.feeds.length > 0,
hasFeedgens: feedsRes.data.feeds.length > 0,
}
},
})

View File

@ -0,0 +1,31 @@
import {AppBskyFeedGetActorFeeds} from '@atproto/api'
import {useInfiniteQuery, InfiniteData, QueryKey} from '@tanstack/react-query'
import {useSession} from '../session'
const PAGE_SIZE = 30
type RQPageParam = string | undefined
export const RQKEY = (did: string) => ['profile-feedgens', did]
export function useProfileFeedgensQuery(did: string) {
const {agent} = useSession()
return useInfiniteQuery<
AppBskyFeedGetActorFeeds.OutputSchema,
Error,
InfiniteData<AppBskyFeedGetActorFeeds.OutputSchema>,
QueryKey,
RQPageParam
>({
queryKey: RQKEY(did),
async queryFn({pageParam}: {pageParam: RQPageParam}) {
const res = await agent.app.bsky.feed.getActorFeeds({
actor: did,
limit: PAGE_SIZE,
cursor: pageParam,
})
return res.data
},
initialPageParam: undefined,
getNextPageParam: lastPage => lastPage.cursor,
})
}

View File

@ -6,7 +6,6 @@ import {RichText} from '../util/text/RichText'
import {usePalette} from 'lib/hooks/usePalette'
import {s} from 'lib/styles'
import {UserAvatar} from '../util/UserAvatar'
import {observer} from 'mobx-react-lite'
import {useNavigation} from '@react-navigation/native'
import {NavigationProp} from 'lib/routes/types'
import {pluralize} from 'lib/strings/helpers'
@ -16,13 +15,14 @@ import {sanitizeHandle} from 'lib/strings/handles'
import {logger} from '#/logger'
import {useModalControls} from '#/state/modals'
import {
UsePreferencesQueryResponse,
usePreferencesQuery,
useSaveFeedMutation,
useRemoveFeedMutation,
} from '#/state/queries/preferences'
import {useFeedSourceInfoQuery} from '#/state/queries/feed'
import {useFeedSourceInfoQuery, FeedSourceInfo} from '#/state/queries/feed'
export const FeedSourceCard = observer(function FeedSourceCardImpl({
export function FeedSourceCard({
feedUri,
style,
showSaveBtn = false,
@ -34,31 +34,62 @@ export const FeedSourceCard = observer(function FeedSourceCardImpl({
showSaveBtn?: boolean
showDescription?: boolean
showLikes?: boolean
}) {
const {data: preferences} = usePreferencesQuery()
const {data: feed} = useFeedSourceInfoQuery({uri: feedUri})
if (!feed || !preferences) return null
return (
<FeedSourceCardLoaded
feed={feed}
preferences={preferences}
style={style}
showSaveBtn={showSaveBtn}
showDescription={showDescription}
showLikes={showLikes}
/>
)
}
export function FeedSourceCardLoaded({
feed,
preferences,
style,
showSaveBtn = false,
showDescription = false,
showLikes = false,
}: {
feed: FeedSourceInfo
preferences: UsePreferencesQueryResponse
style?: StyleProp<ViewStyle>
showSaveBtn?: boolean
showDescription?: boolean
showLikes?: boolean
}) {
const pal = usePalette('default')
const navigation = useNavigation<NavigationProp>()
const {openModal} = useModalControls()
const {data: preferences} = usePreferencesQuery()
const {data: info} = useFeedSourceInfoQuery({uri: feedUri})
const {isPending: isSavePending, mutateAsync: saveFeed} =
useSaveFeedMutation()
const {isPending: isRemovePending, mutateAsync: removeFeed} =
useRemoveFeedMutation()
const isSaved = Boolean(preferences?.feeds?.saved?.includes(feedUri))
const isSaved = Boolean(preferences?.feeds?.saved?.includes(feed.uri))
const onToggleSaved = React.useCallback(async () => {
// Only feeds can be un/saved, lists are handled elsewhere
if (info?.type !== 'feed') return
if (feed?.type !== 'feed') return
if (isSaved) {
openModal({
name: 'confirm',
title: 'Remove from my feeds',
message: `Remove ${info?.displayName} from my feeds?`,
message: `Remove ${feed?.displayName} from my feeds?`,
onPressConfirm: async () => {
try {
await removeFeed({uri: feedUri})
await removeFeed({uri: feed.uri})
// await item.unsave()
Toast.show('Removed from my feeds')
} catch (e) {
@ -69,51 +100,51 @@ export const FeedSourceCard = observer(function FeedSourceCardImpl({
})
} else {
try {
await saveFeed({uri: feedUri})
await saveFeed({uri: feed.uri})
Toast.show('Added to my feeds')
} catch (e) {
Toast.show('There was an issue contacting your server')
logger.error('Failed to save feed', {error: e})
}
}
}, [isSaved, openModal, info, feedUri, removeFeed, saveFeed])
}, [isSaved, openModal, feed, removeFeed, saveFeed])
if (!info || !preferences) return null
if (!feed || !preferences) return null
return (
<Pressable
testID={`feed-${info.displayName}`}
testID={`feed-${feed.displayName}`}
accessibilityRole="button"
style={[styles.container, pal.border, style]}
onPress={() => {
if (info.type === 'feed') {
if (feed.type === 'feed') {
navigation.push('ProfileFeed', {
name: info.creatorDid,
rkey: new AtUri(info.uri).rkey,
name: feed.creatorDid,
rkey: new AtUri(feed.uri).rkey,
})
} else if (info.type === 'list') {
} else if (feed.type === 'list') {
navigation.push('ProfileList', {
name: info.creatorDid,
rkey: new AtUri(info.uri).rkey,
name: feed.creatorDid,
rkey: new AtUri(feed.uri).rkey,
})
}
}}
key={info.uri}>
key={feed.uri}>
<View style={[styles.headerContainer]}>
<View style={[s.mr10]}>
<UserAvatar type="algo" size={36} avatar={info.avatar} />
<UserAvatar type="algo" size={36} avatar={feed.avatar} />
</View>
<View style={[styles.headerTextContainer]}>
<Text style={[pal.text, s.bold]} numberOfLines={3}>
{info.displayName}
{feed.displayName}
</Text>
<Text style={[pal.textLight]} numberOfLines={3}>
{info.type === 'feed' ? 'Feed' : 'List'} by{' '}
{sanitizeHandle(info.creatorHandle, '@')}
{feed.type === 'feed' ? 'Feed' : 'List'} by{' '}
{sanitizeHandle(feed.creatorHandle, '@')}
</Text>
</View>
{showSaveBtn && info.type === 'feed' && (
{showSaveBtn && feed.type === 'feed' && (
<View>
<Pressable
disabled={isSavePending || isRemovePending}
@ -143,23 +174,23 @@ export const FeedSourceCard = observer(function FeedSourceCardImpl({
)}
</View>
{showDescription && info.description ? (
{showDescription && feed.description ? (
<RichText
style={[pal.textLight, styles.description]}
richText={info.description}
richText={feed.description}
numberOfLines={3}
/>
) : null}
{showLikes && info.type === 'feed' ? (
{showLikes && feed.type === 'feed' ? (
<Text type="sm-medium" style={[pal.text, pal.textLight]}>
Liked by {info.likeCount || 0}{' '}
{pluralize(info.likeCount || 0, 'user')}
Liked by {feed.likeCount || 0}{' '}
{pluralize(feed.likeCount || 0, 'user')}
</Text>
) : null}
</Pressable>
)
})
}
const styles = StyleSheet.create({
container: {

View File

@ -0,0 +1,199 @@
import React, {MutableRefObject} from 'react'
import {
ActivityIndicator,
Dimensions,
RefreshControl,
StyleProp,
StyleSheet,
View,
ViewStyle,
} from 'react-native'
import {FlatList} from '../util/Views'
import {FeedSourceCardLoaded} from './FeedSourceCard'
import {ErrorMessage} from '../util/error/ErrorMessage'
import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
import {Text} from '../util/text/Text'
import {usePalette} from 'lib/hooks/usePalette'
import {useProfileFeedgensQuery} from '#/state/queries/profile-feedgens'
import {OnScrollHandler} from '#/lib/hooks/useOnMainScroll'
import {logger} from '#/logger'
import {Trans} from '@lingui/macro'
import {cleanError} from '#/lib/strings/errors'
import {useAnimatedScrollHandler} from 'react-native-reanimated'
import {useTheme} from '#/lib/ThemeContext'
import {usePreferencesQuery} from '#/state/queries/preferences'
import {hydrateFeedGenerator} from '#/state/queries/feed'
const LOADING = {_reactKey: '__loading__'}
const EMPTY = {_reactKey: '__empty__'}
const ERROR_ITEM = {_reactKey: '__error__'}
const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'}
export function ProfileFeedgens({
did,
scrollElRef,
onScroll,
scrollEventThrottle,
headerOffset,
style,
testID,
}: {
did: string
scrollElRef?: MutableRefObject<FlatList<any> | null>
onScroll?: OnScrollHandler
scrollEventThrottle?: number
headerOffset: number
style?: StyleProp<ViewStyle>
testID?: string
}) {
const pal = usePalette('default')
const theme = useTheme()
const [isPTRing, setIsPTRing] = React.useState(false)
const {
data,
isFetching,
isFetched,
hasNextPage,
fetchNextPage,
isError,
error,
refetch,
} = useProfileFeedgensQuery(did)
const isEmpty = !isFetching && !data?.pages[0]?.feeds.length
const {data: preferences} = usePreferencesQuery()
const items = React.useMemo(() => {
let items: any[] = []
if (isError && isEmpty) {
items = items.concat([ERROR_ITEM])
}
if (!isFetched && isFetching) {
items = items.concat([LOADING])
} else if (isEmpty) {
items = items.concat([EMPTY])
} else if (data?.pages) {
for (const page of data?.pages) {
items = items.concat(page.feeds.map(feed => hydrateFeedGenerator(feed)))
}
}
if (isError && !isEmpty) {
items = items.concat([LOAD_MORE_ERROR_ITEM])
}
return items
}, [isError, isEmpty, isFetched, isFetching, data])
// events
// =
const onRefresh = React.useCallback(async () => {
setIsPTRing(true)
try {
await refetch()
} catch (err) {
logger.error('Failed to refresh feeds', {error: err})
}
setIsPTRing(false)
}, [refetch, setIsPTRing])
const onEndReached = React.useCallback(async () => {
if (isFetching || !hasNextPage || isError) return
try {
await fetchNextPage()
} catch (err) {
logger.error('Failed to load more feeds', {error: err})
}
}, [isFetching, hasNextPage, isError, fetchNextPage])
const onPressRetryLoadMore = React.useCallback(() => {
fetchNextPage()
}, [fetchNextPage])
// rendering
// =
const renderItemInner = React.useCallback(
({item}: {item: any}) => {
if (item === EMPTY) {
return (
<View
testID="listsEmpty"
style={[{padding: 18, borderTopWidth: 1}, pal.border]}>
<Text style={pal.textLight}>
<Trans>You have no lists.</Trans>
</Text>
</View>
)
} else if (item === ERROR_ITEM) {
return (
<ErrorMessage message={cleanError(error)} onPressTryAgain={refetch} />
)
} else if (item === LOAD_MORE_ERROR_ITEM) {
return (
<LoadMoreRetryBtn
label="There was an issue fetching your lists. Tap here to try again."
onPress={onPressRetryLoadMore}
/>
)
} else if (item === LOADING) {
return (
<View style={{padding: 20}}>
<ActivityIndicator />
</View>
)
}
if (preferences) {
return (
<FeedSourceCardLoaded
feed={item}
preferences={preferences}
style={styles.item}
/>
)
}
return null
},
[error, refetch, onPressRetryLoadMore, pal, preferences],
)
const scrollHandler = useAnimatedScrollHandler(onScroll || {})
return (
<View testID={testID} style={style}>
<FlatList
testID={testID ? `${testID}-flatlist` : undefined}
ref={scrollElRef}
data={items}
keyExtractor={(item: any) => item._reactKey}
renderItem={renderItemInner}
refreshControl={
<RefreshControl
refreshing={isPTRing}
onRefresh={onRefresh}
tintColor={pal.colors.text}
titleColor={pal.colors.text}
progressViewOffset={headerOffset}
/>
}
contentContainerStyle={{
minHeight: Dimensions.get('window').height * 1.5,
}}
style={{paddingTop: headerOffset}}
onScroll={onScroll != null ? scrollHandler : undefined}
scrollEventThrottle={scrollEventThrottle}
indicatorStyle={theme.colorScheme === 'dark' ? 'white' : 'black'}
removeClippedSubviews={true}
contentOffset={{x: 0, y: headerOffset * -1}}
// @ts-ignore our .web version only -prf
desktopFixedHeight
onEndReached={onEndReached}
/>
</View>
)
}
const styles = StyleSheet.create({
item: {
paddingHorizontal: 18,
paddingVertical: 4,
},
})

View File

@ -11,6 +11,7 @@ import {CenteredView} from '../com/util/Views'
import {ScreenHider} from 'view/com/util/moderation/ScreenHider'
import {Feed} from 'view/com/posts/Feed'
import {ProfileLists} from '../com/lists/ProfileLists'
import {ProfileFeedgens} from '../com/feeds/ProfileFeedgens'
import {useStores} from 'state/index'
import {ProfileHeader} from '../com/profile/ProfileHeader'
import {PagerWithHeader} from 'view/com/pager/PagerWithHeader'
@ -140,7 +141,7 @@ function ProfileScreenLoaded({
const isMe = profile.did === currentAccount?.did
const showLikesTab = isMe
const showFeedsTab = isMe || extraInfoQuery.data?.hasFeeds
const showFeedsTab = isMe || extraInfoQuery.data?.hasFeedgens
const showListsTab = isMe || extraInfoQuery.data?.hasLists
const sectionTitles = useMemo<string[]>(() => {
return [
@ -267,7 +268,7 @@ function ProfileScreenLoaded({
: null}
{showFeedsTab
? ({onScroll, headerHeight, scrollElRef}) => (
<ProfileLists // TODO put feeds here, using this temporarily to avoid bugs
<ProfileFeedgens
did={profile.did}
scrollElRef={scrollElRef}
onScroll={onScroll}