mirror of
https://github.com/tooot-app/app
synced 2025-06-05 22:19:13 +02:00
Updates
This commit is contained in:
61
src/components/CustomRefreshControl.tsx
Normal file
61
src/components/CustomRefreshControl.tsx
Normal file
@ -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
|
Reference in New Issue
Block a user