octo/tooot
1
0
Fork 0
mirror of https://github.com/tooot-app/app synced 2025-06-05 22:19:13 +02:00
Code Issues Projects Releases Wiki Activity

Remove custom refresh

Browse Source
This commit is contained in:
Zhiyuan Zheng
2022-05-12 00:04:30 +02:00
parent ee2f23c972
commit 932c816951
3 changed files with 53 additions and 455 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
src/components/Timeline.tsx
View File

@ -1,11 +1,11 @@
import ComponentSeparator from '@components/Separator'
import { useScrollToTop } from '@react-navigation/native'
import { useAppDispatch } from '@root/store'
import { QueryKeyTimeline, useTimelineQuery } from '@utils/queryHooks/timeline'
import {
getInstanceActive,
updateInstanceTimelineLookback
} from '@utils/slices/instancesSlice'
QueryKeyTimeline,
TimelineData,
useTimelineQuery
} from '@utils/queryHooks/timeline'
import { getInstanceActive } from '@utils/slices/instancesSlice'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { RefObject, useCallback, useRef } from 'react'
@ -14,22 +14,12 @@ import {
FlatListProps,
Platform,
RefreshControl,
StyleSheet,
ViewabilityConfigCallbackPairs
StyleSheet
} from 'react-native'
import Animated, {
useAnimatedScrollHandler,
useSharedValue
} from 'react-native-reanimated'
import { InfiniteData, useQueryClient } from 'react-query'
import { useSelector } from 'react-redux'
import TimelineEmpty from './Timeline/Empty'
import TimelineFooter from './Timeline/Footer'
import TimelineRefresh, {
SEPARATION_Y_1,
SEPARATION_Y_2
} from './Timeline/Refresh'
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList)
export interface Props {
flRef?: RefObject<FlatList<any>>
@ -46,17 +36,19 @@ const Timeline: React.FC<Props> = ({
queryKey,
disableRefresh = false,
disableInfinity = false,
lookback,
customProps
}) => {
const { colors } = useTheme()
const queryClient = useQueryClient()
const {
data,
refetch,
isFetching,
isLoading,
fetchPreviousPage,
fetchNextPage,
isFetchingPreviousPage,
isFetchingNextPage
} = useTimelineQuery({
...queryKey[1],
@ -65,6 +57,12 @@ const Timeline: React.FC<Props> = ({
ios: ['dataUpdatedAt', 'isFetching'],
android: ['dataUpdatedAt', 'isFetching', 'isLoading']
}),
getPreviousPageParam: firstPage =>
firstPage?.links?.prev && {
min_id: firstPage.links.prev,
// https://github.com/facebook/react-native/issues/25239
limit: '10'
},
getNextPageParam: lastPage =>
lastPage?.links?.next && {
max_id: lastPage.links.next
@ -93,26 +91,6 @@ const Timeline: React.FC<Props> = ({
)
const flRef = useRef<FlatList>(null)
const scrollY = useSharedValue(0)
const fetchingType = useSharedValue<0 | 1 | 2>(0)
const onScroll = useAnimatedScrollHandler(
{
onScroll: ({ contentOffset: { y } }) => {
scrollY.value = y
},
onEndDrag: ({ contentOffset: { y } }) => {
if (!disableRefresh && !isFetching) {
if (y <= SEPARATION_Y_2) {
fetchingType.value = 2
} else if (y <= SEPARATION_Y_1) {
fetchingType.value = 1
}
}
}
},
[isFetching]
)
const androidRefreshControl = Platform.select({
android: {
@ -128,27 +106,6 @@ const Timeline: React.FC<Props> = ({
}
})
const dispatch = useAppDispatch()
const viewabilityPairs = useRef<ViewabilityConfigCallbackPairs>([
{
viewabilityConfig: {
minimumViewTime: 10,
viewAreaCoveragePercentThreshold: 10
},
onViewableItemsChanged: ({ viewableItems }) => {
lookback &&
dispatch(
updateInstanceTimelineLookback({
[lookback]: {
queryKey,
ids: viewableItems.map(item => item.key).slice(0, 3)
}
})
)
}
}
])
useScrollToTop(flRef)
useSelector(getInstanceActive, (prev, next) => {
if (prev !== next) {
@ -158,43 +115,44 @@ const Timeline: React.FC<Props> = ({
})
return (
<>
<TimelineRefresh
flRef={flRef}
queryKey={queryKey}
scrollY={scrollY}
fetchingType={fetchingType}
disableRefresh={disableRefresh}
/>
<AnimatedFlatList
ref={customFLRef || flRef}
scrollEventThrottle={16}
onScroll={onScroll}
windowSize={7}
data={flattenData}
initialNumToRender={6}
maxToRenderPerBatch={3}
style={styles.flatList}
onEndReached={onEndReached}
onEndReachedThreshold={0.75}
ListFooterComponent={
<TimelineFooter
queryKey={queryKey}
disableInfinity={disableInfinity}
/>
<FlatList
ref={customFLRef || flRef}
scrollEventThrottle={16}
windowSize={7}
data={flattenData}
initialNumToRender={6}
maxToRenderPerBatch={3}
style={styles.flatList}
onEndReached={onEndReached}
onEndReachedThreshold={0.75}
ListFooterComponent={
<TimelineFooter queryKey={queryKey} disableInfinity={disableInfinity} />
}
ListEmptyComponent={<TimelineEmpty queryKey={queryKey} />}
ItemSeparatorComponent={ItemSeparatorComponent}
maintainVisibleContentPosition={{ minIndexForVisible: 0 }}
refreshing={isFetchingPreviousPage}
onRefresh={() => {
if (!disableRefresh && !isFetchingPreviousPage) {
queryClient.setQueryData<InfiniteData<TimelineData> | undefined>(
queryKey,
data => {
if (data?.pages[0] && data.pages[0].body.length === 0) {
return {
pages: data.pages.slice(1),
pageParams: data.pageParams.slice(1)
}
} else {
return data
}
}
)
fetchPreviousPage()
}
ListEmptyComponent={<TimelineEmpty queryKey={queryKey} />}
ItemSeparatorComponent={ItemSeparatorComponent}
maintainVisibleContentPosition={{
minIndexForVisible: 0
}}
{...(lookback && {
viewabilityConfigCallbackPairs: viewabilityPairs.current
})}
{...androidRefreshControl}
{...customProps}
/>
</>
}}
{...androidRefreshControl}
{...customProps}
/>
)
}