Transform into TypeScript

src/stacks/common/Timeline.tsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from 'react'
+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 { RootState } from 'src/stacks/common/store'
+import { fetch } from './timelineSlice'
+
+// Opening nesting hashtag pages
+
+const Timeline: React.FC<{
+  page: store.TimelinePage
+  hashtag?: string
+  list?: string
+  toot?: string
+  account?: string
+  disableRefresh?: boolean
+}> = ({ page, hashtag, list, toot, account, disableRefresh = false }) => {
+  const dispatch = useDispatch()
+  const state = useSelector((state: RootState) => 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={index} toot={item} />
+            ) : (
+              <TootTimeline key={index} 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>
+}
+
+export default Timeline