Add feedgens tab to profile (#1889)

src/state/queries/profile-extra-info.ts

@@ -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,
       }
     },
   })

src/state/queries/profile-feedgens.ts

@@ -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,
+  })
+}

src/view/com/feeds/FeedSourceCard.tsx

@@ -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,
+            name: feed.creatorDid,
-            rkey: new AtUri(info.uri).rkey,
+            rkey: new AtUri(feed.uri).rkey,
           })
-        } else if (info.type === 'list') {
+        } else if (feed.type === 'list') {
           navigation.push('ProfileList', {
-            name: info.creatorDid,
+            name: feed.creatorDid,
-            rkey: new AtUri(info.uri).rkey,
+            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{' '}
+            {feed.type === 'feed' ? 'Feed' : 'List'} by{' '}
-            {sanitizeHandle(info.creatorHandle, '@')}
+            {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}{' '}
+          Liked by {feed.likeCount || 0}{' '}
-          {pluralize(info.likeCount || 0, 'user')}
+          {pluralize(feed.likeCount || 0, 'user')}
         </Text>
       ) : null}
     </Pressable>
   )
-})
+}
 
 const styles = StyleSheet.create({
   container: {

src/view/com/feeds/ProfileFeedgens.tsx

@@ -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,
+  },
+})

src/view/screens/Profile.tsx

@@ -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}