2020-11-28 17:07:30 +01:00
|
|
|
import React, { useCallback } from 'react'
|
|
|
|
import {
|
|
|
|
ActivityIndicator,
|
|
|
|
AppState,
|
|
|
|
FlatList,
|
|
|
|
StyleSheet,
|
|
|
|
Text,
|
|
|
|
View
|
|
|
|
} from 'react-native'
|
2020-11-04 22:26:38 +01:00
|
|
|
import { setFocusHandler, useInfiniteQuery } from 'react-query'
|
2020-10-23 09:22:17 +02:00
|
|
|
|
2020-11-23 00:07:32 +01:00
|
|
|
import TimelineNotifications from 'src/components/Timelines/Timeline/Notifications'
|
|
|
|
import TimelineDefault from 'src/components/Timelines/Timeline/Default'
|
|
|
|
import TimelineConversation from 'src/components/Timelines/Timeline/Conversation'
|
2020-11-21 13:19:05 +01:00
|
|
|
import { timelineFetch } from 'src/utils/fetches/timelineFetch'
|
2020-11-23 00:07:32 +01:00
|
|
|
import TimelineSeparator from './Timeline/Separator'
|
2020-10-23 09:22:17 +02:00
|
|
|
|
2020-10-26 00:27:53 +01:00
|
|
|
// Opening nesting hashtag pages
|
2020-10-24 18:07:09 +02:00
|
|
|
|
2020-11-04 22:26:38 +01:00
|
|
|
export interface Props {
|
2020-11-21 00:40:55 +01:00
|
|
|
page: App.Pages
|
2020-10-31 21:04:46 +01:00
|
|
|
hashtag?: string
|
|
|
|
list?: string
|
|
|
|
toot?: string
|
|
|
|
account?: string
|
|
|
|
disableRefresh?: boolean
|
2020-11-05 00:47:31 +01:00
|
|
|
scrollEnabled?: boolean
|
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> = ({
|
|
|
|
page,
|
|
|
|
hashtag,
|
|
|
|
list,
|
|
|
|
toot,
|
|
|
|
account,
|
2020-11-05 00:47:31 +01:00
|
|
|
disableRefresh = false,
|
|
|
|
scrollEnabled = true
|
2020-11-04 22:26:38 +01:00
|
|
|
}) => {
|
|
|
|
setFocusHandler(handleFocus => {
|
|
|
|
const handleAppStateChange = (appState: string) => {
|
|
|
|
if (appState === 'active') {
|
|
|
|
handleFocus()
|
|
|
|
}
|
2020-10-31 21:04:46 +01:00
|
|
|
}
|
2020-11-04 22:26:38 +01:00
|
|
|
AppState.addEventListener('change', handleAppStateChange)
|
|
|
|
return () => AppState.removeEventListener('change', handleAppStateChange)
|
|
|
|
})
|
|
|
|
|
2020-11-22 00:46:23 +01:00
|
|
|
const queryKey: App.QueryKey = [page, { page, hashtag, list, toot, account }]
|
2020-11-04 22:26:38 +01:00
|
|
|
const {
|
|
|
|
isLoading,
|
|
|
|
isFetchingMore,
|
|
|
|
isError,
|
|
|
|
isSuccess,
|
|
|
|
data,
|
|
|
|
fetchMore
|
2020-11-05 00:47:31 +01:00
|
|
|
} = useInfiniteQuery(queryKey, timelineFetch)
|
2020-11-04 22:26:38 +01:00
|
|
|
const flattenData = data ? data.flatMap(d => [...d?.toots]) : []
|
2020-11-22 00:46:23 +01:00
|
|
|
// const flattenPointer = data ? data.flatMap(d => [d?.pointer]) : []
|
2020-10-23 09:22:17 +02:00
|
|
|
|
2020-11-28 17:07:30 +01:00
|
|
|
const flKeyExtrator = useCallback(({ id }) => id, [])
|
|
|
|
const flRenderItem = useCallback(({ item }) => {
|
|
|
|
switch (page) {
|
|
|
|
case 'Conversations':
|
|
|
|
return <TimelineConversation item={item} />
|
|
|
|
case 'Notifications':
|
|
|
|
return <TimelineNotifications notification={item} queryKey={queryKey} />
|
|
|
|
default:
|
|
|
|
return <TimelineDefault item={item} queryKey={queryKey} />
|
|
|
|
}
|
|
|
|
}, [])
|
|
|
|
const flItemSeparatorComponent = useCallback(() => <TimelineSeparator />, [])
|
|
|
|
const flOnRefresh = useCallback(
|
|
|
|
() =>
|
|
|
|
!disableRefresh &&
|
|
|
|
fetchMore(
|
|
|
|
{
|
|
|
|
direction: 'prev',
|
|
|
|
id: flattenData[0].id
|
|
|
|
},
|
|
|
|
{ previous: true }
|
|
|
|
),
|
2020-12-01 00:44:28 +01:00
|
|
|
[disableRefresh, flattenData]
|
2020-11-28 17:07:30 +01:00
|
|
|
)
|
|
|
|
const flOnEndReach = useCallback(
|
|
|
|
() =>
|
|
|
|
!disableRefresh &&
|
|
|
|
fetchMore({
|
|
|
|
direction: 'next',
|
|
|
|
id: flattenData[flattenData.length - 1].id
|
|
|
|
}),
|
2020-12-01 00:44:28 +01:00
|
|
|
[disableRefresh, flattenData]
|
2020-11-28 17:07:30 +01:00
|
|
|
)
|
|
|
|
|
2020-10-24 18:07:09 +02:00
|
|
|
let content
|
2020-11-04 22:26:38 +01:00
|
|
|
if (!isSuccess) {
|
|
|
|
content = <ActivityIndicator />
|
|
|
|
} else if (isError) {
|
2020-10-23 09:22:17 +02:00
|
|
|
content = <Text>Error message</Text>
|
|
|
|
} else {
|
2020-10-26 00:27:53 +01:00
|
|
|
content = (
|
|
|
|
<>
|
|
|
|
<FlatList
|
2020-11-04 22:26:38 +01:00
|
|
|
data={flattenData}
|
2020-11-28 17:07:30 +01:00
|
|
|
onRefresh={flOnRefresh}
|
|
|
|
renderItem={flRenderItem}
|
|
|
|
onEndReached={flOnEndReach}
|
|
|
|
keyExtractor={flKeyExtrator}
|
|
|
|
style={styles.flatList}
|
|
|
|
scrollEnabled={scrollEnabled} // For timeline in Account view
|
|
|
|
ItemSeparatorComponent={flItemSeparatorComponent}
|
|
|
|
refreshing={!disableRefresh && isLoading}
|
2020-12-01 00:44:28 +01:00
|
|
|
onEndReachedThreshold={!disableRefresh ? 1 : null}
|
2020-11-22 00:46:23 +01:00
|
|
|
// require getItemLayout
|
|
|
|
// {...(flattenPointer[0] && { initialScrollIndex: flattenPointer[0] })}
|
2020-10-24 19:15:05 +02:00
|
|
|
/>
|
2020-11-04 22:26:38 +01:00
|
|
|
{isFetchingMore && <ActivityIndicator />}
|
2020-10-26 00:27:53 +01:00
|
|
|
</>
|
|
|
|
)
|
2020-10-23 09:22:17 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
return <View>{content}</View>
|
|
|
|
}
|
|
|
|
|
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
|