Fixed #19

src/components/Timeline.tsx

@@ -4,7 +4,7 @@ import { QueryKeyTimeline, useTimelineQuery } from '@utils/queryHooks/timeline'
 import { getLocalActiveIndex } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { findIndex } from 'lodash'
-import React, { useCallback, useEffect, useMemo, useRef } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { FlatListProps, StyleSheet } from 'react-native'
 import { FlatList } from 'react-native-gesture-handler'
 import Animated, {
@@ -14,6 +14,7 @@ import Animated, {
 } from 'react-native-reanimated'
 import { InfiniteData, useQueryClient } from 'react-query'
 import { useSelector } from 'react-redux'
+import haptics from './haptics'
 import TimelineConversation from './Timeline/Conversation'
 import TimelineDefault from './Timeline/Default'
 import TimelineEmpty from './Timeline/Empty'
@@ -68,30 +69,18 @@ const Timeline: React.FC<Props> = ({
   } = useTimelineQuery({
     ...queryKeyParams,
     options: {
-      getPreviousPageParam: firstPage => {
-        return Array.isArray(firstPage) && firstPage.length
-          ? {
-              direction: 'prev',
-              id: firstPage[0].last_status
-                ? firstPage[0].last_status.id
-                : firstPage[0].id
-            }
-          : undefined
-      },
-      getNextPageParam: lastPage => {
-        return Array.isArray(lastPage) && lastPage.length
-          ? {
-              direction: 'next',
-              id: lastPage[lastPage.length - 1].last_status
-                ? lastPage[lastPage.length - 1].last_status.id
-                : lastPage[lastPage.length - 1].id
-            }
-          : undefined
-      }
+      getPreviousPageParam: firstPage =>
+        firstPage.links?.prev && {
+          min_id: firstPage.links.prev,
+          // https://github.com/facebook/react-native/issues/25239#issuecomment-731100372
+          limit: '3'
+        },
+      getNextPageParam: lastPage =>
+        lastPage.links?.next && { max_id: lastPage.links.next }
     }
   })
 
-  const flattenData = data?.pages ? data.pages.flatMap(d => [...d]) : []
+  const flattenData = data?.pages ? data.pages.flatMap(d => [...d.body]) : []
 
   const flRef = useRef<FlatList<any>>(null)
   const scrolled = useRef(false)
@@ -109,22 +98,30 @@ const Timeline: React.FC<Props> = ({
   }, [isSuccess, flattenData.length, scrolled])
 
   const keyExtractor = useCallback(({ id }) => id, [])
-  const renderItem = useCallback(({ item }) => {
-    switch (page) {
-      case 'Conversations':
-        return <TimelineConversation conversation={item} queryKey={queryKey} />
-      case 'Notifications':
-        return <TimelineNotifications notification={item} queryKey={queryKey} />
-      default:
-        return (
-          <TimelineDefault
-            item={item}
-            queryKey={queryKey}
-            {...(toot === item.id && { highlighted: true })}
-          />
-        )
-    }
-  }, [])
+  const renderItem = useCallback(
+    ({ item }) => {
+      switch (page) {
+        case 'Conversations':
+          return (
+            <TimelineConversation conversation={item} queryKey={queryKey} />
+          )
+        case 'Notifications':
+          return (
+            <TimelineNotifications notification={item} queryKey={queryKey} />
+          )
+        default:
+          return (
+            <TimelineDefault
+              item={item}
+              queryKey={queryKey}
+              {...(toot === item.id && { highlighted: true })}
+              {...(data?.pages[0].pinned && { pinned: data?.pages[0].pinned })}
+            />
+          )
+      }
+    },
+    [data?.pages[0]]
+  )
   const ItemSeparatorComponent = useCallback(
     ({ leadingItem }) => (
       <ComponentSeparator
@@ -146,22 +143,6 @@ const Timeline: React.FC<Props> = ({
     () => !disableInfinity && !isFetchingNextPage && fetchNextPage(),
     [isFetchingNextPage]
   )
-  const prevId = useSharedValue(null)
-  const headerPadding = useAnimatedStyle(() => {
-    if (hasPreviousPage) {
-      if (isFetchingPreviousPage) {
-        return { paddingTop: withTiming(StyleConstants.Spacing.XL) }
-      } else {
-        return { paddingTop: withTiming(0) }
-      }
-    } else {
-      return { paddingTop: withTiming(0) }
-    }
-  }, [hasPreviousPage, isFetchingPreviousPage])
-  const ListHeaderComponent = useMemo(
-    () => <Animated.View style={headerPadding} />,
-    []
-  )
   const ListFooterComponent = useMemo(
     () => <TimelineEnd hasNextPage={!disableInfinity ? hasNextPage : false} />,
     [hasNextPage]
@@ -180,38 +161,60 @@ const Timeline: React.FC<Props> = ({
   useScrollToTop(flRef)
   const queryClient = useQueryClient()
   const scrollY = useSharedValue(0)
-  const onScroll = useCallback(
-    ({ nativeEvent }) => (scrollY.value = nativeEvent.contentOffset.y),
-    []
-  )
+  const [isFetchingLatest, setIsFetchingLatest] = useState(false)
+  useEffect(() => {
+    // https://github.com/facebook/react-native/issues/25239#issuecomment-731100372
+    if (isFetchingLatest) {
+      if (!isFetchingPreviousPage) {
+        fetchPreviousPage()
+      } else {
+        if (data?.pages[0].body.length === 0) {
+          setIsFetchingLatest(false)
+          queryClient.setQueryData<InfiniteData<any> | undefined>(
+            queryKey,
+            data => {
+              if (data?.pages[0].body.length === 0) {
+                return {
+                  pages: data.pages.slice(1),
+                  pageParams: data.pageParams.slice(1)
+                }
+              } else {
+                return data
+              }
+            }
+          )
+        }
+      }
+    }
+  }, [isFetchingPreviousPage, isFetchingLatest, data?.pages[0].body])
+  const onScroll = useCallback(({ nativeEvent }) => {
+    scrollY.value = nativeEvent.contentOffset.y
+  }, [])
   const onResponderRelease = useCallback(() => {
     if (
       scrollY.value <= -StyleConstants.Spacing.XL &&
-      !isFetchingPreviousPage &&
+      !isFetchingLatest &&
       !disableRefresh
     ) {
-      queryClient.setQueryData<InfiniteData<any> | undefined>(
-        queryKey,
-        data => {
-          if (data?.pages[0].length === 0) {
-            if (data.pages[1]) {
-              prevId.value = data.pages[1][0].id
-            }
-            return {
-              pages: data.pages.slice(1),
-              pageParams: data.pageParams.slice(1)
-            }
-          } else {
-            prevId.value = data?.pages[0][0].id
-            return data
-          }
-        }
-      )
-      // https://github.com/facebook/react-native/issues/25239#issuecomment-731100372
-      fetchPreviousPage()
-      flRef.current?.scrollToOffset({ animated: true, offset: 1 })
+      haptics('Light')
+      setIsFetchingLatest(true)
+      flRef.current?.scrollToOffset({
+        animated: true,
+        offset: 1
+      })
     }
-  }, [scrollY.value, isFetchingPreviousPage, disableRefresh])
+  }, [scrollY.value, isFetchingLatest, disableRefresh])
+  const headerPadding = useAnimatedStyle(() => {
+    if (isFetchingLatest) {
+      return { paddingTop: withTiming(StyleConstants.Spacing.XL) }
+    } else {
+      return { paddingTop: withTiming(0) }
+    }
+  }, [isFetchingLatest])
+  const ListHeaderComponent = useMemo(
+    () => <Animated.View style={headerPadding} />,
+    []
+  )
 
   return (
     <>

src/components/Timeline/Default.tsx

@@ -24,6 +24,7 @@ export interface Props {
   highlighted?: boolean
   disableDetails?: boolean
   disableOnPress?: boolean
+  pinned: Mastodon.Status['id'][]
 }
 
 // When the poll is long
@@ -33,7 +34,8 @@ const TimelineDefault: React.FC<Props> = ({
   origin,
   highlighted = false,
   disableDetails = false,
-  disableOnPress = false
+  disableOnPress = false,
+  pinned
 }) => {
   const { theme } = useTheme()
   const localAccount = useSelector(
@@ -73,7 +75,7 @@ const TimelineDefault: React.FC<Props> = ({
     >
       {item.reblog ? (
         <TimelineActioned action='reblog' account={item.account} />
-      ) : item.isPinned ? (
+      ) : pinned && pinned.includes(item.id) ? (
         <TimelineActioned action='pinned' account={item.account} />
       ) : null}
 
@@ -113,9 +115,11 @@ const TimelineDefault: React.FC<Props> = ({
             sameAccount={actualStatus.account.id === localAccount?.id}
           />
         ) : null}
-        {!disableDetails && actualStatus.media_attachments.length > 0 && (
+        {!disableDetails &&
+        Array.isArray(actualStatus.media_attachments) &&
+        actualStatus.media_attachments.length ? (
           <TimelineAttachment status={actualStatus} />
-        )}
+        ) : null}
         {!disableDetails && actualStatus.card && (
           <TimelineCard card={actualStatus.card} />
         )}

src/components/Timeline/Shared/HeaderNotification.tsx

@@ -46,7 +46,7 @@ const TimelineHeaderNotification: React.FC<Props> = ({
               onPress={() =>
                 navigation.navigate('Screen-Actions', {
                   queryKey,
-                  status,
+                  status: notification.status,
                   url: notification.status?.url || notification.status?.uri,
                   type: 'status'
                 })