zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

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

Browse source 
* Only fetch profile tab content when focused

* Fix keys

* Add missing behaviors to post tabs

* Delete old profile mobx model
This commit is contained in:
Paul Frazee 2023-11-13 15:12:41 -08:00 • committed by GitHub
parent 47204d9551
commit 0501c2be77
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 60 additions and 327 deletions
Download patch file Download diff file Expand all files Collapse all files

53
src/view/screens/Profile.tsx
View file

@ -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,
// isScrolledDown,
scrollElRef,
},
{feed, onScroll, headerHeight, isFocused, 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
}, [scrollElRef, headerHeight])
queryClient.invalidateQueries({queryKey: FEED_RQKEY(feed)})
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>
)
},