Profile cleanup (react-query refactor) (#1891)

* Only fetch profile tab content when focused

* Fix keys

* Add missing behaviors to post tabs

* Delete old profile mobx model

src/state/models/content/profile.ts

@@ -1,306 +0,0 @@
-import {makeAutoObservable, runInAction} from 'mobx'
-import {
-  AtUri,
-  ComAtprotoLabelDefs,
-  AppBskyGraphDefs,
-  AppBskyActorGetProfile as GetProfile,
-  AppBskyActorProfile,
-  RichText,
-  moderateProfile,
-  ProfileModeration,
-} from '@atproto/api'
-import {RootStoreModel} from '../root-store'
-import * as apilib from 'lib/api/index'
-import {cleanError} from 'lib/strings/errors'
-import {FollowState} from '../cache/my-follows'
-import {Image as RNImage} from 'react-native-image-crop-picker'
-import {track} from 'lib/analytics/analytics'
-import {logger} from '#/logger'
-
-export class ProfileViewerModel {
-  muted?: boolean
-  mutedByList?: AppBskyGraphDefs.ListViewBasic
-  following?: string
-  followedBy?: string
-  blockedBy?: boolean
-  blocking?: string
-  blockingByList?: AppBskyGraphDefs.ListViewBasic;
-  [key: string]: unknown
-
-  constructor() {
-    makeAutoObservable(this)
-  }
-}
-
-export class ProfileModel {
-  // state
-  isLoading = false
-  isRefreshing = false
-  hasLoaded = false
-  error = ''
-  params: GetProfile.QueryParams
-
-  // data
-  did: string = ''
-  handle: string = ''
-  creator: string = ''
-  displayName?: string = ''
-  description?: string = ''
-  avatar?: string = ''
-  banner?: string = ''
-  followersCount: number = 0
-  followsCount: number = 0
-  postsCount: number = 0
-  labels?: ComAtprotoLabelDefs.Label[] = undefined
-  viewer = new ProfileViewerModel();
-  [key: string]: unknown
-
-  // added data
-  descriptionRichText?: RichText = new RichText({text: ''})
-
-  constructor(
-    public rootStore: RootStoreModel,
-    params: GetProfile.QueryParams,
-  ) {
-    makeAutoObservable(
-      this,
-      {
-        rootStore: false,
-        params: false,
-      },
-      {autoBind: true},
-    )
-    this.params = params
-  }
-
-  get hasContent() {
-    return this.did !== ''
-  }
-
-  get hasError() {
-    return this.error !== ''
-  }
-
-  get isEmpty() {
-    return this.hasLoaded && !this.hasContent
-  }
-
-  get moderation(): ProfileModeration {
-    return moderateProfile(this, this.rootStore.preferences.moderationOpts)
-  }
-
-  // public api
-  // =
-
-  async setup() {
-    const precache = await this.rootStore.profiles.cache.get(this.params.actor)
-    if (precache) {
-      await this._loadWithCache(precache)
-    } else {
-      await this._load()
-    }
-  }
-
-  async refresh() {
-    await this._load(true)
-  }
-
-  async toggleFollowing() {
-    if (!this.rootStore.me.did) {
-      throw new Error('Not logged in')
-    }
-
-    const follows = this.rootStore.me.follows
-    const followUri =
-      (await follows.fetchFollowState(this.did)) === FollowState.Following
-        ? follows.getFollowUri(this.did)
-        : undefined
-
-    // guard against this view getting out of sync with the follows cache
-    if (followUri !== this.viewer.following) {
-      this.viewer.following = followUri
-      return
-    }
-
-    if (followUri) {
-      // unfollow
-      await this.rootStore.agent.deleteFollow(followUri)
-      runInAction(() => {
-        this.followersCount--
-        this.viewer.following = undefined
-        this.rootStore.me.follows.removeFollow(this.did)
-      })
-      track('Profile:Unfollow', {
-        username: this.handle,
-      })
-    } else {
-      // follow
-      const res = await this.rootStore.agent.follow(this.did)
-      runInAction(() => {
-        this.followersCount++
-        this.viewer.following = res.uri
-        this.rootStore.me.follows.hydrate(this.did, this)
-      })
-      track('Profile:Follow', {
-        username: this.handle,
-      })
-    }
-  }
-
-  async updateProfile(
-    updates: AppBskyActorProfile.Record,
-    newUserAvatar: RNImage | undefined | null,
-    newUserBanner: RNImage | undefined | null,
-  ) {
-    await this.rootStore.agent.upsertProfile(async existing => {
-      existing = existing || {}
-      existing.displayName = updates.displayName
-      existing.description = updates.description
-      if (newUserAvatar) {
-        const res = await apilib.uploadBlob(
-          this.rootStore.agent,
-          newUserAvatar.path,
-          newUserAvatar.mime,
-        )
-        existing.avatar = res.data.blob
-      } else if (newUserAvatar === null) {
-        existing.avatar = undefined
-      }
-      if (newUserBanner) {
-        const res = await apilib.uploadBlob(
-          this.rootStore.agent,
-          newUserBanner.path,
-          newUserBanner.mime,
-        )
-        existing.banner = res.data.blob
-      } else if (newUserBanner === null) {
-        existing.banner = undefined
-      }
-      return existing
-    })
-    await this.rootStore.me.load()
-    await this.refresh()
-  }
-
-  async muteAccount() {
-    await this.rootStore.agent.mute(this.did)
-    this.viewer.muted = true
-    await this.refresh()
-  }
-
-  async unmuteAccount() {
-    await this.rootStore.agent.unmute(this.did)
-    this.viewer.muted = false
-    await this.refresh()
-  }
-
-  async blockAccount() {
-    const res = await this.rootStore.agent.app.bsky.graph.block.create(
-      {
-        repo: this.rootStore.me.did,
-      },
-      {
-        subject: this.did,
-        createdAt: new Date().toISOString(),
-      },
-    )
-    this.viewer.blocking = res.uri
-    await this.refresh()
-  }
-
-  async unblockAccount() {
-    if (!this.viewer.blocking) {
-      return
-    }
-    const {rkey} = new AtUri(this.viewer.blocking)
-    await this.rootStore.agent.app.bsky.graph.block.delete({
-      repo: this.rootStore.me.did,
-      rkey,
-    })
-    this.viewer.blocking = undefined
-    await this.refresh()
-  }
-
-  // state transitions
-  // =
-
-  _xLoading(isRefreshing = false) {
-    this.isLoading = true
-    this.isRefreshing = isRefreshing
-    this.error = ''
-  }
-
-  _xIdle(err?: any) {
-    this.isLoading = false
-    this.isRefreshing = false
-    this.hasLoaded = true
-    this.error = cleanError(err)
-    if (err) {
-      logger.error('Failed to fetch profile', {error: err})
-    }
-  }
-
-  // loader functions
-  // =
-
-  async _load(isRefreshing = false) {
-    this._xLoading(isRefreshing)
-    try {
-      const res = await this.rootStore.agent.getProfile(this.params)
-      this.rootStore.profiles.overwrite(this.params.actor, res)
-      if (res.data.handle) {
-        this.rootStore.handleResolutions.cache.set(
-          res.data.handle,
-          res.data.did,
-        )
-      }
-      this._replaceAll(res)
-      await this._createRichText()
-      this._xIdle()
-    } catch (e: any) {
-      this._xIdle(e)
-    }
-  }
-
-  async _loadWithCache(precache: GetProfile.Response) {
-    // use cached value
-    this._replaceAll(precache)
-    await this._createRichText()
-    this._xIdle()
-
-    // fetch latest
-    try {
-      const res = await this.rootStore.agent.getProfile(this.params)
-      this.rootStore.profiles.overwrite(this.params.actor, res) // cache invalidation
-      this._replaceAll(res)
-      await this._createRichText()
-    } catch (e: any) {
-      this._xIdle(e)
-    }
-  }
-
-  _replaceAll(res: GetProfile.Response) {
-    this.did = res.data.did
-    this.handle = res.data.handle
-    this.displayName = res.data.displayName
-    this.description = res.data.description
-    this.avatar = res.data.avatar
-    this.banner = res.data.banner
-    this.followersCount = res.data.followersCount || 0
-    this.followsCount = res.data.followsCount || 0
-    this.postsCount = res.data.postsCount || 0
-    this.labels = res.data.labels
-    if (res.data.viewer) {
-      Object.assign(this.viewer, res.data.viewer)
-    }
-    this.rootStore.me.follows.hydrate(this.did, res.data)
-  }
-
-  async _createRichText() {
-    this.descriptionRichText = new RichText(
-      {text: this.description || ''},
-      {cleanNewlines: true},
-    )
-    await this.descriptionRichText.detectFacets(this.rootStore.agent)
-  }
-}

src/state/queries/profile-feedgens.ts

@@ -7,8 +7,12 @@ type RQPageParam = string | undefined
 
 export const RQKEY = (did: string) => ['profile-feedgens', did]
 
-export function useProfileFeedgensQuery(did: string) {
+export function useProfileFeedgensQuery(
+  did: string,
+  opts?: {enabled?: boolean},
+) {
   const {agent} = useSession()
+  const enabled = opts?.enabled !== false
   return useInfiniteQuery<
     AppBskyFeedGetActorFeeds.OutputSchema,
     Error,
@@ -27,5 +31,6 @@ export function useProfileFeedgensQuery(did: string) {
     },
     initialPageParam: undefined,
     getNextPageParam: lastPage => lastPage.cursor,
+    enabled,
   })
 }

