Updates

src/components/CustomRefreshControl.tsx

@@ -0,0 +1,61 @@
+import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
+import React, { useRef } from 'react'
+import { RefreshControl } from 'react-native'
+import { InfiniteData, useQueryClient } from 'react-query'
+
+export interface Props {
+  queryKey: QueryKeyTimeline
+  isFetchingPreviousPage: boolean
+  isFetching: boolean
+  fetchPreviousPage: () => void
+  refetch: () => void
+}
+
+const CustomRefreshControl = React.memo(
+  ({
+    queryKey,
+    isFetchingPreviousPage,
+    isFetching,
+    fetchPreviousPage,
+    refetch
+  }: Props) => {
+    const queryClient = useQueryClient()
+    const refreshCount = useRef(0)
+
+    return (
+      <RefreshControl
+        refreshing={
+          refreshCount.current < 2 ? isFetchingPreviousPage : isFetching
+        }
+        onRefresh={async () => {
+          if (refreshCount.current < 2) {
+            await fetchPreviousPage()
+            refreshCount.current++
+          } else {
+            queryClient.setQueryData<InfiniteData<any> | undefined>(
+              queryKey,
+              data => {
+                if (data) {
+                  return {
+                    pages: data.pages.slice(1),
+                    pageParams: data.pageParams.slice(1)
+                  }
+                }
+              }
+            )
+            await refetch()
+            refreshCount.current = 0
+          }
+        }}
+      />
+    )
+  },
+  (prev, next) => {
+    let skipUpdate = true
+    skipUpdate = prev.isFetchingPreviousPage === next.isFetchingPreviousPage
+    skipUpdate = prev.isFetching === next.isFetching
+    return skipUpdate
+  }
+)
+
+export default CustomRefreshControl