mirror of https://github.com/tooot-app/app
59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import ComponentAccount from '@components/Account'
|
|
import ComponentSeparator from '@components/Separator'
|
|
import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
|
|
import { QueryKeyUsers, useUsersQuery } from '@utils/queryHooks/users'
|
|
import React, { useCallback } from 'react'
|
|
import { StyleSheet } from 'react-native'
|
|
import { FlatList } from 'react-native-gesture-handler'
|
|
|
|
const TabSharedUsers = React.memo(
|
|
({ route: { params } }: TabSharedStackScreenProps<'Tab-Shared-Users'>) => {
|
|
const queryKey: QueryKeyUsers = ['Users', params]
|
|
const { data, hasNextPage, fetchNextPage, isFetchingNextPage } =
|
|
useUsersQuery({
|
|
...queryKey[1],
|
|
options: {
|
|
getPreviousPageParam: firstPage =>
|
|
firstPage.links?.prev && { since_id: firstPage.links.next },
|
|
getNextPageParam: lastPage =>
|
|
lastPage.links?.next && { max_id: lastPage.links.next }
|
|
}
|
|
})
|
|
const flattenData = data?.pages
|
|
? data.pages.flatMap(page => [...page.body])
|
|
: []
|
|
|
|
const onEndReached = useCallback(
|
|
() => hasNextPage && !isFetchingNextPage && fetchNextPage(),
|
|
[hasNextPage, isFetchingNextPage]
|
|
)
|
|
|
|
return (
|
|
<FlatList
|
|
windowSize={7}
|
|
data={flattenData}
|
|
style={styles.flatList}
|
|
renderItem={({ item }) => (
|
|
<ComponentAccount account={item} />
|
|
)}
|
|
onEndReached={onEndReached}
|
|
onEndReachedThreshold={0.75}
|
|
ItemSeparatorComponent={ComponentSeparator}
|
|
maintainVisibleContentPosition={{
|
|
minIndexForVisible: 0,
|
|
autoscrollToTopThreshold: 2
|
|
}}
|
|
/>
|
|
)
|
|
},
|
|
() => true
|
|
)
|
|
|
|
const styles = StyleSheet.create({
|
|
flatList: {
|
|
minHeight: '100%'
|
|
}
|
|
})
|
|
|
|
export default TabSharedUsers
|