2022-12-15 14:28:36 +01:00
|
|
|
import apiInstance from '@api/instance'
|
2021-03-15 00:18:44 +01:00
|
|
|
import ComponentAccount from '@components/Account'
|
2022-12-03 16:50:54 +01:00
|
|
|
import { HeaderLeft } from '@components/Header'
|
2022-12-15 01:41:34 +01:00
|
|
|
import Icon from '@components/Icon'
|
2021-03-15 00:18:44 +01:00
|
|
|
import ComponentSeparator from '@components/Separator'
|
2022-12-15 01:41:34 +01:00
|
|
|
import CustomText from '@components/Text'
|
2021-08-29 15:25:38 +02:00
|
|
|
import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
|
2022-12-15 14:28:36 +01:00
|
|
|
import { SearchResult } from '@utils/queryHooks/search'
|
2021-03-15 00:18:44 +01:00
|
|
|
import { QueryKeyUsers, useUsersQuery } from '@utils/queryHooks/users'
|
2022-12-15 01:41:34 +01:00
|
|
|
import { StyleConstants } from '@utils/styles/constants'
|
|
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
2022-12-15 14:28:36 +01:00
|
|
|
import React, { useCallback, useEffect, useState } from 'react'
|
2022-12-03 16:50:54 +01:00
|
|
|
import { useTranslation } from 'react-i18next'
|
2022-12-15 01:41:34 +01:00
|
|
|
import { View } from 'react-native'
|
2022-12-15 14:28:36 +01:00
|
|
|
import { Circle, Flow } from 'react-native-animated-spinkit'
|
2021-03-15 00:18:44 +01:00
|
|
|
import { FlatList } from 'react-native-gesture-handler'
|
|
|
|
|
2022-12-03 16:50:54 +01:00
|
|
|
const TabSharedUsers: React.FC<TabSharedStackScreenProps<'Tab-Shared-Users'>> = ({
|
|
|
|
navigation,
|
|
|
|
route: { params }
|
|
|
|
}) => {
|
2022-12-15 01:41:34 +01:00
|
|
|
const { colors } = useTheme()
|
2022-12-03 16:50:54 +01:00
|
|
|
const { t } = useTranslation('screenTabs')
|
|
|
|
useEffect(() => {
|
|
|
|
navigation.setOptions({
|
2022-12-23 15:53:40 +01:00
|
|
|
title: t(`shared.users.${params.reference}.${params.type}`, {
|
|
|
|
count: params.count
|
|
|
|
} as any) as any,
|
2022-12-03 16:50:54 +01:00
|
|
|
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
|
|
|
|
})
|
|
|
|
}, [])
|
2021-03-15 00:18:44 +01:00
|
|
|
|
2022-12-03 16:50:54 +01:00
|
|
|
const queryKey: QueryKeyUsers = ['Users', params]
|
2022-12-15 14:28:36 +01:00
|
|
|
const { data, isFetching, hasNextPage, fetchNextPage, isFetchingNextPage } = useUsersQuery({
|
2022-12-03 16:50:54 +01:00
|
|
|
...queryKey[1],
|
|
|
|
options: {
|
2022-12-15 01:41:34 +01:00
|
|
|
getPreviousPageParam: firstPage =>
|
|
|
|
firstPage.links?.prev?.id && { min_id: firstPage.links.prev.id },
|
|
|
|
getNextPageParam: lastPage => lastPage.links?.next?.id && { max_id: lastPage.links.next.id }
|
2022-12-03 16:50:54 +01:00
|
|
|
}
|
|
|
|
})
|
|
|
|
const flattenData = data?.pages ? data.pages.flatMap(page => [...page.body]) : []
|
2021-03-15 00:18:44 +01:00
|
|
|
|
2022-12-03 16:50:54 +01:00
|
|
|
const onEndReached = useCallback(
|
|
|
|
() => hasNextPage && !isFetchingNextPage && fetchNextPage(),
|
|
|
|
[hasNextPage, isFetchingNextPage]
|
|
|
|
)
|
2021-03-15 00:18:44 +01:00
|
|
|
|
2022-12-15 14:28:36 +01:00
|
|
|
const [isSearching, setIsSearching] = useState(false)
|
|
|
|
|
2022-12-03 16:50:54 +01:00
|
|
|
return (
|
|
|
|
<FlatList
|
|
|
|
windowSize={7}
|
|
|
|
data={flattenData}
|
|
|
|
style={{
|
2022-12-15 14:28:36 +01:00
|
|
|
minHeight: '100%',
|
|
|
|
paddingVertical: StyleConstants.Spacing.Global.PagePadding
|
2022-12-03 16:50:54 +01:00
|
|
|
}}
|
2022-12-15 14:28:36 +01:00
|
|
|
renderItem={({ item }) => (
|
|
|
|
<ComponentAccount
|
|
|
|
account={item}
|
|
|
|
props={{
|
|
|
|
disabled: isSearching,
|
|
|
|
onPress: () => {
|
|
|
|
if (data?.pages[0]?.remoteData) {
|
|
|
|
setIsSearching(true)
|
|
|
|
apiInstance<SearchResult>({
|
|
|
|
version: 'v2',
|
|
|
|
method: 'get',
|
|
|
|
url: 'search',
|
|
|
|
params: {
|
|
|
|
q: `@${item.acct}`,
|
|
|
|
type: 'accounts',
|
|
|
|
limit: 1,
|
|
|
|
resolve: true
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.then(res => {
|
|
|
|
setIsSearching(false)
|
|
|
|
if (res.body.accounts[0]) {
|
|
|
|
navigation.push('Tab-Shared-Account', { account: res.body.accounts[0] })
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.catch(() => setIsSearching(false))
|
|
|
|
} else {
|
|
|
|
navigation.push('Tab-Shared-Account', { account: item })
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
children={<Flow size={StyleConstants.Font.Size.L} color={colors.secondary} />}
|
|
|
|
/>
|
|
|
|
)}
|
2022-12-03 16:50:54 +01:00
|
|
|
onEndReached={onEndReached}
|
|
|
|
onEndReachedThreshold={0.75}
|
|
|
|
ItemSeparatorComponent={ComponentSeparator}
|
2022-12-15 14:28:36 +01:00
|
|
|
ListEmptyComponent={
|
|
|
|
isFetching ? (
|
|
|
|
<View
|
|
|
|
style={{
|
|
|
|
flex: 1,
|
|
|
|
minHeight: '100%',
|
|
|
|
justifyContent: 'center',
|
|
|
|
alignItems: 'center'
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Circle size={StyleConstants.Font.Size.L} color={colors.secondary} />
|
|
|
|
</View>
|
|
|
|
) : null
|
|
|
|
}
|
2022-12-03 16:50:54 +01:00
|
|
|
maintainVisibleContentPosition={{
|
|
|
|
minIndexForVisible: 0,
|
|
|
|
autoscrollToTopThreshold: 2
|
|
|
|
}}
|
2022-12-15 01:41:34 +01:00
|
|
|
ListHeaderComponent={
|
|
|
|
data?.pages[0]?.warnIncomplete === true ? (
|
|
|
|
<View
|
|
|
|
style={{
|
|
|
|
flexDirection: 'row',
|
|
|
|
alignItems: 'center',
|
|
|
|
marginHorizontal: StyleConstants.Spacing.Global.PagePadding,
|
|
|
|
padding: StyleConstants.Spacing.S,
|
|
|
|
borderColor: colors.border,
|
|
|
|
borderWidth: 1,
|
|
|
|
borderRadius: StyleConstants.Spacing.S
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Icon
|
|
|
|
name='AlertCircle'
|
|
|
|
color={colors.secondary}
|
|
|
|
size={StyleConstants.Font.Size.M}
|
|
|
|
style={{ marginRight: StyleConstants.Spacing.S }}
|
|
|
|
/>
|
|
|
|
<CustomText fontStyle='S' style={{ flexShrink: 1, color: colors.secondary }}>
|
|
|
|
{t('shared.users.resultIncomplete')}
|
|
|
|
</CustomText>
|
|
|
|
</View>
|
|
|
|
) : null
|
|
|
|
}
|
2022-12-03 16:50:54 +01:00
|
|
|
/>
|
|
|
|
)
|
|
|
|
}
|
2021-03-15 00:18:44 +01:00
|
|
|
|
|
|
|
export default TabSharedUsers
|