src/state/queries/profile-lists.ts

@@ -7,8 +7,9 @@ type RQPageParam = string | undefined
 
 export const RQKEY = (did: string) => ['profile-lists', did]
 
-export function useProfileListsQuery(did: string) {
+export function useProfileListsQuery(did: string, opts?: {enabled?: boolean}) {
   const {agent} = useSession()
+  const enabled = opts?.enabled !== false
   return useInfiniteQuery<
     AppBskyGraphGetLists.OutputSchema,
     Error,
@@ -27,5 +28,6 @@ export function useProfileListsQuery(did: string) {
     },
     initialPageParam: undefined,
     getNextPageParam: lastPage => lastPage.cursor,
+    enabled,
   })
 }

src/view/com/feeds/ProfileFeedgens.tsx

@@ -35,6 +35,7 @@ export function ProfileFeedgens({
   onScroll,
   scrollEventThrottle,
   headerOffset,
+  enabled,
   style,
   testID,
 }: {
@@ -43,12 +44,14 @@ export function ProfileFeedgens({
   onScroll?: OnScrollHandler
   scrollEventThrottle?: number
   headerOffset: number
+  enabled?: boolean
   style?: StyleProp<ViewStyle>
   testID?: string
 }) {
   const pal = usePalette('default')
   const theme = useTheme()
   const [isPTRing, setIsPTRing] = React.useState(false)
+  const opts = React.useMemo(() => ({enabled}), [enabled])
   const {
     data,
     isFetching,
@@ -58,7 +61,7 @@ export function ProfileFeedgens({
     isError,
     error,
     refetch,
-  } = useProfileFeedgensQuery(did)
+  } = useProfileFeedgensQuery(did, opts)
   const isEmpty = !isFetching && !data?.pages[0]?.feeds.length
   const {data: preferences} = usePreferencesQuery()
 
@@ -163,7 +166,7 @@ export function ProfileFeedgens({
         testID={testID ? `${testID}-flatlist` : undefined}
         ref={scrollElRef}
         data={items}
-        keyExtractor={(item: any) => item._reactKey}
+        keyExtractor={(item: any) => item._reactKey || item.uri}
         renderItem={renderItemInner}
         refreshControl={
           <RefreshControl

src/view/com/lists/ProfileLists.tsx

@@ -34,6 +34,7 @@ export function ProfileLists({
   onScroll,
   scrollEventThrottle,
   headerOffset,
+  enabled,
   style,
   testID,
 }: {
@@ -42,6 +43,7 @@ export function ProfileLists({
   onScroll?: OnScrollHandler
   scrollEventThrottle?: number
   headerOffset: number
+  enabled?: boolean
   style?: StyleProp<ViewStyle>
   testID?: string
 }) {
@@ -49,6 +51,7 @@ export function ProfileLists({
   const theme = useTheme()
   const {track} = useAnalytics()
   const [isPTRing, setIsPTRing] = React.useState(false)
+  const opts = React.useMemo(() => ({enabled}), [enabled])
   const {
     data,
     isFetching,
@@ -58,7 +61,7 @@ export function ProfileLists({
     isError,
     error,
     refetch,
-  } = useProfileListsQuery(did)
+  } = useProfileListsQuery(did, opts)
   const isEmpty = !isFetching && !data?.pages[0]?.lists.length
 
   const items = React.useMemo(() => {

src/view/com/pager/PagerWithHeader.tsx

@@ -24,6 +24,7 @@ const SCROLLED_DOWN_LIMIT = 200
 
 interface PagerWithHeaderChildParams {
   headerHeight: number
+  isFocused: boolean
   onScroll: OnScrollHandler
   isScrolledDown: boolean
   scrollElRef: React.MutableRefObject<FlatList<any> | ScrollView | null>
@@ -202,6 +203,7 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
                 <PagerItem
                   headerHeight={headerHeight}
                   isReady={isReady}
+                  isFocused={i === currentPage}
                   isScrolledDown={isScrolledDown}
                   onScrollWorklet={i === currentPage ? onScrollWorklet : noop}
                   registerRef={(r: AnimatedRef<any>) => registerRef(r, i)}
@@ -218,12 +220,14 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
 function PagerItem({
   headerHeight,
   isReady,
+  isFocused,
   isScrolledDown,
   onScrollWorklet,
   renderTab,
   registerRef,
 }: {
   headerHeight: number
+  isFocused: boolean
   isReady: boolean
   isScrolledDown: boolean
   registerRef: (scrollRef: AnimatedRef<any>) => void
@@ -244,6 +248,7 @@ function PagerItem({
 
   return renderTab({
     headerHeight,
+    isFocused,
     isScrolledDown,
     onScroll: scrollHandler,
     scrollElRef: scrollElRef as React.MutableRefObject<

src/view/screens/Profile.tsx

@@ -31,8 +31,11 @@ import {useProfileShadow} from '#/state/cache/profile-shadow'
 import {useSession} from '#/state/session'
 import {useModerationOpts} from '#/state/queries/preferences'
 import {useProfileExtraInfoQuery} from '#/state/queries/profile-extra-info'
+import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed'
 import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell'
 import {cleanError} from '#/lib/strings/errors'
+import {LoadLatestBtn} from '../com/util/load-latest/LoadLatestBtn'
+import {useQueryClient} from '@tanstack/react-query'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'Profile'>
 export const ProfileScreen = withAuthRequired(function ProfileScreenImpl({
@@ -224,67 +227,79 @@ function ProfileScreenLoaded({
         items={sectionTitles}
         onPageSelected={onPageSelected}
         renderHeader={renderHeader}>
-        {({onScroll, headerHeight, isScrolledDown, scrollElRef}) => (
+        {({onScroll, headerHeight, isFocused, isScrolledDown, scrollElRef}) => (
           <FeedSection
             ref={null}
             feed={`author|${profile.did}|posts_no_replies`}
             onScroll={onScroll}
             headerHeight={headerHeight}
+            isFocused={isFocused}
             isScrolledDown={isScrolledDown}
             scrollElRef={scrollElRef}
           />
         )}
-        {({onScroll, headerHeight, isScrolledDown, scrollElRef}) => (
+        {({onScroll, headerHeight, isFocused, isScrolledDown, scrollElRef}) => (
           <FeedSection
             ref={null}
             feed={`author|${profile.did}|posts_with_replies`}
             onScroll={onScroll}
             headerHeight={headerHeight}
+            isFocused={isFocused}
             isScrolledDown={isScrolledDown}
             scrollElRef={scrollElRef}
           />
         )}
-        {({onScroll, headerHeight, isScrolledDown, scrollElRef}) => (
+        {({onScroll, headerHeight, isFocused, isScrolledDown, scrollElRef}) => (
           <FeedSection
             ref={null}
             feed={`author|${profile.did}|posts_with_media`}
             onScroll={onScroll}
             headerHeight={headerHeight}
+            isFocused={isFocused}
             isScrolledDown={isScrolledDown}
             scrollElRef={scrollElRef}
           />
         )}
         {showLikesTab
-          ? ({onScroll, headerHeight, isScrolledDown, scrollElRef}) => (
+          ? ({
+              onScroll,
+              headerHeight,
+              isFocused,
+              isScrolledDown,
+              scrollElRef,
+            }) => (
               <FeedSection
                 ref={null}
                 feed={`likes|${profile.did}`}
                 onScroll={onScroll}
                 headerHeight={headerHeight}
+                isFocused={isFocused}
                 isScrolledDown={isScrolledDown}
                 scrollElRef={scrollElRef}
               />
             )
           : null}
         {showFeedsTab
-          ? ({onScroll, headerHeight, scrollElRef}) => (
+          ? ({onScroll, headerHeight, isFocused, scrollElRef}) => (
               <ProfileFeedgens
                 did={profile.did}
                 scrollElRef={scrollElRef}
                 onScroll={onScroll}
                 scrollEventThrottle={1}
                 headerOffset={headerHeight}
+                enabled={isFocused}
               />
             )
           : null}
         {showListsTab
-          ? ({onScroll, headerHeight, scrollElRef}) => (
+          ? ({onScroll, headerHeight, isFocused, scrollElRef}) => (
               <ProfileLists
                 did={profile.did}
                 scrollElRef={scrollElRef}
                 onScroll={onScroll}
                 scrollEventThrottle={1}
                 headerOffset={headerHeight}
+                enabled={isFocused}
               />
             )
           : null}
@@ -305,26 +320,23 @@ interface FeedSectionProps {
   feed: FeedDescriptor
   onScroll: OnScrollHandler
   headerHeight: number
+  isFocused: boolean
   isScrolledDown: boolean
   scrollElRef: any /* TODO */
 }
 const FeedSection = React.forwardRef<SectionRef, FeedSectionProps>(
   function FeedSectionImpl(
-    {
+    {feed, onScroll, headerHeight, isFocused, isScrolledDown, scrollElRef},
-      feed,
-      onScroll,
-      headerHeight,
-      // isScrolledDown,
-      scrollElRef,
-    },
     ref,
   ) {
-    // const hasNew = false //TODO feed.hasNewLatest && !feed.isRefreshing
+    const queryClient = useQueryClient()
+    const [hasNew, setHasNew] = React.useState(false)
 
     const onScrollToTop = React.useCallback(() => {
       scrollElRef.current?.scrollToOffset({offset: -headerHeight})
-      // feed.refresh() TODO
+      queryClient.invalidateQueries({queryKey: FEED_RQKEY(feed)})
-    }, [scrollElRef, headerHeight])
+      setHasNew(false)
+    }, [scrollElRef, headerHeight, queryClient, feed, setHasNew])
     React.useImperativeHandle(ref, () => ({
       scrollToTop: onScrollToTop,
     }))
@@ -339,11 +351,20 @@ const FeedSection = React.forwardRef<SectionRef, FeedSectionProps>(
           testID="postsFeed"
           feed={feed}
           scrollElRef={scrollElRef}
+          onHasNew={setHasNew}
           onScroll={onScroll}
           scrollEventThrottle={1}
           renderEmptyState={renderPostsEmpty}
           headerOffset={headerHeight}
+          enabled={isFocused}
         />
+        {(isScrolledDown || hasNew) && (
+          <LoadLatestBtn
+            onPress={onScrollToTop}
+            label="Load new posts"
+            showIndicator={hasNew}
+          />
+        )}
       </View>
     )
   },