tooot/src/stacks/common/Timeline.jsx

import React, { useEffect, useState } from 'react'
import PropTypes from 'prop-types'
import { ActivityIndicator, FlatList, Text, View } from 'react-native'
import { useSelector, useDispatch } from 'react-redux'

import TootNotification from 'src/components/TootNotification'
import TootTimeline from 'src/components/TootTimeline'
import { fetch } from './timelineSlice'

// Opening nesting hashtag pages

export default function Timeline ({
  page,
  hashtag,
  list,
  toot,
  account,
  disableRefresh = false
}) {
  const dispatch = useDispatch()
  const state = useSelector(state => state.timelines[page])
  const [timelineReady, setTimelineReady] = useState(false)

  useEffect(() => {
    let mounted = true
    if (state.status === 'idle' && mounted) {
      dispatch(fetch({ page, hashtag, list, toot, account }))
      setTimelineReady(true)
    }
    return () => (mounted = false)
  }, [state, dispatch])

  let content
  if (state.status === 'failed') {
    content = <Text>Error message</Text>
  } else {
    content = (
      <>
        <FlatList
          style={{ minHeight: '100%' }}
          data={state.toots}
          keyExtractor={({ id }) => id}
          renderItem={({ item, index, separators }) =>
            page === 'Notifications' ? (
              <TootNotification key={item.key} toot={item} />
            ) : (
              <TootTimeline key={item.key} toot={item} />
            )
          }
          {...(state.pointer && { initialScrollIndex: state.pointer })}
          {...(!disableRefresh && {
            onRefresh: () =>
              dispatch(
                fetch({
                  page,
                  hashtag,
                  list,
                  paginationDirection: 'prev'
                })
              ),
            refreshing: state.status === 'loading',
            onEndReached: () => {
              if (!timelineReady) {
                dispatch(
                  fetch({
                    page,
                    hashtag,
                    list,
                    paginationDirection: 'next'
                  })
                )
                setTimelineReady(true)
              }
            },
            onEndReachedThreshold: 0.5
          })}
          onMomentumScrollBegin={() => setTimelineReady(false)}
        />
        {state.status === 'loading' && <ActivityIndicator />}
      </>
    )
  }

  return <View>{content}</View>
}

Timeline.propTypes = {
  page: PropTypes.string.isRequired,
  hashtag: PropTypes.string,
  list: PropTypes.string,
  toot: PropTypes.string,
  disableRefresh: PropTypes.bool
}