2021-01-04 18:29:02 +01:00
|
|
|
import ComponentSeparator from '@components/Separator'
|
2023-01-07 16:27:40 +01:00
|
|
|
import TimelineDefault from '@components/Timeline/Default'
|
2021-02-27 16:33:54 +01:00
|
|
|
import { useScrollToTop } from '@react-navigation/native'
|
2022-12-11 12:12:46 +01:00
|
|
|
import { UseInfiniteQueryOptions } from '@tanstack/react-query'
|
2022-06-01 23:13:43 +02:00
|
|
|
import { QueryKeyTimeline, useTimelineQuery } from '@utils/queryHooks/timeline'
|
2022-12-31 00:07:28 +01:00
|
|
|
import { flattenPages } from '@utils/queryHooks/utils'
|
2023-01-07 16:27:40 +01:00
|
|
|
import {
|
|
|
|
getAccountStorage,
|
|
|
|
setAccountStorage,
|
|
|
|
useGlobalStorageListener
|
|
|
|
} from '@utils/storage/actions'
|
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'
|
2022-12-29 00:36:35 +01:00
|
|
|
import React, { RefObject, useRef } from 'react'
|
2023-01-06 14:00:50 +01:00
|
|
|
import { FlatList, FlatListProps, Platform, RefreshControl } from 'react-native'
|
2022-12-11 01:08:38 +01:00
|
|
|
import Animated, { useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated'
|
2022-12-28 23:41:36 +01:00
|
|
|
import TimelineEmpty from './Empty'
|
|
|
|
import TimelineFooter from './Footer'
|
|
|
|
import TimelineRefresh, { SEPARATION_Y_1, SEPARATION_Y_2 } from './Refresh'
|
2022-06-01 23:13:43 +02:00
|
|
|
|
2023-01-07 16:27:40 +01:00
|
|
|
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList<any>)
|
2020-12-19 18:21:37 +01:00
|
|
|
|
2020-11-04 22:26:38 +01:00
|
|
|
export interface Props {
|
2023-01-06 14:00:50 +01:00
|
|
|
flRef?: RefObject<FlatList<any>>
|
2021-02-27 16:33:54 +01:00
|
|
|
queryKey: QueryKeyTimeline
|
2022-12-11 12:12:46 +01:00
|
|
|
queryOptions?: Omit<
|
|
|
|
UseInfiniteQueryOptions<any>,
|
|
|
|
'notifyOnChangeProps' | 'getNextPageParam' | 'getPreviousPageParam' | 'select' | 'onSuccess'
|
|
|
|
>
|
2020-10-31 21:04:46 +01:00
|
|
|
disableRefresh?: boolean
|
2021-01-01 16:48:16 +01:00
|
|
|
disableInfinity?: boolean
|
2023-01-07 16:27:40 +01:00
|
|
|
readMarker?: 'read_marker_following'
|
|
|
|
customProps?: Partial<FlatListProps<any>>
|
2020-11-04 22:26:38 +01:00
|
|
|
}
|
2020-10-23 09:22:17 +02:00
|
|
|
|
2020-11-04 22:26:38 +01:00
|
|
|
const Timeline: React.FC<Props> = ({
|
2021-02-27 16:33:54 +01:00
|
|
|
flRef: customFLRef,
|
|
|
|
queryKey,
|
2022-12-11 12:12:46 +01:00
|
|
|
queryOptions,
|
2021-01-01 16:48:16 +01:00
|
|
|
disableRefresh = false,
|
2021-01-15 01:15:27 +01:00
|
|
|
disableInfinity = false,
|
2023-01-07 16:27:40 +01:00
|
|
|
readMarker = undefined,
|
2021-01-15 01:15:27 +01:00
|
|
|
customProps
|
2020-11-04 22:26:38 +01:00
|
|
|
}) => {
|
2022-02-12 14:51:01 +01:00
|
|
|
const { colors } = useTheme()
|
2021-02-13 13:08:34 +01:00
|
|
|
|
2022-12-11 01:08:38 +01:00
|
|
|
const { data, refetch, isFetching, isLoading, fetchNextPage, isFetchingNextPage } =
|
|
|
|
useTimelineQuery({
|
|
|
|
...queryKey[1],
|
|
|
|
options: {
|
2022-12-11 12:12:46 +01:00
|
|
|
...queryOptions,
|
2022-12-11 01:08:38 +01:00
|
|
|
notifyOnChangeProps: Platform.select({
|
|
|
|
ios: ['dataUpdatedAt', 'isFetching'],
|
|
|
|
android: ['dataUpdatedAt', 'isFetching', 'isLoading']
|
2023-01-07 18:01:08 +01:00
|
|
|
})
|
2022-12-11 01:08:38 +01:00
|
|
|
}
|
|
|
|
})
|
2021-01-07 19:13:09 +01:00
|
|
|
|
2023-01-06 14:00:50 +01:00
|
|
|
const flRef = useRef<FlatList>(null)
|
2023-01-07 16:27:40 +01:00
|
|
|
const fetchingActive = useRef<boolean>(false)
|
2020-12-13 23:02:54 +01:00
|
|
|
|
2022-06-01 23:13:43 +02:00
|
|
|
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]
|
|
|
|
)
|
|
|
|
|
2023-01-07 16:27:40 +01:00
|
|
|
const viewabilityConfigCallbackPairs = useRef<
|
|
|
|
Pick<FlatListProps<any>, 'viewabilityConfigCallbackPairs'>['viewabilityConfigCallbackPairs']
|
|
|
|
>(
|
|
|
|
readMarker
|
|
|
|
? [
|
|
|
|
{
|
|
|
|
viewabilityConfig: {
|
|
|
|
minimumViewTime: 300,
|
|
|
|
itemVisiblePercentThreshold: 80,
|
|
|
|
waitForInteraction: true
|
|
|
|
},
|
|
|
|
onViewableItemsChanged: ({ viewableItems }) => {
|
|
|
|
const marker = readMarker ? getAccountStorage.string(readMarker) : undefined
|
|
|
|
|
|
|
|
const firstItemId = viewableItems.filter(item => item.isViewable)[0]?.item.id
|
|
|
|
if (!fetchingActive.current && firstItemId && firstItemId > (marker || '0')) {
|
|
|
|
setAccountStorage([{ key: readMarker, value: firstItemId }])
|
|
|
|
} else {
|
|
|
|
// setAccountStorage([{ key: readMarker, value: '109519141378761752' }])
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
]
|
|
|
|
: undefined
|
|
|
|
)
|
|
|
|
|
2021-02-27 16:33:54 +01:00
|
|
|
const androidRefreshControl = Platform.select({
|
|
|
|
android: {
|
|
|
|
refreshControl: (
|
|
|
|
<RefreshControl
|
|
|
|
enabled
|
2022-02-12 14:51:01 +01:00
|
|
|
colors={[colors.primaryDefault]}
|
|
|
|
progressBackgroundColor={colors.backgroundDefault}
|
2021-02-27 16:33:54 +01:00
|
|
|
refreshing={isFetching || isLoading}
|
2023-01-08 00:05:58 +01:00
|
|
|
onRefresh={() => {
|
|
|
|
if (readMarker) {
|
|
|
|
setAccountStorage([{ key: readMarker, value: undefined }])
|
|
|
|
}
|
|
|
|
refetch()
|
|
|
|
}}
|
2021-02-27 16:33:54 +01:00
|
|
|
/>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
})
|
2021-02-13 13:08:34 +01:00
|
|
|
|
2021-02-27 16:33:54 +01:00
|
|
|
useScrollToTop(flRef)
|
2022-12-28 23:41:36 +01:00
|
|
|
useGlobalStorageListener('account.active', () =>
|
|
|
|
flRef.current?.scrollToOffset({ offset: 0, animated: false })
|
|
|
|
)
|
2022-01-30 22:51:03 +01:00
|
|
|
|
2020-12-12 12:49:29 +01:00
|
|
|
return (
|
2022-06-01 23:13:43 +02:00
|
|
|
<>
|
|
|
|
<TimelineRefresh
|
|
|
|
flRef={flRef}
|
|
|
|
queryKey={queryKey}
|
2023-01-07 16:27:40 +01:00
|
|
|
fetchingActive={fetchingActive}
|
2022-06-01 23:13:43 +02:00
|
|
|
scrollY={scrollY}
|
|
|
|
fetchingType={fetchingType}
|
|
|
|
disableRefresh={disableRefresh}
|
2023-01-07 16:27:40 +01:00
|
|
|
readMarker={readMarker}
|
2022-06-01 23:13:43 +02:00
|
|
|
/>
|
|
|
|
<AnimatedFlatList
|
|
|
|
ref={customFLRef || flRef}
|
|
|
|
scrollEventThrottle={16}
|
|
|
|
onScroll={onScroll}
|
2023-01-25 00:29:36 +01:00
|
|
|
windowSize={5}
|
2022-12-31 00:07:28 +01:00
|
|
|
data={flattenPages(data)}
|
2023-01-07 16:27:40 +01:00
|
|
|
{...(customProps?.renderItem
|
|
|
|
? { renderItem: customProps.renderItem }
|
|
|
|
: { renderItem: ({ item }) => <TimelineDefault item={item} queryKey={queryKey} /> })}
|
2023-01-25 00:29:36 +01:00
|
|
|
initialNumToRender={3}
|
2023-01-06 14:00:50 +01:00
|
|
|
maxToRenderPerBatch={3}
|
2022-12-29 00:36:35 +01:00
|
|
|
onEndReached={() => !disableInfinity && !isFetchingNextPage && fetchNextPage()}
|
2022-06-01 23:13:43 +02:00
|
|
|
onEndReachedThreshold={0.75}
|
|
|
|
ListFooterComponent={
|
2022-12-11 01:08:38 +01:00
|
|
|
<TimelineFooter queryKey={queryKey} disableInfinity={disableInfinity} />
|
2021-02-27 16:33:54 +01:00
|
|
|
}
|
2022-06-01 23:13:43 +02:00
|
|
|
ListEmptyComponent={<TimelineEmpty queryKey={queryKey} />}
|
2022-08-07 01:18:10 +02:00
|
|
|
ItemSeparatorComponent={({ leadingItem }) =>
|
|
|
|
queryKey[1].page === 'Toot' && queryKey[1].toot === leadingItem.id ? (
|
|
|
|
<ComponentSeparator extraMarginLeft={0} />
|
|
|
|
) : (
|
|
|
|
<ComponentSeparator
|
2022-12-11 01:08:38 +01:00
|
|
|
extraMarginLeft={StyleConstants.Avatar.M + StyleConstants.Spacing.S}
|
2022-08-07 01:18:10 +02:00
|
|
|
/>
|
|
|
|
)
|
|
|
|
}
|
2023-01-07 16:27:40 +01:00
|
|
|
viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
|
2023-01-06 22:58:01 +01:00
|
|
|
{...(!isLoading && {
|
|
|
|
maintainVisibleContentPosition: {
|
|
|
|
minIndexForVisible: 0
|
|
|
|
}
|
|
|
|
})}
|
2022-06-01 23:13:43 +02:00
|
|
|
{...androidRefreshControl}
|
|
|
|
{...customProps}
|
|
|
|
/>
|
|
|
|
</>
|
2020-12-12 12:49:29 +01:00
|
|
|
)
|
2020-10-23 09:22:17 +02:00
|
|
|
}
|
|
|
|
|
2020-10-31 21:04:46 +01:00
|
|
|
export default Timeline
|