2020-10-26 00:27:53 +01:00
|
|
|
import React, { useEffect, useState } from 'react'
|
2020-10-23 09:22:17 +02:00
|
|
|
import PropTypes from 'prop-types'
|
2020-10-29 14:52:28 +01:00
|
|
|
import { ActivityIndicator, FlatList, Text, View } from 'react-native'
|
2020-10-24 18:07:09 +02:00
|
|
|
import { useSelector, useDispatch } from 'react-redux'
|
2020-10-23 09:22:17 +02:00
|
|
|
|
2020-10-29 14:52:28 +01:00
|
|
|
import Toot from 'src/components/Toot'
|
|
|
|
import { fetch } from './timelineSlice'
|
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-10-29 14:52:28 +01:00
|
|
|
export default function Timeline ({
|
|
|
|
page,
|
|
|
|
hashtag,
|
|
|
|
list,
|
|
|
|
toot,
|
|
|
|
account,
|
|
|
|
disableRefresh
|
|
|
|
}) {
|
2020-10-23 09:22:17 +02:00
|
|
|
const dispatch = useDispatch()
|
2020-10-29 14:52:28 +01:00
|
|
|
const state = useSelector(state => state.timelines[page])
|
2020-10-26 00:27:53 +01:00
|
|
|
const [timelineReady, setTimelineReady] = useState(false)
|
2020-10-23 09:22:17 +02:00
|
|
|
|
|
|
|
useEffect(() => {
|
2020-10-26 00:27:53 +01:00
|
|
|
if (state.status === 'idle') {
|
2020-10-29 14:52:28 +01:00
|
|
|
dispatch(fetch({ page, hashtag, list, toot, account }))
|
2020-10-26 00:27:53 +01:00
|
|
|
setTimelineReady(true)
|
2020-10-23 09:22:17 +02:00
|
|
|
}
|
2020-10-26 00:27:53 +01:00
|
|
|
}, [state, dispatch])
|
2020-10-23 09:22:17 +02:00
|
|
|
|
2020-10-24 18:07:09 +02:00
|
|
|
let content
|
2020-10-29 14:52:28 +01:00
|
|
|
if (state.status === 'failed') {
|
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-10-29 14:52:28 +01:00
|
|
|
style={{ minHeight: '100%' }}
|
2020-10-26 00:27:53 +01:00
|
|
|
data={state.toots}
|
|
|
|
keyExtractor={({ id }) => id}
|
2020-10-27 01:51:51 +01:00
|
|
|
renderItem={({ item, index, separators }) => (
|
2020-10-29 14:52:28 +01:00
|
|
|
<Toot key={item.key} item={item} />
|
2020-10-27 01:51:51 +01:00
|
|
|
)}
|
2020-10-29 14:52:28 +01:00
|
|
|
{...(state.pointer && { initialScrollIndex: state.pointer })}
|
|
|
|
{...(!disableRefresh && {
|
|
|
|
onRefresh: () =>
|
2020-10-26 00:27:53 +01:00
|
|
|
dispatch(
|
|
|
|
fetch({
|
|
|
|
page,
|
2020-10-29 14:52:28 +01:00
|
|
|
query: [{ key: 'since_id', value: state.toots[0].id }]
|
2020-10-26 00:27:53 +01:00
|
|
|
})
|
2020-10-29 14:52:28 +01:00
|
|
|
),
|
|
|
|
refreshing: state.status === 'loading',
|
|
|
|
onEndReached: () => {
|
|
|
|
if (!timelineReady) {
|
|
|
|
dispatch(
|
|
|
|
fetch({
|
|
|
|
page,
|
|
|
|
query: [
|
|
|
|
{
|
|
|
|
key: 'max_id',
|
|
|
|
value: state.toots[state.toots.length - 1].id
|
|
|
|
}
|
|
|
|
]
|
|
|
|
})
|
|
|
|
)
|
|
|
|
setTimelineReady(true)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
onEndReachedThreshold: 0.5
|
|
|
|
})}
|
2020-10-26 00:27:53 +01:00
|
|
|
onMomentumScrollBegin={() => setTimelineReady(false)}
|
2020-10-24 19:15:05 +02:00
|
|
|
/>
|
2020-10-26 00:27:53 +01:00
|
|
|
{state.status === 'loading' && <ActivityIndicator />}
|
|
|
|
</>
|
|
|
|
)
|
2020-10-23 09:22:17 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
return <View>{content}</View>
|
|
|
|
}
|
|
|
|
|
|
|
|
Timeline.propTypes = {
|
2020-10-26 00:27:53 +01:00
|
|
|
page: PropTypes.string.isRequired,
|
|
|
|
hashtag: PropTypes.string,
|
2020-10-29 14:52:28 +01:00
|
|
|
list: PropTypes.string,
|
|
|
|
toot: PropTypes.string,
|
|
|
|
disableRefresh: PropTypes.bool
|
2020-10-23 09:22:17 +02:00
|
|
|
}
|