2021-02-08 23:47:20 +01:00
|
|
|
import Timeline from '@components/Timeline'
|
2021-02-27 16:33:54 +01:00
|
|
|
import TimelineDefault from '@components/Timeline/Default'
|
|
|
|
import { useNavigation } from '@react-navigation/native'
|
2021-08-29 15:25:38 +02:00
|
|
|
import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
|
2021-02-27 16:33:54 +01:00
|
|
|
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
|
|
|
|
import { findIndex } from 'lodash'
|
2022-01-03 21:25:53 +01:00
|
|
|
import React, { useCallback, useEffect, useRef, useState } from 'react'
|
2021-02-27 16:33:54 +01:00
|
|
|
import { FlatList } from 'react-native'
|
|
|
|
import { InfiniteQueryObserver, useQueryClient } from 'react-query'
|
2020-10-29 14:52:28 +01:00
|
|
|
|
2021-08-29 15:25:38 +02:00
|
|
|
const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
|
2020-10-29 14:52:28 +01:00
|
|
|
route: {
|
2021-02-13 01:26:02 +01:00
|
|
|
params: { toot, rootQueryKey }
|
2020-10-29 14:52:28 +01:00
|
|
|
}
|
2020-10-31 21:04:46 +01:00
|
|
|
}) => {
|
2021-02-27 16:33:54 +01:00
|
|
|
const queryKey: QueryKeyTimeline = [
|
|
|
|
'Timeline',
|
|
|
|
{ page: 'Toot', toot: toot.id }
|
|
|
|
]
|
|
|
|
|
|
|
|
const flRef = useRef<FlatList>(null)
|
|
|
|
|
2022-01-03 21:25:53 +01:00
|
|
|
const [itemsLength, setItemsLength] = useState(0)
|
2021-02-27 16:33:54 +01:00
|
|
|
const scrolled = useRef(false)
|
|
|
|
const navigation = useNavigation()
|
|
|
|
const queryClient = useQueryClient()
|
|
|
|
const observer = new InfiniteQueryObserver(queryClient, { queryKey })
|
|
|
|
useEffect(() => {
|
|
|
|
const unsubscribe = observer.subscribe(result => {
|
|
|
|
if (result.isSuccess) {
|
|
|
|
const flattenData = result.data?.pages
|
|
|
|
? // @ts-ignore
|
|
|
|
result.data.pages.flatMap(d => [...d.body])
|
|
|
|
: []
|
2022-01-03 21:25:53 +01:00
|
|
|
setItemsLength(flattenData.length)
|
2021-02-27 16:33:54 +01:00
|
|
|
// Auto go back when toot page is empty
|
|
|
|
if (flattenData.length === 0) {
|
|
|
|
navigation.goBack()
|
|
|
|
}
|
|
|
|
if (!scrolled.current) {
|
|
|
|
scrolled.current = true
|
|
|
|
const pointer = findIndex(flattenData, ['id', toot.id])
|
2022-01-03 21:25:53 +01:00
|
|
|
pointer < flattenData.length &&
|
2021-12-31 12:09:03 +01:00
|
|
|
setTimeout(() => {
|
|
|
|
flRef.current?.scrollToIndex({
|
|
|
|
index: pointer,
|
|
|
|
viewOffset: 100
|
|
|
|
})
|
2022-01-03 21:25:53 +01:00
|
|
|
}, 500)
|
2021-02-27 16:33:54 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
return () => unsubscribe()
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
// Toot page auto scroll to selected toot
|
2022-01-03 21:25:53 +01:00
|
|
|
const onScrollToIndexFailed = useCallback(
|
|
|
|
error => {
|
|
|
|
const offset = error.averageItemLength * error.index
|
|
|
|
flRef.current?.scrollToOffset({ offset })
|
|
|
|
setTimeout(
|
|
|
|
() =>
|
|
|
|
error.index < itemsLength &&
|
|
|
|
flRef.current?.scrollToIndex({ index: error.index, viewOffset: 100 }),
|
|
|
|
500
|
|
|
|
)
|
|
|
|
},
|
|
|
|
[itemsLength]
|
|
|
|
)
|
2021-02-27 16:33:54 +01:00
|
|
|
|
|
|
|
const renderItem = useCallback(
|
|
|
|
({ item }) => (
|
|
|
|
<TimelineDefault
|
|
|
|
item={item}
|
|
|
|
queryKey={queryKey}
|
|
|
|
rootQueryKey={rootQueryKey}
|
|
|
|
highlighted={toot.id === item.id}
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
[]
|
|
|
|
)
|
|
|
|
|
2021-02-13 01:26:02 +01:00
|
|
|
return (
|
|
|
|
<Timeline
|
2021-02-27 16:33:54 +01:00
|
|
|
flRef={flRef}
|
|
|
|
queryKey={queryKey}
|
2021-03-10 10:22:53 +01:00
|
|
|
customProps={{ renderItem, onScrollToIndexFailed }}
|
2021-02-13 01:26:02 +01:00
|
|
|
disableRefresh
|
|
|
|
disableInfinity
|
|
|
|
/>
|
|
|
|
)
|
2020-10-29 14:52:28 +01:00
|
|
|
}
|
2020-10-31 21:04:46 +01:00
|
|
|
|
2021-01-30 01:29:15 +01:00
|
|
|
export default TabSharedToot
|