Rewrite timeline logic

src/components/Timeline/Refresh.tsx

@@ -1,8 +1,13 @@
 import haptics from '@components/haptics'
 import Icon from '@components/Icon'
+import {
+  QueryKeyTimeline,
+  TimelineData,
+  useTimelineQuery
+} from '@utils/queryHooks/timeline'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { StyleSheet, Text, View } from 'react-native'
 import { Circle } from 'react-native-animated-spinkit'
@@ -15,104 +20,201 @@ import Animated, {
   useSharedValue,
   withTiming
 } from 'react-native-reanimated'
+import { InfiniteData, useQueryClient } from 'react-query'
 
 export interface Props {
+  queryKey: QueryKeyTimeline
   scrollY: Animated.SharedValue<number>
-  isLoading: boolean
-  isFetching: boolean
-  disable?: boolean
+  fetchingType: Animated.SharedValue<0 | 1 | 2>
+  disableRefresh?: boolean
 }
 
 const CONTAINER_HEIGHT = StyleConstants.Spacing.M * 2.5
+export const SEPARATION_Y_1 = -(
+  CONTAINER_HEIGHT / 2 +
+  StyleConstants.Font.Size.S / 2
+)
+export const SEPARATION_Y_2 = -(
+  CONTAINER_HEIGHT * 1.5 +
+  StyleConstants.Font.Size.S / 2
+)
 
-const TimelineRefresh = React.memo(
-  ({ scrollY, isLoading, isFetching, disable = false }: Props) => {
-    if (disable || isLoading) {
-      return null
+const TimelineRefresh: React.FC<Props> = ({
+  queryKey,
+  scrollY,
+  fetchingType,
+  disableRefresh = false
+}) => {
+  if (disableRefresh) {
+    return null
+  }
+
+  const fetchingLatestIndex = useRef(0)
+
+  const {
+    data,
+    refetch,
+    isFetching,
+    isLoading,
+    fetchPreviousPage,
+    hasPreviousPage,
+    isFetchingNextPage
+  } = useTimelineQuery({
+    ...queryKey[1],
+    options: {
+      getPreviousPageParam: firstPage =>
+        firstPage?.links?.prev && {
+          min_id: firstPage.links.prev,
+          // https://github.com/facebook/react-native/issues/25239#issuecomment-731100372
+          limit: '5'
+        },
+      onSuccess: () => {
+        if (fetchingLatestIndex.current > 0) {
+          if (fetchingLatestIndex.current > 8) {
+            clearFirstPage()
+            fetchingLatestIndex.current = 0
+          } else {
+            if (hasPreviousPage) {
+              fetchPreviousPage()
+              fetchingLatestIndex.current++
+            } else {
+              clearFirstPage()
+              fetchingLatestIndex.current = 0
+            }
+          }
+        }
+      }
     }
+  })
 
-    const { t } = useTranslation('componentTimeline')
-    const { theme } = useTheme()
+  const { t } = useTranslation('componentTimeline')
+  const { theme } = useTheme()
 
-    const separation01 = -(
-      CONTAINER_HEIGHT / 2 +
-      StyleConstants.Font.Size.S / 2
-    )
-    const separation02 = -(
-      CONTAINER_HEIGHT * 1.5 +
-      StyleConstants.Font.Size.S / 2
-    )
-    const [textRight, setTextRight] = useState(0)
-    const arrowY = useAnimatedStyle(() => ({
-      transform: [
-        {
-          translateY: interpolate(
-            scrollY.value,
-            [0, separation01],
-            [
-              -CONTAINER_HEIGHT / 2 - StyleConstants.Font.Size.M / 2,
-              CONTAINER_HEIGHT / 2 - StyleConstants.Font.Size.S / 2
-            ],
-            Extrapolate.CLAMP
-          )
+  const queryClient = useQueryClient()
+  const clearFirstPage = useCallback(() => {
+    if (data?.pages[0].body.length === 0) {
+      queryClient.setQueryData<InfiniteData<TimelineData> | undefined>(
+        queryKey,
+        data => {
+          if (data?.pages[0].body.length === 0) {
+            return {
+              pages: data.pages.slice(1),
+              pageParams: data.pageParams.slice(1)
+            }
+          } else {
+            return data
+          }
         }
-      ]
-    }))
-    const arrowTop = useAnimatedStyle(() => ({
-      marginTop:
-        scrollY.value < separation02
-          ? withTiming(CONTAINER_HEIGHT)
-          : withTiming(0)
-    }))
+      )
+    }
+  }, [data?.pages.length && data?.pages[0].body.length])
 
-    const arrowStage = useSharedValue(0)
-    const onLayout = useCallback(
-      ({ nativeEvent }) => {
-        if (nativeEvent.layout.x + nativeEvent.layout.width > textRight) {
-          setTextRight(nativeEvent.layout.x + nativeEvent.layout.width)
-        }
-      },
-      [textRight]
-    )
-    useAnimatedReaction(
-      () => {
-        if (isFetching) {
+  const [textRight, setTextRight] = useState(0)
+  const arrowY = useAnimatedStyle(() => ({
+    transform: [
+      {
+        translateY: interpolate(
+          scrollY.value,
+          [0, SEPARATION_Y_1],
+          [
+            -CONTAINER_HEIGHT / 2 - StyleConstants.Font.Size.M / 2,
+            CONTAINER_HEIGHT / 2 - StyleConstants.Font.Size.S / 2
+          ],
+          Extrapolate.CLAMP
+        )
+      }
+    ]
+  }))
+  const arrowTop = useAnimatedStyle(() => ({
+    marginTop:
+      scrollY.value < SEPARATION_Y_2
+        ? withTiming(CONTAINER_HEIGHT)
+        : withTiming(0)
+  }))
+
+  const arrowStage = useSharedValue(0)
+  const onLayout = useCallback(
+    ({ nativeEvent }) => {
+      if (nativeEvent.layout.x + nativeEvent.layout.width > textRight) {
+        setTextRight(nativeEvent.layout.x + nativeEvent.layout.width)
+      }
+    },
+    [textRight]
+  )
+  useAnimatedReaction(
+    () => {
+      if (isFetching) {
+        return false
+      }
+      switch (arrowStage.value) {
+        case 0:
+          if (scrollY.value < SEPARATION_Y_1) {
+            arrowStage.value = 1
+            return true
+          }
           return false
-        }
-        switch (arrowStage.value) {
-          case 0:
-            if (scrollY.value < separation01) {
-              arrowStage.value = 1
-              return true
-            }
+        case 1:
+          if (scrollY.value < SEPARATION_Y_2) {
+            arrowStage.value = 2
+            return true
+          }
+          if (scrollY.value > SEPARATION_Y_1) {
+            arrowStage.value = 0
             return false
-          case 1:
-            if (scrollY.value < separation02) {
-              arrowStage.value = 2
-              return true
-            }
-            if (scrollY.value > separation01) {
-              arrowStage.value = 0
-              return false
-            }
+          }
+          return false
+        case 2:
+          if (scrollY.value > SEPARATION_Y_2) {
+            arrowStage.value = 1
             return false
-          case 2:
-            if (scrollY.value > separation02) {
-              arrowStage.value = 1
-              return false
-            }
-            return false
-        }
-      },
-      data => {
-        if (data) {
-          runOnJS(haptics)('Light')
-        }
-      },
-      [isFetching]
-    )
+          }
+          return false
+      }
+    },
+    data => {
+      if (data) {
+        runOnJS(haptics)('Light')
+      }
+    },
+    [isFetching]
+  )
+  const wrapper = () => {
+    fetchingLatestIndex.current = 1
+  }
+  useAnimatedReaction(
+    () => {
+      return fetchingType.value
+    },
+    data => {
+      fetchingType.value = 0
+      switch (data) {
+        case 1:
+          runOnJS(wrapper)()
+          runOnJS(clearFirstPage)()
+          runOnJS(fetchPreviousPage)()
+          break
+        case 2:
+          runOnJS(clearFirstPage)()
+          runOnJS(refetch)()
+          break
+      }
+    },
+    []
+  )
 
-    return (
+  const headerPadding = useAnimatedStyle(
+    () => ({
+      paddingTop:
+        fetchingLatestIndex.current !== 0 ||
+        (isFetching && !isLoading && !isFetchingNextPage)
+          ? withTiming(StyleConstants.Spacing.M * 2.5)
+          : withTiming(0)
+    }),
+    [fetchingLatestIndex.current, isFetching, isFetchingNextPage, isLoading]
+  )
+
+  return (
+    <Animated.View style={headerPadding}>
       <View style={styles.base}>
         {isFetching ? (
           <View style={styles.container2}>
@@ -154,11 +256,9 @@ const TimelineRefresh = React.memo(
           </>
         )}
       </View>
-    )
-  },
-  (prev, next) =>
-    prev.isLoading === next.isLoading && prev.isFetching === next.isFetching
-)
+    </Animated.View>
+  )
+}
 
 const styles = StyleSheet.create({
   base: {