Implement "scroll to top" for profile tabs (#1973)
* Hook up scroll to top handlers * Scroll and invalidate Feeds/Lists * Fix index calc due to conditional tabs * Reorder lines for clarityzio/stable
parent
3de1d556a9
commit
08333002cc
|
@ -8,13 +8,14 @@ import {
|
||||||
View,
|
View,
|
||||||
ViewStyle,
|
ViewStyle,
|
||||||
} from 'react-native'
|
} from 'react-native'
|
||||||
|
import {useQueryClient} from '@tanstack/react-query'
|
||||||
import {FlatList} from '../util/Views'
|
import {FlatList} from '../util/Views'
|
||||||
import {FeedSourceCardLoaded} from './FeedSourceCard'
|
import {FeedSourceCardLoaded} from './FeedSourceCard'
|
||||||
import {ErrorMessage} from '../util/error/ErrorMessage'
|
import {ErrorMessage} from '../util/error/ErrorMessage'
|
||||||
import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
|
import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
|
||||||
import {Text} from '../util/text/Text'
|
import {Text} from '../util/text/Text'
|
||||||
import {usePalette} from 'lib/hooks/usePalette'
|
import {usePalette} from 'lib/hooks/usePalette'
|
||||||
import {useProfileFeedgensQuery} from '#/state/queries/profile-feedgens'
|
import {useProfileFeedgensQuery, RQKEY} from '#/state/queries/profile-feedgens'
|
||||||
import {OnScrollHandler} from '#/lib/hooks/useOnMainScroll'
|
import {OnScrollHandler} from '#/lib/hooks/useOnMainScroll'
|
||||||
import {logger} from '#/logger'
|
import {logger} from '#/logger'
|
||||||
import {Trans} from '@lingui/macro'
|
import {Trans} from '@lingui/macro'
|
||||||
|
@ -29,7 +30,26 @@ const EMPTY = {_reactKey: '__empty__'}
|
||||||
const ERROR_ITEM = {_reactKey: '__error__'}
|
const ERROR_ITEM = {_reactKey: '__error__'}
|
||||||
const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'}
|
const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'}
|
||||||
|
|
||||||
export function ProfileFeedgens({
|
interface SectionRef {
|
||||||
|
scrollToTop: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ProfileFeedgensProps {
|
||||||
|
did: string
|
||||||
|
scrollElRef: MutableRefObject<FlatList<any> | null>
|
||||||
|
onScroll?: OnScrollHandler
|
||||||
|
scrollEventThrottle?: number
|
||||||
|
headerOffset: number
|
||||||
|
enabled?: boolean
|
||||||
|
style?: StyleProp<ViewStyle>
|
||||||
|
testID?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ProfileFeedgens = React.forwardRef<
|
||||||
|
SectionRef,
|
||||||
|
ProfileFeedgensProps
|
||||||
|
>(function ProfileFeedgensImpl(
|
||||||
|
{
|
||||||
did,
|
did,
|
||||||
scrollElRef,
|
scrollElRef,
|
||||||
onScroll,
|
onScroll,
|
||||||
|
@ -38,16 +58,9 @@ export function ProfileFeedgens({
|
||||||
enabled,
|
enabled,
|
||||||
style,
|
style,
|
||||||
testID,
|
testID,
|
||||||
}: {
|
},
|
||||||
did: string
|
ref,
|
||||||
scrollElRef?: MutableRefObject<FlatList<any> | null>
|
) {
|
||||||
onScroll?: OnScrollHandler
|
|
||||||
scrollEventThrottle?: number
|
|
||||||
headerOffset: number
|
|
||||||
enabled?: boolean
|
|
||||||
style?: StyleProp<ViewStyle>
|
|
||||||
testID?: string
|
|
||||||
}) {
|
|
||||||
const pal = usePalette('default')
|
const pal = usePalette('default')
|
||||||
const theme = useTheme()
|
const theme = useTheme()
|
||||||
const [isPTRing, setIsPTRing] = React.useState(false)
|
const [isPTRing, setIsPTRing] = React.useState(false)
|
||||||
|
@ -88,6 +101,17 @@ export function ProfileFeedgens({
|
||||||
// events
|
// events
|
||||||
// =
|
// =
|
||||||
|
|
||||||
|
const queryClient = useQueryClient()
|
||||||
|
|
||||||
|
const onScrollToTop = React.useCallback(() => {
|
||||||
|
scrollElRef.current?.scrollToOffset({offset: -headerOffset})
|
||||||
|
queryClient.invalidateQueries({queryKey: RQKEY(did)})
|
||||||
|
}, [scrollElRef, queryClient, headerOffset, did])
|
||||||
|
|
||||||
|
React.useImperativeHandle(ref, () => ({
|
||||||
|
scrollToTop: onScrollToTop,
|
||||||
|
}))
|
||||||
|
|
||||||
const onRefresh = React.useCallback(async () => {
|
const onRefresh = React.useCallback(async () => {
|
||||||
setIsPTRing(true)
|
setIsPTRing(true)
|
||||||
try {
|
try {
|
||||||
|
@ -192,7 +216,7 @@ export function ProfileFeedgens({
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
}
|
})
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
item: {
|
item: {
|
||||||
|
|
|
@ -8,6 +8,7 @@ import {
|
||||||
View,
|
View,
|
||||||
ViewStyle,
|
ViewStyle,
|
||||||
} from 'react-native'
|
} from 'react-native'
|
||||||
|
import {useQueryClient} from '@tanstack/react-query'
|
||||||
import {FlatList} from '../util/Views'
|
import {FlatList} from '../util/Views'
|
||||||
import {ListCard} from './ListCard'
|
import {ListCard} from './ListCard'
|
||||||
import {ErrorMessage} from '../util/error/ErrorMessage'
|
import {ErrorMessage} from '../util/error/ErrorMessage'
|
||||||
|
@ -15,7 +16,7 @@ import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
|
||||||
import {Text} from '../util/text/Text'
|
import {Text} from '../util/text/Text'
|
||||||
import {useAnalytics} from 'lib/analytics/analytics'
|
import {useAnalytics} from 'lib/analytics/analytics'
|
||||||
import {usePalette} from 'lib/hooks/usePalette'
|
import {usePalette} from 'lib/hooks/usePalette'
|
||||||
import {useProfileListsQuery} from '#/state/queries/profile-lists'
|
import {useProfileListsQuery, RQKEY} from '#/state/queries/profile-lists'
|
||||||
import {OnScrollHandler} from '#/lib/hooks/useOnMainScroll'
|
import {OnScrollHandler} from '#/lib/hooks/useOnMainScroll'
|
||||||
import {logger} from '#/logger'
|
import {logger} from '#/logger'
|
||||||
import {Trans} from '@lingui/macro'
|
import {Trans} from '@lingui/macro'
|
||||||
|
@ -28,7 +29,24 @@ const EMPTY = {_reactKey: '__empty__'}
|
||||||
const ERROR_ITEM = {_reactKey: '__error__'}
|
const ERROR_ITEM = {_reactKey: '__error__'}
|
||||||
const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'}
|
const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'}
|
||||||
|
|
||||||
export function ProfileLists({
|
interface SectionRef {
|
||||||
|
scrollToTop: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ProfileListsProps {
|
||||||
|
did: string
|
||||||
|
scrollElRef: MutableRefObject<FlatList<any> | null>
|
||||||
|
onScroll?: OnScrollHandler
|
||||||
|
scrollEventThrottle?: number
|
||||||
|
headerOffset: number
|
||||||
|
enabled?: boolean
|
||||||
|
style?: StyleProp<ViewStyle>
|
||||||
|
testID?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
|
||||||
|
function ProfileListsImpl(
|
||||||
|
{
|
||||||
did,
|
did,
|
||||||
scrollElRef,
|
scrollElRef,
|
||||||
onScroll,
|
onScroll,
|
||||||
|
@ -37,16 +55,9 @@ export function ProfileLists({
|
||||||
enabled,
|
enabled,
|
||||||
style,
|
style,
|
||||||
testID,
|
testID,
|
||||||
}: {
|
},
|
||||||
did: string
|
ref,
|
||||||
scrollElRef?: MutableRefObject<FlatList<any> | null>
|
) {
|
||||||
onScroll?: OnScrollHandler
|
|
||||||
scrollEventThrottle?: number
|
|
||||||
headerOffset: number
|
|
||||||
enabled?: boolean
|
|
||||||
style?: StyleProp<ViewStyle>
|
|
||||||
testID?: string
|
|
||||||
}) {
|
|
||||||
const pal = usePalette('default')
|
const pal = usePalette('default')
|
||||||
const theme = useTheme()
|
const theme = useTheme()
|
||||||
const {track} = useAnalytics()
|
const {track} = useAnalytics()
|
||||||
|
@ -92,6 +103,17 @@ export function ProfileLists({
|
||||||
// events
|
// events
|
||||||
// =
|
// =
|
||||||
|
|
||||||
|
const queryClient = useQueryClient()
|
||||||
|
|
||||||
|
const onScrollToTop = React.useCallback(() => {
|
||||||
|
scrollElRef.current?.scrollToOffset({offset: -headerOffset})
|
||||||
|
queryClient.invalidateQueries({queryKey: RQKEY(did)})
|
||||||
|
}, [scrollElRef, queryClient, headerOffset, did])
|
||||||
|
|
||||||
|
React.useImperativeHandle(ref, () => ({
|
||||||
|
scrollToTop: onScrollToTop,
|
||||||
|
}))
|
||||||
|
|
||||||
const onRefresh = React.useCallback(async () => {
|
const onRefresh = React.useCallback(async () => {
|
||||||
track('Lists:onRefresh')
|
track('Lists:onRefresh')
|
||||||
setIsPTRing(true)
|
setIsPTRing(true)
|
||||||
|
@ -135,7 +157,10 @@ export function ProfileLists({
|
||||||
)
|
)
|
||||||
} else if (item === ERROR_ITEM) {
|
} else if (item === ERROR_ITEM) {
|
||||||
return (
|
return (
|
||||||
<ErrorMessage message={cleanError(error)} onPressTryAgain={refetch} />
|
<ErrorMessage
|
||||||
|
message={cleanError(error)}
|
||||||
|
onPressTryAgain={refetch}
|
||||||
|
/>
|
||||||
)
|
)
|
||||||
} else if (item === LOAD_MORE_ERROR_ITEM) {
|
} else if (item === LOAD_MORE_ERROR_ITEM) {
|
||||||
return (
|
return (
|
||||||
|
@ -195,7 +220,8 @@ export function ProfileLists({
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
}
|
},
|
||||||
|
)
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
item: {
|
item: {
|
||||||
|
|
|
@ -140,6 +140,12 @@ function ProfileScreenLoaded({
|
||||||
const viewSelectorRef = React.useRef<ViewSelectorHandle>(null)
|
const viewSelectorRef = React.useRef<ViewSelectorHandle>(null)
|
||||||
const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
|
const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
|
||||||
const extraInfoQuery = useProfileExtraInfoQuery(profile.did)
|
const extraInfoQuery = useProfileExtraInfoQuery(profile.did)
|
||||||
|
const postsSectionRef = React.useRef<SectionRef>(null)
|
||||||
|
const repliesSectionRef = React.useRef<SectionRef>(null)
|
||||||
|
const mediaSectionRef = React.useRef<SectionRef>(null)
|
||||||
|
const likesSectionRef = React.useRef<SectionRef>(null)
|
||||||
|
const feedsSectionRef = React.useRef<SectionRef>(null)
|
||||||
|
const listsSectionRef = React.useRef<SectionRef>(null)
|
||||||
|
|
||||||
useSetTitle(combinedDisplayName(profile))
|
useSetTitle(combinedDisplayName(profile))
|
||||||
|
|
||||||
|
@ -163,6 +169,23 @@ function ProfileScreenLoaded({
|
||||||
].filter(Boolean) as string[]
|
].filter(Boolean) as string[]
|
||||||
}, [showLikesTab, showFeedsTab, showListsTab])
|
}, [showLikesTab, showFeedsTab, showListsTab])
|
||||||
|
|
||||||
|
let nextIndex = 0
|
||||||
|
const postsIndex = nextIndex++
|
||||||
|
const repliesIndex = nextIndex++
|
||||||
|
const mediaIndex = nextIndex++
|
||||||
|
let likesIndex: number | null = null
|
||||||
|
if (showLikesTab) {
|
||||||
|
likesIndex = nextIndex++
|
||||||
|
}
|
||||||
|
let feedsIndex: number | null = null
|
||||||
|
if (showFeedsTab) {
|
||||||
|
feedsIndex = nextIndex++
|
||||||
|
}
|
||||||
|
let listsIndex: number | null = null
|
||||||
|
if (showListsTab) {
|
||||||
|
listsIndex = nextIndex++
|
||||||
|
}
|
||||||
|
|
||||||
useFocusEffect(
|
useFocusEffect(
|
||||||
React.useCallback(() => {
|
React.useCallback(() => {
|
||||||
setMinimalShellMode(false)
|
setMinimalShellMode(false)
|
||||||
|
@ -202,6 +225,25 @@ function ProfileScreenLoaded({
|
||||||
[setCurrentPage],
|
[setCurrentPage],
|
||||||
)
|
)
|
||||||
|
|
||||||
|
const onCurrentPageSelected = React.useCallback(
|
||||||
|
(index: number) => {
|
||||||
|
if (index === postsIndex) {
|
||||||
|
postsSectionRef.current?.scrollToTop()
|
||||||
|
} else if (index === repliesIndex) {
|
||||||
|
repliesSectionRef.current?.scrollToTop()
|
||||||
|
} else if (index === mediaIndex) {
|
||||||
|
mediaSectionRef.current?.scrollToTop()
|
||||||
|
} else if (index === likesIndex) {
|
||||||
|
likesSectionRef.current?.scrollToTop()
|
||||||
|
} else if (index === feedsIndex) {
|
||||||
|
feedsSectionRef.current?.scrollToTop()
|
||||||
|
} else if (index === listsIndex) {
|
||||||
|
listsSectionRef.current?.scrollToTop()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[postsIndex, repliesIndex, mediaIndex, likesIndex, feedsIndex, listsIndex],
|
||||||
|
)
|
||||||
|
|
||||||
// rendering
|
// rendering
|
||||||
// =
|
// =
|
||||||
|
|
||||||
|
@ -225,10 +267,11 @@ function ProfileScreenLoaded({
|
||||||
isHeaderReady={true}
|
isHeaderReady={true}
|
||||||
items={sectionTitles}
|
items={sectionTitles}
|
||||||
onPageSelected={onPageSelected}
|
onPageSelected={onPageSelected}
|
||||||
|
onCurrentPageSelected={onCurrentPageSelected}
|
||||||
renderHeader={renderHeader}>
|
renderHeader={renderHeader}>
|
||||||
{({onScroll, headerHeight, isFocused, isScrolledDown, scrollElRef}) => (
|
{({onScroll, headerHeight, isFocused, isScrolledDown, scrollElRef}) => (
|
||||||
<FeedSection
|
<FeedSection
|
||||||
ref={null}
|
ref={postsSectionRef}
|
||||||
feed={`author|${profile.did}|posts_no_replies`}
|
feed={`author|${profile.did}|posts_no_replies`}
|
||||||
onScroll={onScroll}
|
onScroll={onScroll}
|
||||||
headerHeight={headerHeight}
|
headerHeight={headerHeight}
|
||||||
|
@ -241,7 +284,7 @@ function ProfileScreenLoaded({
|
||||||
)}
|
)}
|
||||||
{({onScroll, headerHeight, isFocused, isScrolledDown, scrollElRef}) => (
|
{({onScroll, headerHeight, isFocused, isScrolledDown, scrollElRef}) => (
|
||||||
<FeedSection
|
<FeedSection
|
||||||
ref={null}
|
ref={repliesSectionRef}
|
||||||
feed={`author|${profile.did}|posts_with_replies`}
|
feed={`author|${profile.did}|posts_with_replies`}
|
||||||
onScroll={onScroll}
|
onScroll={onScroll}
|
||||||
headerHeight={headerHeight}
|
headerHeight={headerHeight}
|
||||||
|
@ -254,7 +297,7 @@ function ProfileScreenLoaded({
|
||||||
)}
|
)}
|
||||||
{({onScroll, headerHeight, isFocused, isScrolledDown, scrollElRef}) => (
|
{({onScroll, headerHeight, isFocused, isScrolledDown, scrollElRef}) => (
|
||||||
<FeedSection
|
<FeedSection
|
||||||
ref={null}
|
ref={mediaSectionRef}
|
||||||
feed={`author|${profile.did}|posts_with_media`}
|
feed={`author|${profile.did}|posts_with_media`}
|
||||||
onScroll={onScroll}
|
onScroll={onScroll}
|
||||||
headerHeight={headerHeight}
|
headerHeight={headerHeight}
|
||||||
|
@ -274,7 +317,7 @@ function ProfileScreenLoaded({
|
||||||
scrollElRef,
|
scrollElRef,
|
||||||
}) => (
|
}) => (
|
||||||
<FeedSection
|
<FeedSection
|
||||||
ref={null}
|
ref={likesSectionRef}
|
||||||
feed={`likes|${profile.did}`}
|
feed={`likes|${profile.did}`}
|
||||||
onScroll={onScroll}
|
onScroll={onScroll}
|
||||||
headerHeight={headerHeight}
|
headerHeight={headerHeight}
|
||||||
|
@ -289,6 +332,7 @@ function ProfileScreenLoaded({
|
||||||
{showFeedsTab
|
{showFeedsTab
|
||||||
? ({onScroll, headerHeight, isFocused, scrollElRef}) => (
|
? ({onScroll, headerHeight, isFocused, scrollElRef}) => (
|
||||||
<ProfileFeedgens
|
<ProfileFeedgens
|
||||||
|
ref={feedsSectionRef}
|
||||||
did={profile.did}
|
did={profile.did}
|
||||||
scrollElRef={
|
scrollElRef={
|
||||||
scrollElRef as React.MutableRefObject<FlatList<any> | null>
|
scrollElRef as React.MutableRefObject<FlatList<any> | null>
|
||||||
|
@ -303,6 +347,7 @@ function ProfileScreenLoaded({
|
||||||
{showListsTab
|
{showListsTab
|
||||||
? ({onScroll, headerHeight, isFocused, scrollElRef}) => (
|
? ({onScroll, headerHeight, isFocused, scrollElRef}) => (
|
||||||
<ProfileLists
|
<ProfileLists
|
||||||
|
ref={listsSectionRef}
|
||||||
did={profile.did}
|
did={profile.did}
|
||||||
scrollElRef={
|
scrollElRef={
|
||||||
scrollElRef as React.MutableRefObject<FlatList<any> | null>
|
scrollElRef as React.MutableRefObject<FlatList<any> | null>
|
||||||
|
|
|
@ -143,8 +143,7 @@ function ProfileListScreenLoaded({
|
||||||
(index: number) => {
|
(index: number) => {
|
||||||
if (index === 0) {
|
if (index === 0) {
|
||||||
feedSectionRef.current?.scrollToTop()
|
feedSectionRef.current?.scrollToTop()
|
||||||
}
|
} else if (index === 1) {
|
||||||
if (index === 1) {
|
|
||||||
aboutSectionRef.current?.scrollToTop()
|
aboutSectionRef.current?.scrollToTop()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue