tooot/src/components/Timeline/Footer.tsx

63 lines
1.7 KiB
TypeScript
Raw Normal View History

2021-02-27 16:33:54 +01:00
import Icon from '@components/Icon'
import { QueryKeyTimeline, useTimelineQuery } from '@utils/queryHooks/timeline'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
import { Trans } from 'react-i18next'
2022-04-30 21:59:13 +02:00
import { Text, View } from 'react-native'
2021-02-27 16:33:54 +01:00
import { Circle } from 'react-native-animated-spinkit'
export interface Props {
queryKey: QueryKeyTimeline
disableInfinity: boolean
}
const TimelineFooter = React.memo(
({ queryKey, disableInfinity }: Props) => {
const { hasNextPage } = useTimelineQuery({
...queryKey[1],
options: {
enabled: !disableInfinity,
2021-03-04 14:11:08 +01:00
notifyOnChangeProps: ['hasNextPage'],
getNextPageParam: lastPage =>
lastPage?.links?.next && { max_id: lastPage.links.next }
2021-02-27 16:33:54 +01:00
}
})
2022-02-12 14:51:01 +01:00
const { colors } = useTheme()
2021-02-27 16:33:54 +01:00
return (
2022-04-30 21:59:13 +02:00
<View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
padding: StyleConstants.Spacing.M
}}
>
2021-02-27 16:33:54 +01:00
{!disableInfinity && hasNextPage ? (
2022-02-12 14:51:01 +01:00
<Circle size={StyleConstants.Font.Size.L} color={colors.secondary} />
2021-02-27 16:33:54 +01:00
) : (
2022-04-30 21:59:13 +02:00
<Text
style={{ ...StyleConstants.FontStyle.S, color: colors.secondary }}
>
2021-02-27 16:33:54 +01:00
<Trans
i18nKey='componentTimeline:end.message'
components={[
<Icon
name='Coffee'
size={StyleConstants.Font.Size.S}
2022-02-12 14:51:01 +01:00
color={colors.secondary}
2021-02-27 16:33:54 +01:00
/>
]}
/>
</Text>
)}
</View>
)
},
() => true
)
export default TimelineFooter