tooot/src/components/Timeline.tsx

207 lines
5.3 KiB
TypeScript
Raw Normal View History

2021-01-04 18:29:02 +01:00
import ComponentSeparator from '@components/Separator'
2021-02-27 16:33:54 +01:00
import { useScrollToTop } from '@react-navigation/native'
2021-01-24 02:25:43 +01:00
import { QueryKeyTimeline, useTimelineQuery } from '@utils/queryHooks/timeline'
2022-01-16 23:26:05 +01:00
import {
getInstanceActive,
updateInstanceTimelineLookback
} from '@utils/slices/instancesSlice'
2021-01-04 18:29:02 +01:00
import { StyleConstants } from '@utils/styles/constants'
2021-02-13 13:08:34 +01:00
import { useTheme } from '@utils/styles/ThemeManager'
2021-02-27 16:33:54 +01:00
import React, { RefObject, useCallback, useRef } from 'react'
2021-02-13 13:08:34 +01:00
import {
2021-02-27 16:33:54 +01:00
FlatList,
2021-02-13 13:08:34 +01:00
FlatListProps,
Platform,
RefreshControl,
2022-01-16 23:26:05 +01:00
StyleSheet,
ViewabilityConfigCallbackPairs
2021-02-13 13:08:34 +01:00
} from 'react-native'
import Animated, {
2021-02-27 16:33:54 +01:00
useAnimatedScrollHandler,
useSharedValue
} from 'react-native-reanimated'
2022-01-16 23:26:05 +01:00
import { useDispatch, useSelector } from 'react-redux'
2021-01-24 02:25:43 +01:00
import TimelineEmpty from './Timeline/Empty'
2021-02-27 16:33:54 +01:00
import TimelineFooter from './Timeline/Footer'
import TimelineRefresh, {
SEPARATION_Y_1,
SEPARATION_Y_2
} from './Timeline/Refresh'
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList)
2020-12-19 18:21:37 +01:00
export interface Props {
2021-02-27 16:33:54 +01:00
flRef?: RefObject<FlatList<any>>
queryKey: QueryKeyTimeline
2020-10-31 21:04:46 +01:00
disableRefresh?: boolean
2021-01-01 16:48:16 +01:00
disableInfinity?: boolean
2022-01-16 23:26:05 +01:00
lookback?: Extract<App.Pages, 'Following' | 'Local' | 'LocalPublic'>
2021-02-27 16:33:54 +01:00
customProps: Partial<FlatListProps<any>> &
Pick<FlatListProps<any>, 'renderItem'>
}
2020-10-23 09:22:17 +02:00
const Timeline: React.FC<Props> = ({
2021-02-27 16:33:54 +01:00
flRef: customFLRef,
queryKey,
2021-01-01 16:48:16 +01:00
disableRefresh = false,
2021-01-15 01:15:27 +01:00
disableInfinity = false,
2022-01-16 23:26:05 +01:00
lookback,
2021-01-15 01:15:27 +01:00
customProps
}) => {
2021-02-13 13:08:34 +01:00
const { theme } = useTheme()
const {
data,
2020-12-18 23:58:53 +01:00
refetch,
2021-01-12 00:12:44 +01:00
isFetching,
2021-01-17 22:37:05 +01:00
isLoading,
2020-12-26 12:59:16 +01:00
fetchNextPage,
isFetchingNextPage
2021-01-11 21:36:57 +01:00
} = useTimelineQuery({
2021-02-27 16:33:54 +01:00
...queryKey[1],
2021-01-07 19:13:09 +01:00
options: {
2021-02-27 16:33:54 +01:00
notifyOnChangeProps: Platform.select({
2021-03-04 14:11:08 +01:00
ios: ['dataUpdatedAt', 'isFetching'],
android: ['dataUpdatedAt', 'isFetching', 'isLoading']
2021-02-27 16:33:54 +01:00
}),
2021-02-11 01:33:31 +01:00
getNextPageParam: lastPage =>
2021-03-06 17:55:13 +01:00
lastPage?.links?.next && {
max_id: lastPage.links.next
}
2020-12-21 13:56:04 +01:00
}
})
2021-01-07 19:13:09 +01:00
2021-03-06 17:55:13 +01:00
const flattenData = data?.pages
2022-01-31 00:31:57 +01:00
? data.pages?.flatMap(page => [...page.body])
2021-03-06 17:55:13 +01:00
: []
2020-12-12 12:49:29 +01:00
2020-12-21 22:58:53 +01:00
const ItemSeparatorComponent = useCallback(
2021-02-27 16:33:54 +01:00
({ leadingItem }) =>
queryKey[1].page === 'Toot' && queryKey[1].toot === leadingItem.id ? (
<ComponentSeparator extraMarginLeft={0} />
) : (
<ComponentSeparator
extraMarginLeft={StyleConstants.Avatar.M + StyleConstants.Spacing.S}
/>
),
2020-12-12 22:19:18 +01:00
[]
)
2020-12-26 12:59:16 +01:00
const onEndReached = useCallback(
2021-01-01 16:48:16 +01:00
() => !disableInfinity && !isFetchingNextPage && fetchNextPage(),
2020-12-26 12:59:16 +01:00
[isFetchingNextPage]
)
2021-01-13 01:03:46 +01:00
2021-02-27 16:33:54 +01:00
const flRef = useRef<FlatList>(null)
const scrollY = useSharedValue(0)
2021-02-27 16:33:54 +01:00
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
2021-02-13 00:15:42 +01:00
}
2021-02-11 01:33:31 +01:00
}
}
2021-02-27 16:33:54 +01:00
},
[isFetching]
2021-02-11 01:33:31 +01:00
)
2020-12-13 23:02:54 +01:00
2021-02-27 16:33:54 +01:00
const androidRefreshControl = Platform.select({
android: {
refreshControl: (
<RefreshControl
enabled
colors={[theme.primaryDefault]}
progressBackgroundColor={theme.backgroundDefault}
2021-02-27 16:33:54 +01:00
refreshing={isFetching || isLoading}
onRefresh={() => refetch()}
/>
)
}
})
2021-02-13 13:08:34 +01:00
2022-01-16 23:26:05 +01:00
const dispatch = useDispatch()
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)
}
})
)
}
}
])
2021-02-27 16:33:54 +01:00
useScrollToTop(flRef)
2022-01-30 22:51:03 +01:00
useSelector(getInstanceActive, (prev, next) => {
if (prev !== next) {
flRef.current?.scrollToOffset({ offset: 0, animated: false })
}
return prev === next
})
2020-12-12 12:49:29 +01:00
return (
<>
2021-02-17 21:39:38 +01:00
<TimelineRefresh
2021-03-24 23:46:07 +01:00
flRef={flRef}
2021-02-27 16:33:54 +01:00
queryKey={queryKey}
2021-02-17 21:39:38 +01:00
scrollY={scrollY}
2021-02-27 16:33:54 +01:00
fetchingType={fetchingType}
disableRefresh={disableRefresh}
2021-02-17 21:39:38 +01:00
/>
2021-02-27 16:33:54 +01:00
<AnimatedFlatList
ref={customFLRef || flRef}
2021-02-17 21:39:38 +01:00
scrollEventThrottle={16}
onScroll={onScroll}
windowSize={7}
data={flattenData}
2021-02-10 00:40:44 +01:00
initialNumToRender={6}
maxToRenderPerBatch={3}
style={styles.flatList}
onEndReached={onEndReached}
onEndReachedThreshold={0.75}
2021-02-27 16:33:54 +01:00
ListFooterComponent={
<TimelineFooter
queryKey={queryKey}
disableInfinity={disableInfinity}
/>
}
ListEmptyComponent={<TimelineEmpty queryKey={queryKey} />}
ItemSeparatorComponent={ItemSeparatorComponent}
maintainVisibleContentPosition={{
minIndexForVisible: 0
}}
2022-01-16 23:26:05 +01:00
{...(lookback && {
viewabilityConfigCallbackPairs: viewabilityPairs.current
})}
2021-02-13 13:08:34 +01:00
{...androidRefreshControl}
{...customProps}
/>
</>
2020-12-12 12:49:29 +01:00
)
2020-10-23 09:22:17 +02:00
}
2020-11-28 17:07:30 +01:00
const styles = StyleSheet.create({
flatList: {
minHeight: '100%'
}
})
2020-10-31 21:04:46 +01:00
export default Timeline